@charset "UTF-8";

/*
 * BM Trading · CMS Panel
 * Fuente única de estilos personalizados del panel.
 *
 * Orden de la cascada:
 * 1. Base compartida del panel.
 * 2. Menú y cabecera compartidos.
 * 3. Vistas específicas, aisladas mediante data-bm-page.
 * 4. Flujos de producto reutilizables.
 * 5. Widget de asistencia.
 *
 * No añadir bloques <style> en archivos PHP. Las nuevas reglas deben
 * incorporarse aquí y, si son específicas, aislarse por data-bm-page.
 */

/* ==================== 1. BASE DEL PANEL ==================== */
/*===========================
		COMMON css
===========================*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
:where(html[data-bm-shell]):is(html){
  scroll-behavior: smooth;
}

:where(html[data-bm-shell]) body{
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: normal;
  font-style: normal;
  color: #94a3b8; /* Text Color (Slate 400) */
  overflow-x: hidden;
  background: #0f172a; /* Main Background (Slate 900) */
}

:where(html[data-bm-shell]) *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:where(html[data-bm-shell]) a:focus,
:where(html[data-bm-shell]) input:focus,
:where(html[data-bm-shell]) textarea:focus,
:where(html[data-bm-shell]) button:focus,
:where(html[data-bm-shell]) .btn:focus,
:where(html[data-bm-shell]) .btn.focus,
:where(html[data-bm-shell]) .btn:not(:disabled):not(.disabled).active,
:where(html[data-bm-shell]) .btn:not(:disabled):not(.disabled):active{
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

:where(html[data-bm-shell]) a:hover{
  color: #365CF5;
}

:where(html[data-bm-shell]) button,
:where(html[data-bm-shell]) a{
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

:where(html[data-bm-shell]) a,
:where(html[data-bm-shell]) a:focus,
:where(html[data-bm-shell]) a:hover{
  text-decoration: none;
}

:where(html[data-bm-shell]) i,
:where(html[data-bm-shell]) span,
:where(html[data-bm-shell]) a{
  display: inline-block;
}

:where(html[data-bm-shell]) audio,
:where(html[data-bm-shell]) canvas,
:where(html[data-bm-shell]) iframe,
:where(html[data-bm-shell]) img,
:where(html[data-bm-shell]) svg,
:where(html[data-bm-shell]) video{
  vertical-align: middle;
}

:where(html[data-bm-shell]) h1 a,
:where(html[data-bm-shell]) h2 a,
:where(html[data-bm-shell]) h3 a,
:where(html[data-bm-shell]) h4 a,
:where(html[data-bm-shell]) h5 a,
:where(html[data-bm-shell]) h6 a{
  color: inherit;
}

:where(html[data-bm-shell]) ul,
:where(html[data-bm-shell]) ol{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

:where(html[data-bm-shell]) p{
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  margin: 0px;
}

:where(html[data-bm-shell]) .img-bg{
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

:where(html[data-bm-shell]) .para-width-500{
  max-width: 500px;
  width: 100%;
}

@media (max-width: 767px){
  :where(html[data-bm-shell]) .container{
    padding: 0 30px;
  }
}

/* ========== cart style ========== */
:where(html[data-bm-shell]) .card-style{
  background: #1e293b; /* Card Background (Slate 800) */
  box-sizing: border-box;
  padding: 25px 30px;
  position: relative;
  box-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.2); /* Dark Shadows */
  border-radius: 7px;
  border: 1px solid #334155; /* Subtle Border */
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .card-style{
    padding: 20px;
  }
}
:where(html[data-bm-shell]) .card-style .jvm-zoom-btn{
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  right: 30px;
  bottom: 30px;
  cursor: pointer;
  color: #fff;
}
:where(html[data-bm-shell]) .card-style .jvm-zoom-btn.jvm-zoomin{
  bottom: 70px;
}
:where(html[data-bm-shell]) .card-style .dropdown-toggle{
  border: none;
  background: none;
}
:where(html[data-bm-shell]) .card-style .dropdown-toggle::after{
  display: none;
}
:where(html[data-bm-shell]) .card-style .dropdown-menu{
  background: #1e293b;
  border: 1px solid #334155;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
:where(html[data-bm-shell]) .card-style .dropdown-menu li:hover a{
  color: #365CF5 !important;
  background: #0f172a;
}
:where(html[data-bm-shell]) .card-style .dropdown-menu li a{
  display: block;
  font-size: 14px;
  color: #94a3b8;
}

:where(html[data-bm-shell]) .error-box{
  max-width: 330px;
  margin: 65px auto;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .error-box{
    margin: 25px auto;
  }
  :where(html[data-bm-shell]) .error-box img{
    max-width: 180px;
  }
  :where(html[data-bm-shell]) .error-box h1{
    font-size: 28px;
  }
}
:where(html[data-bm-shell]) .error-box a{
  border-radius: 7px;
  padding: 7px 25px;
}

:where(html[data-bm-shell]) .max-w-350{
  max-width: 350px;
}

:where(html[data-bm-shell]) .more-btn-wrapper .dropdown-menu{
  border: 0.5px solid #334155;
  background: #1e293b;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
:where(html[data-bm-shell]) .more-btn-wrapper .dropdown-menu .dropdown-item:active,
:where(html[data-bm-shell]) .more-btn-wrapper .dropdown-menu .dropdown-item:focus{
  background: #0f172a;
}
:where(html[data-bm-shell]) .more-btn-wrapper .dropdown-menu .dropdown-item a{
  width: 100%;
  border-radius: 4px;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .more-btn-wrapper .dropdown-menu .dropdown-item i{
  font-weight: 700;
}

/* ======= Border Radius ========= */
:where(html[data-bm-shell]) .radius-4{
  border-radius: 4px;
}

:where(html[data-bm-shell]) .radius-10{
  border-radius: 10px;
}

:where(html[data-bm-shell]) .radius-30{
  border-radius: 30px;
}

:where(html[data-bm-shell]) .radius-50{
  border-radius: 50px;
}

:where(html[data-bm-shell]) .radius-full{
  border-radius: 50%;
}

:where(html[data-bm-shell]) .scroll-top{
  width: 45px;
  height: 45px;
  background: #365CF5;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .scroll-top:hover{
  color: #fff;
  background: rgba(54, 92, 245, 0.8);
}

:where(html[data-bm-shell]) .form-control:focus{
  box-shadow: none;
}

:where(html[data-bm-shell]) .form-control.is-valid:focus,
:where(html[data-bm-shell]) .was-validated .form-control:valid:focus,
:where(html[data-bm-shell]) .form-control.is-invalid:focus,
:where(html[data-bm-shell]) .was-validated .form-control:invalid:focus,
:where(html[data-bm-shell]) .form-check-input.is-valid:focus,
:where(html[data-bm-shell]) .was-validated .form-check-input:valid:focus,
:where(html[data-bm-shell]) .form-check-input.is-invalid:focus,
:where(html[data-bm-shell]) .was-validated .form-check-input:invalid:focus,
:where(html[data-bm-shell]) .form-check-input:focus,
:where(html[data-bm-shell]) .radio-style.radio-success .form-check-input:focus,
:where(html[data-bm-shell]) .radio-style.radio-warning .form-check-input:focus,
:where(html[data-bm-shell]) .radio-style.radio-danger .form-check-input:focus{
  box-shadow: none;
}

:where(html[data-bm-shell]) .hover-underline:hover{
  text-decoration: underline;
}

/* ============= typography css ============= */
:where(html[data-bm-shell]) h1,
:where(html[data-bm-shell]) h2,
:where(html[data-bm-shell]) h3,
:where(html[data-bm-shell]) h4,
:where(html[data-bm-shell]) h5,
:where(html[data-bm-shell]) h6,
:where(html[data-bm-shell]) .h1,
:where(html[data-bm-shell]) .h2,
:where(html[data-bm-shell]) .h3,
:where(html[data-bm-shell]) .h4,
:where(html[data-bm-shell]) .h5,
:where(html[data-bm-shell]) .h6{
  color: #f8fafc; /* Headings Color (Slate 50) */
  margin: 0;
}

:where(html[data-bm-shell]) h1,
:where(html[data-bm-shell]) .h1{
  font-size: 32px;
  font-weight: 700;
}

:where(html[data-bm-shell]) h2,
:where(html[data-bm-shell]) .h2{
  font-size: 28px;
  font-weight: 600;
}

:where(html[data-bm-shell]) h3,
:where(html[data-bm-shell]) .h3{
  font-size: 24px;
  font-weight: 500;
}

:where(html[data-bm-shell]) h4,
:where(html[data-bm-shell]) .h4{
  font-size: 20px;
  font-weight: 600;
}

:where(html[data-bm-shell]) h5,
:where(html[data-bm-shell]) .h5{
  font-size: 16px;
  font-weight: 700;
}

:where(html[data-bm-shell]) h6,
:where(html[data-bm-shell]) .h6{
  font-size: 16px;
  font-weight: 600;
}

:where(html[data-bm-shell]) .text-bold{
  font-weight: 700;
}

:where(html[data-bm-shell]) .text-semi-bold{
  font-weight: 600;
}

:where(html[data-bm-shell]) .text-medium{
  font-weight: 500;
}

:where(html[data-bm-shell]) .text-regular{
  font-weight: 400;
}

:where(html[data-bm-shell]) .text-light{
  font-weight: 300;
}

:where(html[data-bm-shell]) .text-sm{
  font-size: 14px;
  line-height: 22px;
}

:where(html[data-bm-shell]) .text-xs{
  font-size: 12px;
}

/* ========== breadcrumb ============ */
:where(html[data-bm-shell]) .title-wrapper .breadcrumb-wrapper,
:where(html[data-bm-shell]) .title-wrapper .title{
  margin-bottom: 30px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .title-wrapper .breadcrumb-wrapper,
:where(html[data-bm-shell]) .title-wrapper .title{
    margin-bottom: 10px;
  }
}

:where(html[data-bm-shell]) .breadcrumb-wrapper{
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .breadcrumb-wrapper{
    justify-content: flex-start;
  }
}
:where(html[data-bm-shell]) .breadcrumb-wrapper .breadcrumb li{
  font-size: 14px;
  color: #365CF5;
}
:where(html[data-bm-shell]) .breadcrumb-wrapper .breadcrumb li a{
  color: #94a3b8;
}
:where(html[data-bm-shell]) .breadcrumb-wrapper .breadcrumb li a:hover{
  color: #365CF5;
}

/* ========== Buttons css ========== */
/* buttons base styles */
:where(html[data-bm-shell]) .main-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 15px 45px;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  border-radius: 3px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.4s ease-in-out;
  border: 1px solid transparent;
  overflow: hidden;
}
:where(html[data-bm-shell]) .main-btn i{
  font-size: 17px;
}
:where(html[data-bm-shell]) .main-btn svg{
  fill: currentColor;
}
:where(html[data-bm-shell]) .main-btn:hover{
  color: inherit;
}

:where(html[data-bm-shell]) .group-btn{
  display: inline-flex;
  border: 1px solid #334155;
  border-radius: 3px;
}
:where(html[data-bm-shell]) .group-btn.square-btn .main-btn:first-child{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
:where(html[data-bm-shell]) .group-btn.square-btn .main-btn:last-child{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
:where(html[data-bm-shell]) .group-btn.rounded-full .main-btn:first-child{
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
:where(html[data-bm-shell]) .group-btn.rounded-full .main-btn:last-child{
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
:where(html[data-bm-shell]) .group-btn .main-btn{
  border-radius: 0;
}
:where(html[data-bm-shell]) .group-btn .main-btn:first-child{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
:where(html[data-bm-shell]) .group-btn .main-btn:last-child{
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
:where(html[data-bm-shell]) .group-btn .main-btn:not(.group-btn .main-btn:last-child){
  border-right: 1px solid #334155;
}

:where(html[data-bm-shell]) .btn-sm{
  padding: 10px 20px;
  font-weight: 400;
}

/* buttons hover effect */
:where(html[data-bm-shell]) .btn-hover{
  position: relative;
  overflow: hidden;
}
:where(html[data-bm-shell]) .btn-hover::after{
  content: "";
  position: absolute;
  width: 0%;
  height: 0%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  top: 50%;
  left: 50%;
  padding: 50%;
  z-index: -1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
  -moz-transform: translate3d(-50%, -50%, 0) scale(0);
  -ms-transform: translate3d(-50%, -50%, 0) scale(0);
  -o-transform: translate3d(-50%, -50%, 0) scale(0);
  transform: translate3d(-50%, -50%, 0) scale(0);
}
:where(html[data-bm-shell]) .btn-hover:hover::after{
  -webkit-transform: translate3d(-50%, -50%, 0) scale(1.3);
  -moz-transform: translate3d(-50%, -50%, 0) scale(1.3);
  -ms-transform: translate3d(-50%, -50%, 0) scale(1.3);
  -o-transform: translate3d(-50%, -50%, 0) scale(1.3);
  transform: translate3d(-50%, -50%, 0) scale(1.3);
}

/* Dropdown buttons */
:where(html[data-bm-shell]) .base-dropdown-btn .main-btn{
  padding: 8px 15px;
}
:where(html[data-bm-shell]) .base-dropdown-btn .main-btn svg{
  fill: currentColor;
}
:where(html[data-bm-shell]) .base-dropdown-btn .dropdown-menu{
  background: #1e293b;
  box-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  border: 1px solid #334155;
}
:where(html[data-bm-shell]) .base-dropdown-btn .dropdown-item{
  padding: 8px 15px;
  color: #94a3b8;
  font-weight: 500;
}
:where(html[data-bm-shell]) .base-dropdown-btn .dropdown-item:hover{
  color: #f8fafc !important;
  background: #0f172a;
}

/* primary buttons */
:where(html[data-bm-shell]) .primary-btn{
  background: #365CF5;
  color: #fff;
}
:where(html[data-bm-shell]) .primary-btn:hover{
  color: #fff;
}

:where(html[data-bm-shell]) .primary-btn-outline{
  background: transparent;
  color: #365CF5;
  border-color: #365CF5;
}
:where(html[data-bm-shell]) .primary-btn-outline:hover{
  color: #fff;
  background: #365CF5;
}

:where(html[data-bm-shell]) .primary-btn-light{
  background: rgba(54, 92, 245, 0.12);
  color: #365CF5;
}
:where(html[data-bm-shell]) .primary-btn-light:hover{
  color: #365CF5;
}

:where(html[data-bm-shell]) .primary-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #365CF5;
}
:where(html[data-bm-shell]) .primary-btn-group.active,
:where(html[data-bm-shell]) .primary-btn-group:hover{
  color: #fff;
  background: #365CF5;
  border-color: #365CF5 !important;
}

/* secondary buttons */
:where(html[data-bm-shell]) .secondary-btn{
  background: #00c1f8;
  color: #fff;
}
:where(html[data-bm-shell]) .secondary-btn:hover{
  color: #fff;
}

:where(html[data-bm-shell]) .secondary-btn-outline{
  background: transparent;
  color: #00c1f8;
  border-color: #00c1f8;
}
:where(html[data-bm-shell]) .secondary-btn-outline:hover{
  color: #fff;
  background: #00c1f8;
}

:where(html[data-bm-shell]) .secondary-btn-light{
  background: rgba(0, 193, 248, 0.12);
  color: #00c1f8;
}
:where(html[data-bm-shell]) .secondary-btn-light:hover{
  color: #00c1f8;
}

:where(html[data-bm-shell]) .secondary-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #00c1f8;
}
:where(html[data-bm-shell]) .secondary-btn-group.active,
:where(html[data-bm-shell]) .secondary-btn-group:hover{
  color: #fff;
  background: #00c1f8;
  border-color: #00c1f8 !important;
}

/* success buttons */
:where(html[data-bm-shell]) .success-btn{
  background: #219653;
  color: #fff;
}
:where(html[data-bm-shell]) .success-btn:hover{
  color: #fff;
}

:where(html[data-bm-shell]) .success-btn-outline{
  background: transparent;
  color: #219653;
  border-color: #219653;
}
:where(html[data-bm-shell]) .success-btn-outline:hover{
  color: #fff;
  background: #219653;
}

:where(html[data-bm-shell]) .success-btn-light{
  background: rgba(33, 150, 83, 0.12);
  color: #219653;
}
:where(html[data-bm-shell]) .success-btn-light:hover{
  color: #219653;
}

:where(html[data-bm-shell]) .success-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #219653;
}
:where(html[data-bm-shell]) .success-btn-group.active,
:where(html[data-bm-shell]) .success-btn-group:hover{
  color: #fff;
  background: #219653;
  border-color: #219653 !important;
}

/* danger buttons */
:where(html[data-bm-shell]) .danger-btn{
  background: #d50100;
  color: #fff;
}
:where(html[data-bm-shell]) .danger-btn:hover{
  color: #fff;
}

:where(html[data-bm-shell]) .danger-btn-outline{
  background: transparent;
  color: #d50100;
  border-color: #d50100;
}
:where(html[data-bm-shell]) .danger-btn-outline:hover{
  color: #fff;
  background: #d50100;
}

:where(html[data-bm-shell]) .danger-btn-light{
  background: rgba(213, 1, 0, 0.12);
  color: #d50100;
}
:where(html[data-bm-shell]) .danger-btn-light:hover{
  color: #d50100;
}

:where(html[data-bm-shell]) .danger-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #d50100;
}
:where(html[data-bm-shell]) .danger-btn-group.active,
:where(html[data-bm-shell]) .danger-btn-group:hover{
  color: #fff;
  background: #d50100;
  border-color: #d50100 !important;
}

/* warning buttons */
:where(html[data-bm-shell]) .warning-btn{
  background: #f7c800;
  color: #fff;
}
:where(html[data-bm-shell]) .warning-btn:hover{
  color: #fff;
}

:where(html[data-bm-shell]) .warning-btn-outline{
  background: transparent;
  color: #f7c800;
  border-color: #f7c800;
}
:where(html[data-bm-shell]) .warning-btn-outline:hover{
  color: #fff;
  background: #f7c800;
}

:where(html[data-bm-shell]) .warning-btn-light{
  background: rgba(247, 200, 0, 0.12);
  color: #f7c800;
}
:where(html[data-bm-shell]) .warning-btn-light:hover{
  color: #f7c800;
}

:where(html[data-bm-shell]) .warning-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #f7c800;
}
:where(html[data-bm-shell]) .warning-btn-group.active,
:where(html[data-bm-shell]) .warning-btn-group:hover{
  color: #fff;
  background: #f7c800;
  border-color: #f7c800 !important;
}

/* info buttons */
:where(html[data-bm-shell]) .info-btn{
  background: #97ca31;
  color: #fff;
}
:where(html[data-bm-shell]) .info-btn:hover{
  color: #fff;
}

:where(html[data-bm-shell]) .info-btn-outline{
  background: transparent;
  color: #97ca31;
  border-color: #97ca31;
}
:where(html[data-bm-shell]) .info-btn-outline:hover{
  color: #fff;
  background: #97ca31;
}

:where(html[data-bm-shell]) .info-btn-light{
  background: rgba(151, 202, 49, 0.12);
  color: #97ca31;
}
:where(html[data-bm-shell]) .info-btn-light:hover{
  color: #97ca31;
}

:where(html[data-bm-shell]) .info-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #97ca31;
}
:where(html[data-bm-shell]) .info-btn-group.active,
:where(html[data-bm-shell]) .info-btn-group:hover{
  color: #fff;
  background: #97ca31;
  border-color: #97ca31 !important;
}

/* dark buttons */
:where(html[data-bm-shell]) .dark-btn{
  background: #0f172a;
  color: #fff;
  border: 1px solid #334155;
}
:where(html[data-bm-shell]) .dark-btn:hover{
  color: #fff;
  background: #1e293b;
}

:where(html[data-bm-shell]) .dark-btn-outline{
  background: transparent;
  color: #f8fafc;
  border-color: #f8fafc;
}
:where(html[data-bm-shell]) .dark-btn-outline:hover{
  color: #0f172a;
  background: #f8fafc;
}

:where(html[data-bm-shell]) .dark-btn-light{
  background: rgba(248, 250, 252, 0.12);
  color: #f8fafc;
}
:where(html[data-bm-shell]) .dark-btn-light:hover{
  color: #f8fafc;
}

:where(html[data-bm-shell]) .dark-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .dark-btn-group.active,
:where(html[data-bm-shell]) .dark-btn-group:hover{
  color: #0f172a;
  background: #f8fafc;
  border-color: #f8fafc !important;
}

/* light buttons */
:where(html[data-bm-shell]) .light-btn{
  background: #334155;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .light-btn:hover{
  color: #fff;
  background: #475569;
}

:where(html[data-bm-shell]) .light-btn-outline{
  background: transparent;
  color: #f8fafc;
  border-color: #334155;
}
:where(html[data-bm-shell]) .light-btn-outline:hover{
  color: #fff;
  background: #334155;
}

:where(html[data-bm-shell]) .light-btn-light{
  background: rgba(51, 65, 85, 0.5);
  color: #f8fafc;
}
:where(html[data-bm-shell]) .light-btn-light:hover{
  color: #f8fafc;
}

:where(html[data-bm-shell]) .light-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .light-btn-group.active,
:where(html[data-bm-shell]) .light-btn-group:hover{
  color: #fff;
  background: #334155;
  border-color: #334155 !important;
}

/* active buttons */
:where(html[data-bm-shell]) .active-btn{
  background: #365CF5;
  color: #fff;
}
:where(html[data-bm-shell]) .active-btn:hover{
  color: #fff;
}

:where(html[data-bm-shell]) .active-btn-outline{
  background: transparent;
  color: #365CF5;
  border-color: #365CF5;
}
:where(html[data-bm-shell]) .active-btn-outline:hover{
  color: #fff;
  background: #365CF5;
}

:where(html[data-bm-shell]) .active-btn-light{
  background: rgba(54, 92, 245, 0.12);
  color: #365CF5;
}
:where(html[data-bm-shell]) .active-btn-light:hover{
  color: #365CF5;
}

:where(html[data-bm-shell]) .active-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #365CF5;
}
:where(html[data-bm-shell]) .active-btn-group.active,
:where(html[data-bm-shell]) .active-btn-group:hover{
  color: #fff;
  background: #365CF5;
  border-color: #365CF5 !important;
}

/* deactive buttons */
:where(html[data-bm-shell]) .deactive-btn{
  background: #1e293b;
  color: #64748b;
  border: 1px solid #334155;
}
:where(html[data-bm-shell]) .deactive-btn:hover{
  color: #64748b;
}

:where(html[data-bm-shell]) .deactive-btn-outline{
  background: transparent;
  color: #64748b;
  border-color: #334155;
}
:where(html[data-bm-shell]) .deactive-btn-outline:hover{
  color: #64748b;
  background: #1e293b;
}

:where(html[data-bm-shell]) .deactive-btn-light{
  background: #1e293b;
  color: #64748b;
}
:where(html[data-bm-shell]) .deactive-btn-light:hover{
  color: #64748b;
}

:where(html[data-bm-shell]) .deactive-btn-group{
  background: transparent;
  border: 1px solid transparent;
  color: #64748b;
}
:where(html[data-bm-shell]) .deactive-btn-group.active,
:where(html[data-bm-shell]) .deactive-btn-group:hover{
  color: #9AA4CA;
  background: #334155;
  border-color: #334155 !important;
}

/* =========  square-btn ========= */
:where(html[data-bm-shell]) .square-btn{
  border-radius: 0px;
}

/* =========  rounded-md ========= */
:where(html[data-bm-shell]) .rounded-md{
  border-radius: 10px;
}

/* =========  rounded-full ========= */
:where(html[data-bm-shell]) .rounded-full{
  border-radius: 30px;
}

/* ========== buttons group css ========= */
:where(html[data-bm-shell]) .buttons-group{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
:where(html[data-bm-shell]) .buttons-group li{
  margin: 10px;
}

/* ====== Status Button ====== */
:where(html[data-bm-shell]) .status-btn{
  padding: 7px 15px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 400;
}
:where(html[data-bm-shell]) .status-btn.primary-btn{
  color: #fff;
  background: #365cf5;
}
:where(html[data-bm-shell]) .status-btn.active-btn{
  color: #365CF5;
  background: rgba(54, 92, 245, 0.1);
}
:where(html[data-bm-shell]) .status-btn.close-btn{
  color: #d50100;
  background: rgba(213, 1, 0, 0.1);
}
:where(html[data-bm-shell]) .status-btn.warning-btn{
  color: #f7c800;
  background: rgba(247, 200, 0, 0.1);
}
:where(html[data-bm-shell]) .status-btn.info-btn{
  color: #97ca31;
  background: rgba(151, 202, 49, 0.1);
}
:where(html[data-bm-shell]) .status-btn.success-btn{
  color: #219653;
  background: rgba(33, 150, 83, 0.1);
}
:where(html[data-bm-shell]) .status-btn.secondary-btn{
  color: #00c1f8;
  background: rgba(0, 193, 248, 0.1);
}
:where(html[data-bm-shell]) .status-btn.dark-btn{
  color: #f8fafc;
  background: rgba(248, 250, 252, 0.1);
}
:where(html[data-bm-shell]) .status-btn.orange-btn{
  color: #f2994a;
  background: rgba(242, 153, 74, 0.1);
}

/* ============ alerts css ============ */
:where(html[data-bm-shell]) .alert-box{
  display: flex;
  position: relative;
  margin-bottom: 20px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .alert-box{
    padding-left: 0px !important;
  }
}
:where(html[data-bm-shell]) .alert-box .left{
  max-width: 75px;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #d50100;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .alert-box .left{
    display: none;
  }
}
:where(html[data-bm-shell]) .alert-box .left h5{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  color: #fff;
}
:where(html[data-bm-shell]) .alert-box .alert{
  margin-bottom: 0px;
  padding: 25px 40px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .alert-box .alert{
    padding: 20px;
  }
}

/* Alert Primary */
:where(html[data-bm-shell]) .primary-alert .left{
  background: #365CF5;
}
:where(html[data-bm-shell]) .primary-alert .alert{
  color: #365CF5;
  border: 1px solid #365CF5;
  background: rgba(54, 92, 245, 0.2);
  width: 100%;
}
:where(html[data-bm-shell]) .primary-alert .alert .alert-heading{
  color: #365CF5;
  margin-bottom: 15px;
}

/* Alert Danger */
:where(html[data-bm-shell]) .danger-alert .left{
  background: #d50100;
}
:where(html[data-bm-shell]) .danger-alert .alert{
  color: #d50100;
  border: 1px solid #d50100;
  background: rgba(213, 1, 0, 0.2);
  width: 100%;
}
:where(html[data-bm-shell]) .danger-alert .alert .alert-heading{
  color: #d50100;
  margin-bottom: 15px;
}

/* Alert warning */
:where(html[data-bm-shell]) .warning-alert .left{
  background: #f7c800;
}
:where(html[data-bm-shell]) .warning-alert .alert{
  color: #f7c800;
  border: 1px solid #f7c800;
  background: rgba(247, 200, 0, 0.2);
  width: 100%;
}
:where(html[data-bm-shell]) .warning-alert .alert .alert-heading{
  color: #f7c800;
  margin-bottom: 15px;
}

/* Alert warning */
:where(html[data-bm-shell]) .warning-alert .left{
  background: #f7c800;
}
:where(html[data-bm-shell]) .warning-alert .alert{
  color: #f7c800;
  border: 1px solid #f7c800;
  background: rgba(247, 200, 0, 0.2);
  width: 100%;
}
:where(html[data-bm-shell]) .warning-alert .alert .alert-heading{
  color: #f7c800;
  margin-bottom: 15px;
}

/* Alert info */
:where(html[data-bm-shell]) .info-alert .left{
  background: #97ca31;
}
:where(html[data-bm-shell]) .info-alert .alert{
  color: #97ca31;
  border: 1px solid #97ca31;
  background: rgba(151, 202, 49, 0.2);
  width: 100%;
}
:where(html[data-bm-shell]) .info-alert .alert .alert-heading{
  color: #97ca31;
  margin-bottom: 15px;
}

/* Alert success */
:where(html[data-bm-shell]) .success-alert .left{
  background: #219653;
}
:where(html[data-bm-shell]) .success-alert .alert{
  color: #219653;
  border: 1px solid #219653;
  background: rgba(33, 150, 83, 0.2);
  width: 100%;
}
:where(html[data-bm-shell]) .success-alert .alert .alert-heading{
  color: #219653;
  margin-bottom: 15px;
}

/* Alert secondary */
:where(html[data-bm-shell]) .secondary-alert .left{
  background: #00c1f8;
}
:where(html[data-bm-shell]) .secondary-alert .alert{
  color: #00c1f8;
  border: 1px solid #00c1f8;
  background: rgba(0, 193, 248, 0.2);
  width: 100%;
}
:where(html[data-bm-shell]) .secondary-alert .alert .alert-heading{
  color: #00c1f8;
  margin-bottom: 15px;
}

/* Alert gray */
:where(html[data-bm-shell]) .gray-alert .left{
  background: #94a3b8;
}
:where(html[data-bm-shell]) .gray-alert .alert{
  color: #94a3b8;
  border: 1px solid #94a3b8;
  background: rgba(148, 163, 184, 0.2);
  width: 100%;
}
:where(html[data-bm-shell]) .gray-alert .alert .alert-heading{
  color: #94a3b8;
  margin-bottom: 15px;
}

/* Alert black */
:where(html[data-bm-shell]) .black-alert .left{
  background: #0f172a;
}
:where(html[data-bm-shell]) .black-alert .alert{
  color: #f8fafc;
  border: 1px solid #0f172a;
  background: rgba(15, 23, 42, 0.4);
  width: 100%;
}
:where(html[data-bm-shell]) .black-alert .alert .alert-heading{
  color: #f8fafc;
  margin-bottom: 15px;
}

/* Alert orange */
:where(html[data-bm-shell]) .orange-alert .left{
  background: #f2994a;
}
:where(html[data-bm-shell]) .orange-alert .alert{
  color: #f2994a;
  border: 1px solid #f2994a;
  background: rgba(242, 153, 74, 0.2);
  width: 100%;
}
:where(html[data-bm-shell]) .orange-alert .alert .alert-heading{
  color: #f2994a;
  margin-bottom: 15px;
}

/* ========== cards css =========== */
/* card-style-1 */
:where(html[data-bm-shell]) .card-style-1{
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 25px 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .card-style-1:hover{
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
:where(html[data-bm-shell]) .card-style-1 .card-meta{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 30px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .card-style-1 .card-meta{
    padding: 0 20px;
  }
}
:where(html[data-bm-shell]) .card-style-1 .card-meta .image{
  max-width: 40px;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}
:where(html[data-bm-shell]) .card-style-1 .card-meta .image img{
  width: 100%;
}
:where(html[data-bm-shell]) .card-style-1 .card-meta .text p{
  color: #f8fafc;
}
:where(html[data-bm-shell]) .card-style-1 .card-meta .text p a{
  color: inherit;
}
:where(html[data-bm-shell]) .card-style-1 .card-meta .text p a:hover{
  color: #365CF5;
}
:where(html[data-bm-shell]) .card-style-1 .card-image{
  border-radius: 10px;
  margin-bottom: 25px;
  overflow: hidden;
}
:where(html[data-bm-shell]) .card-style-1 .card-image a{
  display: block;
}
:where(html[data-bm-shell]) .card-style-1 .card-image img{
  width: 100%;
}
:where(html[data-bm-shell]) .card-style-1 .card-content{
  padding: 0px 30px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .card-style-1 .card-content{
    padding: 0px 20px;
  }
}
:where(html[data-bm-shell]) .card-style-1 .card-content h4 a{
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
:where(html[data-bm-shell]) .card-style-1 .card-content h4 a:hover{
  color: #365CF5;
}

/* card-style-2 */
:where(html[data-bm-shell]) .card-style-2{
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 20px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .card-style-2:hover{
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
:where(html[data-bm-shell]) .card-style-2 .card-image{
  border-radius: 4px;
  margin-bottom: 30px;
  overflow: hidden;
}
:where(html[data-bm-shell]) .card-style-2 .card-image a{
  display: block;
}
:where(html[data-bm-shell]) .card-style-2 .card-image img{
  width: 100%;
}
:where(html[data-bm-shell]) .card-style-2 .card-content{
  padding: 0px 10px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .card-style-2 .card-content{
    padding: 0px;
  }
}
:where(html[data-bm-shell]) .card-style-2 .card-content h4 a{
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
:where(html[data-bm-shell]) .card-style-2 .card-content h4 a:hover{
  color: #365CF5;
}

/* card-style-3 */
:where(html[data-bm-shell]) .card-style-3{
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 25px 30px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .card-style-3:hover{
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
:where(html[data-bm-shell]) .card-style-3 .card-content h4 a{
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
:where(html[data-bm-shell]) .card-style-3 .card-content h4 a:hover{
  color: #365CF5;
}
:where(html[data-bm-shell]) .card-style-3 .card-content a.read-more{
  font-weight: 500;
  color: #f8fafc;
  margin-top: 20px;
}
:where(html[data-bm-shell]) .card-style-3 .card-content a.read-more:hover{
  color: #365CF5;
  letter-spacing: 2px;
}

/* card-style-4 */
:where(html[data-bm-shell]) .card-style-4{
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 20px 30px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .card-style-4:hover{
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
:where(html[data-bm-shell]) .card-style-4 .card-image{
  border-radius: 50%;
  margin: auto;
  margin-bottom: 30px;
  max-width: 250px;
  width: 100%;
  overflow: hidden;
}
:where(html[data-bm-shell]) .card-style-4 .card-image a{
  display: block;
}
:where(html[data-bm-shell]) .card-style-4 .card-image img{
  width: 100%;
}
:where(html[data-bm-shell]) .card-style-4 .card-content{
  margin-bottom: 10px;
}
:where(html[data-bm-shell]) .card-style-4 .card-content h4 a{
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
:where(html[data-bm-shell]) .card-style-4 .card-content h4 a:hover{
  color: #365CF5;
}
:where(html[data-bm-shell]) .card-style-4 .card-content a.read-more{
  font-weight: 500;
  color: #f8fafc;
  margin-top: 20px;
}
:where(html[data-bm-shell]) .card-style-4 .card-content a.read-more:hover{
  color: #365CF5;
  letter-spacing: 2px;
}

/* card-style-5 */
:where(html[data-bm-shell]) .card-style-5{
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  align-items: center;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .card-style-5:hover{
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .card-style-5{
    display: block;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px){
  :where(html[data-bm-shell]) .card-style-5{
    display: flex;
  }
}
:where(html[data-bm-shell]) .card-style-5 .card-image{
  margin: auto;
  margin-right: 20px;
  border-radius: 4px;
  max-width: 180px;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .card-style-5 .card-image{
    margin-right: auto;
    margin-bottom: 20px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px){
  :where(html[data-bm-shell]) .card-style-5 .card-image{
    margin-right: 20px;
    margin-bottom: 0px;
    max-width: 180px;
  }
}
:where(html[data-bm-shell]) .card-style-5 .card-image a{
  display: block;
}
:where(html[data-bm-shell]) .card-style-5 .card-image img{
  width: 100%;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .card-style-5 .card-image img{
    width: 100%;
  }
}
:where(html[data-bm-shell]) .card-style-5 .card-content{
  margin-bottom: 10px;
}
:where(html[data-bm-shell]) .card-style-5 .card-content h4 a{
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
:where(html[data-bm-shell]) .card-style-5 .card-content h4 a:hover{
  color: #365CF5;
}
:where(html[data-bm-shell]) .card-style-5 .card-content .main-btn{
  margin-top: 20px;
}

/* ======= card-style-6 ======== */
:where(html[data-bm-shell]) .card-style-6{
  padding: 25px 30px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .card-style-6:hover{
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px){
  :where(html[data-bm-shell]) .card-style-6{
    padding: 20px;
  }
}
:where(html[data-bm-shell]) .card-style-6 .card-image{
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
}
:where(html[data-bm-shell]) .card-style-6 .card-image a{
  display: block;
}
:where(html[data-bm-shell]) .card-style-6 .card-image a img{
  width: 100%;
}
:where(html[data-bm-shell]) .card-style-6 .card-action{
  display: flex;
}
:where(html[data-bm-shell]) .card-style-6 .card-action .action{
  display: flex;
  align-items: center;
}
:where(html[data-bm-shell]) .card-style-6 .card-action .action a{
  color: #94a3b8;
  font-size: 14px;
}
:where(html[data-bm-shell]) .card-style-6 .card-action .action a:hover{
  text-decoration: underline;
}
:where(html[data-bm-shell]) .card-style-6 .card-action .action button{
  border: none;
  background: none;
  display: flex;
  color: #f8fafc;
  margin-right: 10px;
  font-size: 16px;
}
:where(html[data-bm-shell]) .card-style-6 .card-action .action button:hover{
  color: #365CF5;
}

/* ======= icon-card ======== */
:where(html[data-bm-shell]) .icon-card{
  display: flex;
  align-items: center;
  background: #1e293b;
  padding: 30px 20px;
  box-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  border: 1px solid #334155;
}
:where(html[data-bm-shell]) .icon-card.icon-card-3{
  display: block;
  padding: 0px;
}
:where(html[data-bm-shell]) .icon-card.icon-card-3 .card-content{
  display: flex;
  padding: 20px;
  padding-bottom: 0;
}
:where(html[data-bm-shell]) .icon-card.icon-card-4{
  display: block;
  padding: 30px;
}
:where(html[data-bm-shell]) .icon-card.icon-card-4 .icon{
  max-width: 50px;
  height: 50px;
  border-radius: 5px;
  background: rgba(54, 92, 245, 0.08);
}
:where(html[data-bm-shell]) .icon-card.icon-card-4 .text-danger-2 i{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
:where(html[data-bm-shell]) .icon-card.icon-card-4 .card-content{
  margin-top: 18px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px){
  :where(html[data-bm-shell]) .icon-card h6{
    font-size: 15px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px){
  :where(html[data-bm-shell]) .icon-card h3{
    font-size: 20px;
  }
}
:where(html[data-bm-shell]) .icon-card.icon-card-2{
  display: block;
}
:where(html[data-bm-shell]) .icon-card.icon-card-2 .progress{
  height: 7px;
  background-color: #334155;
}
:where(html[data-bm-shell]) .icon-card.icon-card-2 .progress .progress-bar{
  border-radius: 4px;
}
:where(html[data-bm-shell]) .icon-card .icon{
  max-width: 46px;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin-right: 20px;
  background: rgba(54, 92, 245, 0.1);
  color: #365CF5;
  font-weight: 700;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px){
  :where(html[data-bm-shell]) .icon-card .icon{
    margin-right: 10px;
  }
}
:where(html[data-bm-shell]) .icon-card .icon.purple{
  background: rgba(155, 81, 224, 0.1);
  color: #9b51e0;
}
:where(html[data-bm-shell]) .icon-card .icon.success{
  background: rgba(33, 150, 83, 0.1);
  color: #219653;
}
:where(html[data-bm-shell]) .icon-card .icon.primary{
  background: rgba(54, 92, 245, 0.1);
  color: #365CF5;
}
:where(html[data-bm-shell]) .icon-card .icon.orange{
  background: rgba(242, 153, 74, 0.1);
  color: #f2994a;
}
:where(html[data-bm-shell]) .icon-card .icon.blue-light{
  background: rgba(73, 190, 255, 0.08);
  color: #49BEFF;
}
:where(html[data-bm-shell]) .icon-card .icon.opacity-100.purple{
  background: #9b51e0;
  color: #fff;
}
:where(html[data-bm-shell]) .icon-card .icon.opacity-100.success{
  background: #219653;
  color: #fff;
}
:where(html[data-bm-shell]) .icon-card .icon.opacity-100.primary{
  background: #365CF5;
  color: #fff;
}
:where(html[data-bm-shell]) .icon-card .icon.opacity-100.orange{
  background: #f2994a;
  color: #fff;
}
:where(html[data-bm-shell]) .icon-card .icon.opacity-100.deep-blue{
  background: #345d9d;
  color: #fff;
}

:where(html[data-bm-shell]) .card-wrapper{
  display: flex;
  width: 100%;
  overflow-x: auto;
  padding: 25px 15px;
}
:where(html[data-bm-shell]) .card-wrapper .single-card-wrapper{
  padding: 0px 15px;
}
:where(html[data-bm-shell]) .card-wrapper .single-card{
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 30px;
  max-width: 330px;
  min-width: 330px;
  width: 100%;
}
:where(html[data-bm-shell]) .card-wrapper .single-card .bg-shape{
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  z-index: -1;
}
:where(html[data-bm-shell]) .card-wrapper .single-card h3{
  font-weight: bold;
  font-size: 24px;
  color: #fff;
  margin-bottom: 36px;
}
:where(html[data-bm-shell]) .card-wrapper .single-card .card-info{
  display: flex;
  align-items: center;
}
:where(html[data-bm-shell]) .card-wrapper .single-card .card-info span{
  font-weight: 500;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
:where(html[data-bm-shell]) .card-wrapper .single-card .card-info p{
  font-weight: 500;
  font-size: 12px;
  color: #fff;
}

/* =========== tables css =========== */
:where(html[data-bm-shell]) .table{
  border-collapse: inherit;
  border-spacing: 0px;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .table > :not(caption) > * > *{
  padding: 15px 0;
  border-bottom-color: #334155;
  vertical-align: middle;
  color: #94a3b8;
  background-color: transparent;
}
:where(html[data-bm-shell]) .table > :not(:last-child) > :last-child > *{
  border-bottom-color: #334155;
}
:where(html[data-bm-shell]) .table tbody tr:first-child > *{
  padding-top: 20px;
}
:where(html[data-bm-shell]) .table tbody tr:last-child > *{
  border-bottom-color: transparent;
  padding-bottom: 0px;
}
:where(html[data-bm-shell]) .table th h6{
  font-weight: 500;
  color: #f8fafc;
  font-size: 14px;
}
:where(html[data-bm-shell]) .table td.min-width{
  padding: 5px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .table td.min-width{
    min-width: 150px;
  }
}
:where(html[data-bm-shell]) .table td p{
  font-size: 14px;
  line-height: 1.5;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .table td p a{
  color: inherit;
}
:where(html[data-bm-shell]) .table td p a:hover{
  color: #365CF5;
}
:where(html[data-bm-shell]) .table .lead-info{
  min-width: 200px;
}
:where(html[data-bm-shell]) .table .lead-email{
  min-width: 150px;
  white-space: nowrap;
}
:where(html[data-bm-shell]) .table .lead-phone{
  min-width: 160px;
}
:where(html[data-bm-shell]) .table .lead-company{
  min-width: 180px;
}
:where(html[data-bm-shell]) .table .referrals-image{
  min-width: 150px;
}
:where(html[data-bm-shell]) .table .referrals-image .image{
  width: 55px;
  max-width: 100%;
  height: 55px;
  border-radius: 4px;
  overflow: hidden;
}
:where(html[data-bm-shell]) .table .referrals-image .image img{
  width: 100%;
}
:where(html[data-bm-shell]) .table .lead{
  display: flex;
  align-items: center;
}
:where(html[data-bm-shell]) .table .lead .lead-image{
  max-width: 50px;
  width: 100%;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}
:where(html[data-bm-shell]) .table .lead .lead-image img{
  width: 100%;
}
:where(html[data-bm-shell]) .table .lead .lead-text{
  width: 100%;
}
:where(html[data-bm-shell]) .table .employee-image{
  width: 50px;
  max-width: 100%;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}
:where(html[data-bm-shell]) .table .employee-image img{
  width: 100%;
}
:where(html[data-bm-shell]) .table .action{
  display: flex;
  align-items: center;
}
:where(html[data-bm-shell]) .table .action button{
  border: none;
  background: transparent;
  padding: 0px 6px;
  font-size: 18px;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .table .action button.edit:hover{
  color: #365CF5;
}
:where(html[data-bm-shell]) .table .action button::after{
  display: none;
}
:where(html[data-bm-shell]) .table .action .dropdown-menu{
  background: #1e293b;
  border: 1px solid #334155;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
:where(html[data-bm-shell]) .table .action .dropdown-menu li:hover a{
  color: #365CF5 !important;
  background: #0f172a;
}
:where(html[data-bm-shell]) .table .action .dropdown-menu li a{
  display: block;
  color: #94a3b8;
}

:where(html[data-bm-shell]) .top-selling-table tr th,
:where(html[data-bm-shell]) .top-selling-table tr td{
  vertical-align: middle;
  padding: 10px 5px;
}
:where(html[data-bm-shell]) .top-selling-table tr .min-width{
  min-width: 80px;
  white-space: nowrap;
}
:where(html[data-bm-shell]) .top-selling-table .form-check-input[type=checkbox]{
  margin-left: 5px;
  background-color: #0f172a;
  border-color: #334155;
}
:where(html[data-bm-shell]) .top-selling-table .form-check-input[type=checkbox]:checked{
  background-color: #365CF5;
  border-color: #365CF5;
}
:where(html[data-bm-shell]) .top-selling-table .product{
  display: flex;
  align-items: center;
  min-width: 150px;
}
:where(html[data-bm-shell]) .top-selling-table .product .image{
  border-radius: 4px;
  overflow: hidden;
  margin-right: 15px;
  max-width: 50px;
  width: 100%;
  height: 50px;
}
:where(html[data-bm-shell]) .top-selling-table .product .image img{
  width: 100%;
}
:where(html[data-bm-shell]) .top-selling-table .product p{
  width: 100%;
}

@media (max-width: 767px){
  :where(html[data-bm-shell]) .referrals-table-card .title .right{
    width: 100%;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px){
  :where(html[data-bm-shell]) .referrals-table-card .title .right{
    width: auto;
  }
}
:where(html[data-bm-shell]) .referrals-table-card .referrals-table td{
  padding: 10px;
}

/* ===== lead-table ===== */
:where(html[data-bm-shell]) .lead-table th,
:where(html[data-bm-shell]) .lead-table td{
  padding: 10px 5px;
}
:where(html[data-bm-shell]) .lead-table .name{
  min-width: 120px;
}
:where(html[data-bm-shell]) .lead-table .email{
  min-width: 130px;
}
:where(html[data-bm-shell]) .lead-table .project{
  min-width: 150px;
}
:where(html[data-bm-shell]) .lead-table .status{
  min-width: 120px;
  text-align: center;
}
:where(html[data-bm-shell]) .lead-table .action{
  min-width: 60px;
}

:where(html[data-bm-shell]) .clients-table-card .table .employee-info{
  min-width: 150px;
}

:where(html[data-bm-shell]) .clients-table th,
:where(html[data-bm-shell]) .clients-table td{
  padding: 5px;
}
:where(html[data-bm-shell]) .clients-table th.min-width,
:where(html[data-bm-shell]) .clients-table td.min-width{
  min-width: 150px;
}
:where(html[data-bm-shell]) .clients-table .employee-image{
  margin-right: 0px;
}

:where(html[data-bm-shell]) .table-pagination ul li a{
  width: 32px;
  height: 32px;
  background: #334155;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
:where(html[data-bm-shell]) .table-pagination ul li a:hover,
:where(html[data-bm-shell]) .table-pagination ul li a.active{
  background: #365CF5;
  color: #fff;
}

:where(html[data-bm-shell]) .table-search form{
  max-width: 270px;
  position: relative;
}
:where(html[data-bm-shell]) .table-search form input{
  width: 100%;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 4px;
  height: 46px;
  padding-left: 44px;
  color: #94a3b8;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .table-search form input:focus{
  border-color: #365CF5;
  background: #0f172a;
}
:where(html[data-bm-shell]) .table-search form button{
  position: absolute;
  border: none;
  background: transparent;
  left: 16px;
  top: 0;
  height: 46px;
  color: #94a3b8;
}

:where(html[data-bm-shell]) .striped-table td,
:where(html[data-bm-shell]) .striped-table th{
  padding-left: 5px;
  padding-right: 5px;
}

:where(html[data-bm-shell]) .dataTable-pagination li:hover a,
:where(html[data-bm-shell]) .dataTable-pagination .active a,
:where(html[data-bm-shell]) .dataTable-pagination .active a:focus,
:where(html[data-bm-shell]) .dataTable-pagination .active a:hover{
  background: #365CF5;
  color: #fff;
  border-radius: 3px;
}

:where(html[data-bm-shell]) .dataTable-pagination .ellipsis:hover a{
  background: transparent;
  color: #f8fafc;
}

:where(html[data-bm-shell]) .dataTable-selector{
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0f172a;
  color: #94a3b8;
}

:where(html[data-bm-shell]) .dataTable-input{
  width: 100%;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 4px;
  height: 46px;
  color: #94a3b8;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .dataTable-input:focus{
  border-color: #365CF5;
  background: #0f172a;
}

:where(html[data-bm-shell]) .dataTable-table > tbody > tr > td,
:where(html[data-bm-shell]) .dataTable-table > tbody > tr > th,
:where(html[data-bm-shell]) .dataTable-table > tfoot > tr > td,
:where(html[data-bm-shell]) .dataTable-table > tfoot > tr > th,
:where(html[data-bm-shell]) .dataTable-table > thead > tr > td,
:where(html[data-bm-shell]) .dataTable-table > thead > tr > th{
  padding: 15px 10px;
  color: #94a3b8;
}

@media (max-width: 767px){
  :where(html[data-bm-shell]) .dataTable-top > div:last-child.dataTable-search{
    margin-top: 12px;
    float: left;
  }
}

@media (max-width: 767px){
  :where(html[data-bm-shell]) .dataTable-pagination ul li{
    margin: 5px 0;
  }
}
:where(html[data-bm-shell]) .activity-card .button-group{
  display: flex;
  align-items: center;
  border-radius: 50px;
  border: 1px solid #334155;
}
:where(html[data-bm-shell]) .activity-card .button-group a{
  font-weight: 500;
  font-size: 12px;
  padding: 4px 16px;
  display: inline-block;
  color: #94a3b8;
  border-radius: 50px;
  margin: 3px;
}
:where(html[data-bm-shell]) .activity-card .button-group a.active,
:where(html[data-bm-shell]) .activity-card .button-group a:hover{
  background: #365CF5;
  color: #fff;
}

:where(html[data-bm-shell]) .activity-table td{
  min-width: 90px;
  padding: 10px;
  border: none;
}
:where(html[data-bm-shell]) .activity-table td.time{
  min-width: 110px;
}
:where(html[data-bm-shell]) .activity-table .icon{
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
:where(html[data-bm-shell]) .activity-table .icon .status{
  width: 8px;
  height: 8px;
  border: 1px solid #1e293b;
  border-radius: 50%;
  position: absolute;
  top: -1px;
  right: -1px;
}
:where(html[data-bm-shell]) .activity-table .status-btn{
  font-size: 12px;
  border-radius: 50px;
  border: 1px solid #334155;
  padding: 4px 14px;
  color: #94a3b8;
  min-width: 90px;
  text-align: center;
}

:where(html[data-bm-shell]) .sell-order-table th,
:where(html[data-bm-shell]) .sell-order-table td{
  min-width: 60px;
  padding: 10px 5px;
  border: none;
}

/* =========== form elements css ========== */
/* ===== input style ===== */
:where(html[data-bm-shell]) .input-style-1{
  position: relative;
  margin-bottom: 30px;
}
:where(html[data-bm-shell]) .input-style-1 label{
  font-size: 14px;
  font-weight: 500;
  color: #f8fafc;
  display: block;
  margin-bottom: 10px;
}
:where(html[data-bm-shell]) .input-style-1 input,
:where(html[data-bm-shell]) .input-style-1 textarea{
  width: 100%;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 16px;
  color: #94a3b8;
  resize: none;
  transition: all 0.3s;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .input-style-1 input,
:where(html[data-bm-shell]) .input-style-1 textarea{
    font-size: 14px;
  }
}
:where(html[data-bm-shell]) .input-style-1 input:focus,
:where(html[data-bm-shell]) .input-style-1 textarea:focus{
  border-color: #365CF5;
  background: #0f172a;
}
:where(html[data-bm-shell]) .input-style-1 input[type=date],
:where(html[data-bm-shell]) .input-style-1 input[type=time],
:where(html[data-bm-shell]) .input-style-1 textarea[type=date],
:where(html[data-bm-shell]) .input-style-1 textarea[type=time]{
  background: transparent;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .input-style-1 input.light-bg[type=date],
:where(html[data-bm-shell]) .input-style-1 input.light-bg[type=time],
:where(html[data-bm-shell]) .input-style-1 textarea.light-bg[type=date],
:where(html[data-bm-shell]) .input-style-1 textarea.light-bg[type=time]{
  background: rgba(15, 23, 42, 0.5);
}
:where(html[data-bm-shell]) .input-style-1 input.light-bg[type=date]:focus,
:where(html[data-bm-shell]) .input-style-1 input.light-bg[type=time]:focus,
:where(html[data-bm-shell]) .input-style-1 textarea.light-bg[type=date]:focus,
:where(html[data-bm-shell]) .input-style-1 textarea.light-bg[type=time]:focus{
  background: #0f172a;
}

:where(html[data-bm-shell]) .input-style-2{
  position: relative;
  margin-bottom: 30px;
  z-index: 1;
}
:where(html[data-bm-shell]) .input-style-2 label{
  font-size: 14px;
  font-weight: 500;
  color: #f8fafc;
  display: block;
  margin-bottom: 10px;
}
:where(html[data-bm-shell]) .input-style-2 input,
:where(html[data-bm-shell]) .input-style-2 textarea{
  width: 100%;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 16px;
  color: #94a3b8;
  resize: none;
  transition: all 0.3s;
}
:where(html[data-bm-shell]) .input-style-2 input:focus,
:where(html[data-bm-shell]) .input-style-2 textarea:focus{
  border-color: #365CF5;
  background: #0f172a;
}
:where(html[data-bm-shell]) .input-style-2 input[type=date],
:where(html[data-bm-shell]) .input-style-2 input[type=time],
:where(html[data-bm-shell]) .input-style-2 textarea[type=date],
:where(html[data-bm-shell]) .input-style-2 textarea[type=time]{
  background: transparent;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .input-style-2 input[type=date]::-webkit-inner-spin-button,
:where(html[data-bm-shell]) .input-style-2 input[type=date]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: 0.6;
}
:where(html[data-bm-shell]) .input-style-2 input[type=date] ~ .icon{
  z-index: -1;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .input-style-2 .icon{
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 17px;
  color: #94a3b8;
}

:where(html[data-bm-shell]) .input-style-3{
  position: relative;
  margin-bottom: 30px;
}
:where(html[data-bm-shell]) .input-style-3 label{
  font-size: 14px;
  font-weight: 500;
  color: #f8fafc;
  display: block;
  margin-bottom: 10px;
}
:where(html[data-bm-shell]) .input-style-3 input,
:where(html[data-bm-shell]) .input-style-3 textarea{
  width: 100%;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 16px;
  padding-left: 45px;
  color: #94a3b8;
  resize: none;
  transition: all 0.3s;
}
:where(html[data-bm-shell]) .input-style-3 input:focus,
:where(html[data-bm-shell]) .input-style-3 textarea:focus{
  border-color: #365CF5;
  background: #0f172a;
}
:where(html[data-bm-shell]) .input-style-3 .icon{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding: 16px;
  color: #94a3b8;
}

/* ========= select style ========== */
:where(html[data-bm-shell]) .select-style-1{
  margin-bottom: 30px;
}
:where(html[data-bm-shell]) .select-style-1 label{
  font-size: 14px;
  font-weight: 500;
  color: #f8fafc;
  display: block;
  margin-bottom: 10px;
}
:where(html[data-bm-shell]) .select-style-1 .select-position{
  position: relative;
}
:where(html[data-bm-shell]) .select-style-1 .select-position::after{
  border-bottom: 2px solid #94a3b8;
  border-right: 2px solid #94a3b8;
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  margin-top: -5px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
:where(html[data-bm-shell]) .select-style-1 .select-position.select-sm::after{
  margin-top: -8px;
}
:where(html[data-bm-shell]) .select-style-1 .select-position.select-sm select{
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}
:where(html[data-bm-shell]) .select-style-1 .select-position select{
  width: 100%;
  background: transparent;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 16px;
  padding-right: 38px;
  color: #94a3b8;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .select-style-1 .select-position select:focus{
  border-color: #365CF5;
  outline: none;
  background: #0f172a;
}
:where(html[data-bm-shell]) .select-style-1 .select-position select.light-bg{
  background: rgba(15, 23, 42, 0.5);
}
:where(html[data-bm-shell]) .select-style-1 .select-position select.light-bg:focus{
  background: #0f172a;
}
:where(html[data-bm-shell]) .select-style-1 .select-position select.radius-30{
  border-radius: 30px;
}
:where(html[data-bm-shell]) .select-style-1 .select-position select option{
  background: #1e293b;
  color: #94a3b8;
}


:where(html[data-bm-shell]) .select-style-2{
  margin-bottom: 30px;
}
:where(html[data-bm-shell]) .select-style-2 .select-position{
  position: relative;
}
:where(html[data-bm-shell]) .select-style-2 .select-position.select-sm::after{
  margin-top: -8px;
}
:where(html[data-bm-shell]) .select-style-2 .select-position.select-sm::before{
  margin-top: 0;
}
:where(html[data-bm-shell]) .select-style-2 .select-position.select-sm select{
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}
:where(html[data-bm-shell]) .select-style-2 .select-position::before,
:where(html[data-bm-shell]) .select-style-2 .select-position::after{
  content: "";
  display: block;
  height: 8px;
  width: 8px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
:where(html[data-bm-shell]) .select-style-2 .select-position::before{
  margin-top: 0px;
  border-bottom: 1px solid #94a3b8;
  border-right: 1px solid #94a3b8;
}
:where(html[data-bm-shell]) .select-style-2 .select-position::after{
  margin-top: -8px;
  border-top: 1px solid #94a3b8;
  border-left: 1px solid #94a3b8;
}
:where(html[data-bm-shell]) .select-style-2 .select-position select{
  width: 100%;
  background: transparent;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 16px;
  padding-right: 38px;
  color: #94a3b8;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .select-style-2 .select-position select:focus{
  border-color: #365CF5;
  outline: none;
  background: #0f172a;
}
:where(html[data-bm-shell]) .select-style-2 .select-position select.light-bg{
  background: rgba(15, 23, 42, 0.5);
}
:where(html[data-bm-shell]) .select-style-2 .select-position select.light-bg:focus{
  background: #0f172a;
}
:where(html[data-bm-shell]) .select-style-2 .select-position select.select-sm{
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}
:where(html[data-bm-shell]) .select-style-2 .select-position select option{
  background: #1e293b;
  color: #94a3b8;
}


:where(html[data-bm-shell]) .select-style-3{
  margin-bottom: 30px;
}
:where(html[data-bm-shell]) .select-style-3 .select-position{
  position: relative;
}
:where(html[data-bm-shell]) .select-style-3 .select-position::after{
  border-bottom: 2px solid #94a3b8;
  border-right: 2px solid #94a3b8;
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  margin-top: -7px;
  pointer-events: none;
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
:where(html[data-bm-shell]) .select-style-3 .select-position.select-sm::after{
  margin-top: -8px;
}
:where(html[data-bm-shell]) .select-style-3 .select-position.select-sm select{
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}
:where(html[data-bm-shell]) .select-style-3 .select-position select{
  width: 100%;
  background: transparent;
  border: transparent;
  border-radius: 10px;
  padding-right: 38px;
  color: #f8fafc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .select-style-3 .select-position select:focus{
  border-color: #365CF5;
  outline: none;
}
:where(html[data-bm-shell]) .select-style-3 .select-position select.light-bg{
  background: rgba(15, 23, 42, 0.5);
}
:where(html[data-bm-shell]) .select-style-3 .select-position select option{
  background: #1e293b;
  color: #94a3b8;
}

:where(html[data-bm-shell]) .toggle-switch{
  padding-left: 60px;
  min-height: 30px;
}
:where(html[data-bm-shell]) .toggle-switch .form-check-input{
  width: 50px;
  height: 28px;
  margin-left: -60px;
  cursor: pointer;
  background-color: #0f172a;
  border-color: #334155;
}
:where(html[data-bm-shell]) .toggle-switch .form-check-input:checked{
  background-color: #365CF5;
  border-color: #365CF5;
}
:where(html[data-bm-shell]) .toggle-switch label{
  margin-top: 6px;
  font-size: 14px;
  color: #f8fafc;
  cursor: pointer;
  user-select: none;
}

:where(html[data-bm-shell]) .checkbox-style{
  padding-left: 40px;
  min-height: 22px;
}
:where(html[data-bm-shell]) .checkbox-style .form-check-input{
  width: 22px;
  height: 22px;
  border-radius: 4px;
  margin-left: -40px;
  cursor: pointer;
  margin-top: 6px;
  background-color: #0f172a;
  border-color: #334155;
}
:where(html[data-bm-shell]) .checkbox-style .form-check-input:checked{
  background-color: #365CF5;
  border-color: #365CF5;
}
:where(html[data-bm-shell]) .checkbox-style .form-check-input:disabled{
  cursor: auto;
}
:where(html[data-bm-shell]) .checkbox-style .form-check-input:disabled ~ label{
  cursor: auto;
}
:where(html[data-bm-shell]) .checkbox-style label{
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .checkbox-style.checkbox-success .form-check-input:checked{
  background-color: #219653;
  border-color: #219653;
}
:where(html[data-bm-shell]) .checkbox-style.checkbox-warning .form-check-input:checked{
  background-color: #f7c800;
  border-color: #f7c800;
}
:where(html[data-bm-shell]) .checkbox-style.checkbox-danger .form-check-input:checked{
  background-color: #d50100;
  border-color: #d50100;
}

:where(html[data-bm-shell]) .radio-style{
  padding-left: 40px;
  min-height: 22px;
}
:where(html[data-bm-shell]) .radio-style .form-check-input{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-left: -40px;
  cursor: pointer;
  margin-top: 7px;
  background-color: #0f172a;
  border-color: #334155;
}
:where(html[data-bm-shell]) .radio-style .form-check-input:disabled{
  cursor: auto;
}
:where(html[data-bm-shell]) .radio-style .form-check-input:disabled ~ label{
  cursor: auto;
}
:where(html[data-bm-shell]) .radio-style label{
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .radio-style.radio-success .form-check-input:checked{
  background-color: #219653;
  border-color: #219653;
}
:where(html[data-bm-shell]) .radio-style.radio-warning .form-check-input:checked{
  background-color: #f7c800;
  border-color: #f7c800;
}
:where(html[data-bm-shell]) .radio-style.radio-danger .form-check-input:checked{
  background-color: #d50100;
  border-color: #d50100;
}

@media (max-width: 767px){
  :where(html[data-bm-shell]) .button-group .main-btn{
    width: 100%;
  }
}

:where(html[data-bm-shell]) .buy-sell-form .input-group{
  display: flex;
}
:where(html[data-bm-shell]) .buy-sell-form .input-group input{
  width: 60%;
  background: transparent;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .buy-sell-form .input-group input:focus{
  border-color: #365CF5;
}
:where(html[data-bm-shell]) .buy-sell-form .input-group .select-style-1{
  width: 40%;
}
:where(html[data-bm-shell]) .buy-sell-form .input-group .select-style-1 .select-position::after{
  width: 8px;
  height: 8px;
}
:where(html[data-bm-shell]) .buy-sell-form .input-group select{
  border: 1px solid #334155;
  border-radius: 0px 4px 4px 0px;
  padding: 8px 16px;
  padding-right: 24px;
  font-size: 14px;
  color: #94a3b8;
  background: #1e293b;
}
:where(html[data-bm-shell]) .buy-sell-form .buy-sell-btn .main-btn{
  display: block;
  width: 100%;
  font-weight: 500;
}
:where(html[data-bm-shell]) .buy-sell-form .buy-sell-btn .main-btn:hover{
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
}
:where(html[data-bm-shell]) .buy-sell-form .buy-sell-btn .main-btn.success-btn{
  background: #08c18d;
}
:where(html[data-bm-shell]) .buy-sell-form .buy-sell-btn .main-btn.danger-btn{
  background: #eb5757;
}
:where(html[data-bm-shell]) .buy-sell-form .field-group-2 label{
  font-size: 12px;
}
:where(html[data-bm-shell]) .buy-sell-form .field-group-2 .input-group input{
  font-size: 12px;
  width: 70%;
}
:where(html[data-bm-shell]) .buy-sell-form .field-group-2 .input-group span{
  font-size: 12px;
  padding: 8px 16px;
  width: 30%;
  background: #334155;
  text-align: center;
  border-radius: 0px 4px 4px 0px;
  border: 1px solid #334155;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .buy-sell-form .input-group-2 label{
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 8px;
  display: block;
}
:where(html[data-bm-shell]) .buy-sell-form .input-group-2 .select-position::after{
  width: 8px;
  height: 8px;
}
:where(html[data-bm-shell]) .buy-sell-form .input-group-2 select{
  padding: 8px 12px;
  font-size: 12px;
  color: #94a3b8;
  border: 1px solid #334155;
  border-radius: 4px;
  width: 100%;
  background: #1e293b;
}

/* ============= notification css ============= */
:where(html[data-bm-shell]) .single-notification{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #334155;
}
:where(html[data-bm-shell]) .single-notification.readed{
  opacity: 0.7;
}
:where(html[data-bm-shell]) .single-notification:first-child{
  padding-top: 0px;
}
:where(html[data-bm-shell]) .single-notification:last-child{
  padding-bottom: 0px;
  border-bottom: 0px;
}
:where(html[data-bm-shell]) .single-notification .checkbox{
  max-width: 50px;
  width: 100%;
  padding-top: 10px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .single-notification .checkbox{
    display: none;
  }
}
:where(html[data-bm-shell]) .single-notification .checkbox input{
  background-color: #0f172a;
  border-color: #334155;
}
:where(html[data-bm-shell]) .single-notification .checkbox input:checked{
  background-color: #365CF5;
  border-color: #365CF5;
}
:where(html[data-bm-shell]) .single-notification .notification{
  display: flex;
  width: 100%;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .single-notification .notification{
    flex-direction: column;
  }
}
:where(html[data-bm-shell]) .single-notification .notification .image{
  max-width: 50px;
  width: 100%;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  margin-right: 15px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .single-notification .notification .image{
    margin-bottom: 15px;
  }
}
:where(html[data-bm-shell]) .single-notification .notification .image img{
  width: 100%;
}
:where(html[data-bm-shell]) .single-notification .notification .content{
  display: block;
  max-width: 800px;
}
:where(html[data-bm-shell]) .single-notification .notification .content h6{
  margin-bottom: 15px;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .single-notification .notification .content p{
  margin-bottom: 10px;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .single-notification .action{
  display: inline-flex;
  justify-content: flex-end;
  padding-top: 10px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .single-notification .action{
    display: none;
  }
}
:where(html[data-bm-shell]) .single-notification .action button{
  border: none;
  background: transparent;
  color: #94a3b8;
  margin-left: 20px;
  font-size: 18px;
}
:where(html[data-bm-shell]) .single-notification .action button.delete-btn:hover{
  color: #d50100;
}
:where(html[data-bm-shell]) .single-notification .action .dropdown-toggle::after{
  display: none;
}

/* ========== Theme Change Css ============== */
:where(html[data-bm-shell]) .darkTheme .single-notification{
  border-color: #334155;
}

/* ========== header css ========== */
:where(html[data-bm-shell]) .header{
  padding: 22px 0;
  background: #1e293b; /* Header Background */
  position: sticky;
  top: 0;
  z-index: 99;
  border-bottom: 1px solid #334155;
}
:where(html[data-bm-shell]) .header .header-left .menu-toggle-btn .main-btn{
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(html[data-bm-shell]) .header .header-left .header-search form{
  max-width: 270px;
  position: relative;
}
:where(html[data-bm-shell]) .header .header-left .header-search form input{
  width: 100%;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  padding: 10px 10px 10px 44px;
  color: #94a3b8;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .header .header-left .header-search form input:focus{
  border-color: #365CF5;
  background: #0f172a;
}
:where(html[data-bm-shell]) .header .header-left .header-search form button{
  position: absolute;
  border: none;
  background: transparent;
  left: 16px;
  top: 0;
  height: 46px;
  color: #94a3b8;
  font-weight: 700;
}
:where(html[data-bm-shell]) .header .header-left .header-search form button i{
  margin-top: 7px;
}
:where(html[data-bm-shell]) .header .header-right{
  display: flex;
  justify-content: flex-end;
}
:where(html[data-bm-shell]) .header .header-right button{
  border: 1px solid #334155;
  background: #0f172a;
  border-radius: 50%;
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .header .header-right button svg{
  fill: currentColor;
}
:where(html[data-bm-shell]) .header .header-right button::after{
  display: none;
}
:where(html[data-bm-shell]) .header .header-right button span{
  position: absolute;
  width: 12px;
  height: 12px;
  background: #FF737E;
  border: 2px solid #1e293b;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu{
  width: 350px;
  border: 1px solid #334155;
  background: #1e293b;
  padding: 10px 10px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  top: 21px !important;
  right: 0;
  position: absolute;
  transform: translate3d(0px, 60px, 0px);
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li{
  padding: 3px 0px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border-bottom: 1px solid #334155;
  position: relative;
  z-index: 2;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li:hover a{
  color: #365CF5;
  background: #0f172a;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li:last-child{
  border-bottom: none;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li a{
  padding: 8px 12px;
  display: flex;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li a .image{
  max-width: 35px;
  width: 100%;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li a .image img{
  width: 100%;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li a .content{
  width: 100%;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li a .content h6{
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 600;
  line-height: 1;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li a .content p{
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0px;
  line-height: 1.4;
}
:where(html[data-bm-shell]) .header .header-right .dropdown-menu li a .content span{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
:where(html[data-bm-shell]) .header .header-right .dropdown-box{
  position: relative;
}
:where(html[data-bm-shell]) .header .header-right .notification-box,
:where(html[data-bm-shell]) .header .header-right .header-message-box{
  position: relative;
}
:where(html[data-bm-shell]) .header .header-right .notification-box .dropdown-menu.dropdown-menu-end{
  transform: translate3d(0px, 60px, 0px);
}
:where(html[data-bm-shell]) .header .header-right .header-message-box .dropdown-menu.dropdown-menu-end{
  transform: translate3d(0px, 60px, 0px);
}
:where(html[data-bm-shell]) .header .header-right .profile-box{
  display: flex;
  position: relative;
}
:where(html[data-bm-shell]) .header .header-right .profile-box button{
  width: auto;
  border: none;
  background: transparent;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu{
  width: 10rem;
  min-width: 190px;
  border: 1px solid #334155;
  background: #1e293b;
  border-radius: 4px;
  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 0 16px rgba(0, 0, 0, 0.3);
  padding: 8px;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu.dropdown-menu-end{
  transform: translate3d(0px, 60px, 0px);
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu li{
  border-bottom: none;
  padding: 0;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu li a{
  font-size: 14px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  padding: 10px 8px;
  color: rgba(255, 255, 255, 0.7);
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu li a i{
  margin-right: 8px;
  font-weight: 700;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu li a:hover{
  color: #fff;
  background: #0f172a;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu li.divider{
  margin: 4px 0;
  height: 1px;
  display: block;
  background: rgba(255, 255, 255, 0.1);
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu .author-info{
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu .author-info .image{
  flex: none;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu .author-info .image img{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu .author-info .content{
  padding-left: 8px;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu .author-info .content h4{
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: #f8fafc;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu .author-info .content a{
  font-size: 12px;
  line-height: 1rem;
  color: rgba(255, 255, 255, 0.4);
  padding: 0;
  display: inline;
  background-color: initial;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu .author-info .content a:hover{
  background: initial;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu .author-info:hover{
  background: #0f172a;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .dropdown-menu .author-info:hover a{
  color: #fff;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .profile-info{
  margin: 0 5px;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .profile-info .info{
  display: flex;
  align-items: center;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .profile-info .info .image{
  border: 1px solid #334155;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-right: 14px;
  position: relative;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .profile-info .info .image img{
  width: 100%;
  border-radius: 50%;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .profile-info .info p{
  font-size: 12px;
  text-align: left;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .header .header-right .profile-box .profile-info .info h6{
  color: #f8fafc;
}

/* ========== Dashboards css ================= */
@media (max-width: 767px){
  :where(html[data-bm-shell]) #doughnutChart1{
    height: 250px !important;
  }
}

:where(html[data-bm-shell]) .legend3 li{
  margin-right: 25px;
}
:where(html[data-bm-shell]) .legend3 li div{
  white-space: nowrap;
}
:where(html[data-bm-shell]) .legend3 li .bg-color{
  position: relative;
  margin-left: 12px;
  border-radius: 50%;
}
:where(html[data-bm-shell]) .legend3 li .bg-color::after{
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: inherit;
  left: -12px;
  top: 5px;
}
:where(html[data-bm-shell]) .legend3 li .text{
  margin-left: 10px;
}
:where(html[data-bm-shell]) .legend3 li .text p{
  display: flex;
  align-items: center;
  width: 100%;
  color: #94a3b8;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .legend3 h2{
    font-size: 22px;
    color: #f8fafc;
  }
}

:where(html[data-bm-shell]) .legend-marketing .icon{
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: rgba(236, 242, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}
:where(html[data-bm-shell]) .legend-marketing .bg-color{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 8px;
}
:where(html[data-bm-shell]) .legend-marketing .text h5{
  font-size: 18px;
  margin-top: 5px;
  color: #f8fafc;
}

:where(html[data-bm-shell]) .todo-list-wrapper ul li.todo-list-item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  margin-bottom: 25px;
}
:where(html[data-bm-shell]) .todo-list-wrapper ul li.todo-list-item:last-child{
  margin-bottom: 0px;
}
:where(html[data-bm-shell]) .todo-list-wrapper ul li.todo-list-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .todo-list-wrapper ul li.todo-list-item{
    display: block;
  }
  :where(html[data-bm-shell]) .todo-list-wrapper ul li.todo-list-item .todo-status{
    margin-top: 20px;
  }
}
:where(html[data-bm-shell]) .todo-list-wrapper ul li.todo-list-item.success::before{
  background: #219653;
}
:where(html[data-bm-shell]) .todo-list-wrapper ul li.todo-list-item.primary::before{
  background: #365CF5;
}
:where(html[data-bm-shell]) .todo-list-wrapper ul li.todo-list-item.orange::before{
  background: #f2994a;
}
:where(html[data-bm-shell]) .todo-list-wrapper ul li.todo-list-item.danger::before{
  background: #d50100;
}

:where(html[data-bm-shell]) .cards-title{
  font-size: 18px;
  line-height: 22px;
  color: #f8fafc;
}

:where(html[data-bm-shell]) .external-link{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
:where(html[data-bm-shell]) .external-link .link-item{
  padding: 10px 15px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:where(html[data-bm-shell]) .external-link .link-item:hover{
  background: rgba(223, 229, 239, 0.1);
}
:where(html[data-bm-shell]) .external-link .link-name{
  display: flex;
  align-items: center;
  gap: 18px;
  color: #f8fafc;
}

:where(html[data-bm-shell]) .card-top-chanels .top-chanels-item{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 11px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px){
  :where(html[data-bm-shell]) .card-top-chanels .top-chanels-item{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

:where(html[data-bm-shell]) .featured-tab .nav{
  gap: 12px;
}
:where(html[data-bm-shell]) .featured-tab .nav button{
  background: transparent;
  border: none;
  font-weight: 500;
  font-size: 14px;
  color: #64748B;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
:where(html[data-bm-shell]) .featured-tab .nav button:hover,
:where(html[data-bm-shell]) .featured-tab .nav button.active{
  color: #f8fafc;
  background: rgba(223, 229, 239, 0.1);
}
:where(html[data-bm-shell]) .featured-tab .status-badge{
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 30px;
}
:where(html[data-bm-shell]) .featured-tab .status-badge.queue{
  background: rgba(240, 149, 12, 0.08);
  color: #F0950C;
}
:where(html[data-bm-shell]) .featured-tab .status-badge.sent{
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
}
:where(html[data-bm-shell]) .featured-tab .tab-item-title:hover{
  color: #365CF5;
  cursor: pointer;
}

:where(html[data-bm-shell]) .card-click-rate .device-list{
  display: flex;
  align-items: center;
  gap: 10px;
}
:where(html[data-bm-shell]) .card-click-rate .device-list li{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .card-click-rate .device-list li span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
:where(html[data-bm-shell]) .card-click-rate .device-list li:nth-child(1n) span{
  background: #365CF5;
}
:where(html[data-bm-shell]) .card-click-rate .device-list li:nth-child(2n) span{
  background: #94a3b8;
}
:where(html[data-bm-shell]) .card-click-rate .device-list li:nth-child(3n) span{
  background: #334155;
}
:where(html[data-bm-shell]) .card-click-rate .apexcharts-tooltip-series-group{
  padding-top: 4px;
}
:where(html[data-bm-shell]) .card-click-rate .apexcharts-tooltip-z-group,
:where(html[data-bm-shell]) .card-click-rate .apexcharts-tooltip-goals-group{
  display: none;
}
/* Force ApexCharts to dark mode text colors */
:where(html[data-bm-shell]) .apexcharts-tooltip{
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
:where(html[data-bm-shell]) .apexcharts-tooltip-title{
  background: #0f172a !important;
  border-bottom: 1px solid #334155 !important;
}
:where(html[data-bm-shell]) .apexcharts-text{
  fill: #94a3b8 !important;
}
:where(html[data-bm-shell]) .apexcharts-gridline{
  stroke: #334155 !important;
}

/* ============ signin css ============= */
:where(html[data-bm-shell]) .auth-row{
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
}

:where(html[data-bm-shell]) .auth-cover-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px;
  position: relative;
  z-index: 1;
  height: 100%;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .auth-cover-wrapper{
    padding: 30px 20px;
  }
}
:where(html[data-bm-shell]) .auth-cover-wrapper .auth-cover .title{
  text-align: cover;
  margin-bottom: 40px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .auth-cover-wrapper .auth-cover .title h1{
    font-size: 24px;
    color: #f8fafc;
  }
}
:where(html[data-bm-shell]) .auth-cover-wrapper .auth-cover .cover-image{
  max-width: 100%;
  margin: auto;
}
:where(html[data-bm-shell]) .auth-cover-wrapper .auth-cover .cover-image img{
  width: 100%;
}
:where(html[data-bm-shell]) .auth-cover-wrapper .auth-cover .shape-image{
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 5%;
}

:where(html[data-bm-shell]) .signin-wrapper{
  background: #1e293b;
  padding: 60px;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
  :where(html[data-bm-shell]) .signin-wrapper{
    padding: 40px;
  }
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .signin-wrapper{
    padding: 30px;
  }
}
:where(html[data-bm-shell]) .signin-wrapper .form-wrapper{
  width: 100%;
}
:where(html[data-bm-shell]) .signin-wrapper .singin-option button{
  font-size: 16px;
  font-weight: 600;
  color: #f8fafc;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px){
  :where(html[data-bm-shell]) .signin-wrapper .singin-option button{
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
  :where(html[data-bm-shell]) .signin-wrapper .singin-option button{
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .signin-wrapper .singin-option button{
    width: 100%;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px){
  :where(html[data-bm-shell]) .signin-wrapper .singin-option button{
    width: auto;
  }
}
:where(html[data-bm-shell]) .signin-wrapper .singin-option a:hover{
  text-decoration: underline;
}

/* ============ signup css ============= */
:where(html[data-bm-shell]) .signup-wrapper{
  background: #1e293b;
  padding: 60px;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
  :where(html[data-bm-shell]) .signup-wrapper{
    padding: 40px;
  }
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .signup-wrapper{
    padding: 30px;
  }
}
:where(html[data-bm-shell]) .signup-wrapper .form-wrapper{
  width: 100%;
}
:where(html[data-bm-shell]) .signup-wrapper .singup-option button{
  font-size: 16px;
  font-weight: 600;
  color: #f8fafc;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px){
  :where(html[data-bm-shell]) .signup-wrapper .singup-option button{
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
  :where(html[data-bm-shell]) .signup-wrapper .singup-option button{
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .signup-wrapper .singup-option button{
    width: 100%;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px){
  :where(html[data-bm-shell]) .signup-wrapper .singup-option button{
    width: auto;
  }
}
:where(html[data-bm-shell]) .signup-wrapper .singup-option a:hover{
  text-decoration: underline;
}

/* =========== settings css ============== */
:where(html[data-bm-shell]) .settings-card-1 .profile-info .profile-image{
  max-width: 75px;
  width: 100%;
  height: 75px;
  border-radius: 50%;
  margin-right: 20px;
  position: relative;
  z-index: 1;
}
:where(html[data-bm-shell]) .settings-card-1 .profile-info .profile-image img{
  width: 100%;
  border-radius: 50%;
}
:where(html[data-bm-shell]) .settings-card-1 .profile-info .profile-image .update-image{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: #334155;
  border: 2px solid #1e293b;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99;
  color: #fff;
}
:where(html[data-bm-shell]) .settings-card-1 .profile-info .profile-image .update-image:hover{
  opacity: 0.9;
  background: #365CF5;
}
:where(html[data-bm-shell]) .settings-card-1 .profile-info .profile-image .update-image input{
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 99;
}
:where(html[data-bm-shell]) .settings-card-1 .profile-info .profile-image .update-image label{
  cursor: pointer;
  z-index: 99;
}

/* =========== Invoice Css ============= */
:where(html[data-bm-shell]) .invoice-card .invoice-header{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex: 1;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .invoice-card .invoice-header{
    flex-direction: column;
  }
}
:where(html[data-bm-shell]) .invoice-card .invoice-header .invoice-logo{
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .invoice-card .invoice-header .invoice-logo{
    order: -1;
    margin-bottom: 30px;
  }
}
:where(html[data-bm-shell]) .invoice-card .invoice-header .invoice-logo img{
  width: 100%;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .invoice-card .invoice-header .invoice-date{
    margin-top: 30px;
  }
}
:where(html[data-bm-shell]) .invoice-card .invoice-header .invoice-date p{
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .invoice-card .invoice-header .invoice-date p span{
  font-weight: 500;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .invoice-card .invoice-address{
  padding-top: 30px;
  display: flex;
  margin-bottom: 40px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .invoice-card .invoice-address{
    display: block;
  }
}
:where(html[data-bm-shell]) .invoice-card .invoice-address .address-item{
  margin-right: 30px;
  min-width: 250px;
}
:where(html[data-bm-shell]) .invoice-card .invoice-address .address-item h5{
  margin-bottom: 15px;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .invoice-card .invoice-address .address-item h1{
  margin-bottom: 10px;
  font-size: 24px;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .invoice-card .invoice-address .address-item p{
  margin-bottom: 10px;
  color: #94a3b8;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .invoice-card .invoice-action ul li{
    flex: 1;
  }
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .invoice-card .invoice-action ul li a{
    width: 100%;
  }
}

:where(html[data-bm-shell]) .invoice-table th,
:where(html[data-bm-shell]) .invoice-table td{
  padding: 10px 8px;
}
:where(html[data-bm-shell]) .invoice-table .service{
  min-width: 150px;
}
:where(html[data-bm-shell]) .invoice-table .desc{
  min-width: 150px;
}
:where(html[data-bm-shell]) .invoice-table .qty{
  min-width: 150px;
}
:where(html[data-bm-shell]) .invoice-table .amount{
  min-width: 100px;
}

/* ============== Icons Css ===========*/
:where(html[data-bm-shell]) .icons-wrapper .icons,
:where(html[data-bm-shell]) .icons-wrapper ul{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
:where(html[data-bm-shell]) .icons-wrapper .icons > div,
:where(html[data-bm-shell]) .icons-wrapper .icons li,
:where(html[data-bm-shell]) .icons-wrapper ul > div,
:where(html[data-bm-shell]) .icons-wrapper ul li{
  display: flex;
  align-items: center;
  margin: 10px;
  flex-basis: 215px;
}
@media (max-width: 400px){
  :where(html[data-bm-shell]) .icons-wrapper .icons > div,
:where(html[data-bm-shell]) .icons-wrapper .icons li,
:where(html[data-bm-shell]) .icons-wrapper ul > div,
:where(html[data-bm-shell]) .icons-wrapper ul li{
    flex-basis: 100%;
  }
}
:where(html[data-bm-shell]) .icons-wrapper .icons > div i,
:where(html[data-bm-shell]) .icons-wrapper .icons li i,
:where(html[data-bm-shell]) .icons-wrapper ul > div i,
:where(html[data-bm-shell]) .icons-wrapper ul li i{
  max-width: 45px;
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #334155;
  border-radius: 4px;
  background: transparent;
  color: #f8fafc;
  font-size: 20px;
  margin-right: 10px;
}
:where(html[data-bm-shell]) .icons-wrapper .icons > div span,
:where(html[data-bm-shell]) .icons-wrapper .icons li span,
:where(html[data-bm-shell]) .icons-wrapper ul > div span,
:where(html[data-bm-shell]) .icons-wrapper ul li span{
  color: #f8fafc;
  user-select: all;
}

/* ============ Calendar Css ============= */
:where(html[data-bm-shell]) .calendar-card .fc{
  height: 450px;
}
:where(html[data-bm-shell]) .calendar-card .fc#calendar-full{
  height: 600px;
}
:where(html[data-bm-shell]) .calendar-card .fc table{
  border: none;
}
:where(html[data-bm-shell]) .calendar-card .fc .fc-toolbar-title{
  font-size: 16px;
  font-weight: 500;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .calendar-card .fc .fc-button{
  background: transparent;
  border: none;
  color: #94a3b8;
  text-transform: capitalize;
}
:where(html[data-bm-shell]) .calendar-card .fc .fc-button:focus{
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #365CF5;
}
:where(html[data-bm-shell]) .calendar-card .fc th{
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-right: 0px;
}
:where(html[data-bm-shell]) .calendar-card .fc th a{
  color: #94a3b8;
  font-weight: 400;
}
:where(html[data-bm-shell]) .calendar-card .fc .fc-day{
  border-width: 4px;
  background: #1e293b;
  border-color: #1e293b;
}
:where(html[data-bm-shell]) .calendar-card .fc .fc-day.fc-day-today .fc-daygrid-day-frame{
  background: #365cf5;
}
:where(html[data-bm-shell]) .calendar-card .fc .fc-day.fc-day-today .fc-daygrid-day-frame a{
  color: #fff;
}
:where(html[data-bm-shell]) .calendar-card .fc .fc-day .fc-daygrid-day-frame{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: #0f172a;
  border-radius: 6px;
}
:where(html[data-bm-shell]) .calendar-card .fc .fc-day .fc-daygrid-day-frame a{
  color: #94a3b8;
}
:where(html[data-bm-shell]) .calendar-card .fc-theme-standard td,
:where(html[data-bm-shell]) .calendar-card .fc-theme-standard th{
  border-color: transparent;
}

/* =========== Sidebar css =========== */
:where(html[data-bm-shell]) .sidebar-nav-wrapper{
  background: #1e293b;
  width: 250px;
  padding: 20px 0px;
  height: 100vh;
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  top: 0;
  left: 0;
  z-index: 999;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
  border-right: 1px solid #334155;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px){
  :where(html[data-bm-shell]) .sidebar-nav-wrapper{
    -webkit-transform: translateX(-260px);
    -moz-transform: translateX(-260px);
    -ms-transform: translateX(-260px);
    -o-transform: translateX(-260px);
    transform: translateX(-260px);
  }
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper.active{
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px){
  :where(html[data-bm-shell]) .sidebar-nav-wrapper.active{
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .navbar-logo{
  padding: 0 25px;
  margin-bottom: 30px;
  margin-top: 11px;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav .divider{
  padding: 5px 25px;
  width: 100%;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav .divider hr{
  height: 1px;
  background: #334155;
  border-color: #334155;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul.collapsing{
  transition: none;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item{
  position: relative;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a{
  color: #f8fafc;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a:not(.collapsed) .icon{
  color: #365CF5;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a::after{
  content: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.34306 7.76387L9.02356 3.8071C9.32923 3.47851 9.11273 2.91666 8.68048 2.91666L1.31947 2.91666C0.887218 2.91666 0.670743 3.47851 0.976393 3.8071L4.6569 7.76387C4.8464 7.96758 5.15356 7.96758 5.34306 7.76387Z' fill='%239AA4CA'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: 25px;
  top: 11px;
  font-size: 12px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  filter: invert(1); /* Invert arrow for dark mode visibility if needed */
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a.collapsed{
  color: #94a3b8;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a.collapsed::before{
  opacity: 0;
  visibility: hidden;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a.collapsed::after{
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul{
  padding: 10px 24px 40px 57px;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li{
  margin-bottom: 12px;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li:last-child{
  margin-bottom: 0px;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a{
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  display: flex;
  align-items: center;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active,
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover{
  color: #f8fafc;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a i{
  font-size: 16px;
  margin-right: 15px;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a span.text{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a span.pro-badge{
  background: #365CF5;
  color: #fff;
  padding: 2.5px 7px;
  border-radius: 30px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  margin-left: 10px;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item a{
  display: flex;
  align-items: center;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 7px 25px;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.text{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.pro-badge{
  background: #365CF5;
  color: #fff;
  padding: 2.5px 7px;
  border-radius: 30px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  margin-left: 10px;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon{
  margin-right: 12px;
  margin-top: -4px;
  font-size: 18px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon svg{
  fill: currentColor;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a,
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a.collapsed,
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a,
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a.collapsed{
  color: #f8fafc;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a .icon,
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a.collapsed .icon,
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a .icon,
:where(html[data-bm-shell]) .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a.collapsed .icon{
  color: #365CF5;
}

:where(html[data-bm-shell]) .sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active,
:where(html[data-bm-shell]) .sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover{
  color: #fff;
  border-color: #365CF5;
  background: #365CF5;
}
:where(html[data-bm-shell]) .sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active span.pro-badge,
:where(html[data-bm-shell]) .sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover span.pro-badge{
  background: #fff;
  color: #365CF5;
}

:where(html[data-bm-shell]) .overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 1400px), only screen and (min-width: 1200px) and (max-width: 1399px){
  :where(html[data-bm-shell]) .overlay{
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px){
  :where(html[data-bm-shell]) .overlay.active{
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

:where(html[data-bm-shell]) .main-wrapper{
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  margin-left: 250px;
  min-height: 100vh;
  padding-bottom: 85px;
  position: relative;
  background-color: #0f172a;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px){
  :where(html[data-bm-shell]) .main-wrapper{
    margin-left: 0;
  }
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .main-wrapper{
    padding-bottom: 110px;
  }
}
:where(html[data-bm-shell]) .main-wrapper.active{
  margin-left: 0;
}
:where(html[data-bm-shell]) .main-wrapper .container-fluid{
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .main-wrapper .container-fluid{
    padding-left: 20px;
    padding-right: 20px;
  }
}
:where(html[data-bm-shell]) .main-wrapper .footer{
  padding: 25px 0;
  justify-items: flex-end;
  position: absolute;
  bottom: 0;
  width: 100%;
}
:where(html[data-bm-shell]) .main-wrapper .footer .copyright p a{
  color: inherit;
}
:where(html[data-bm-shell]) .main-wrapper .footer .copyright p a:hover{
  color: #365CF5;
}
@media (max-width: 767px){
  :where(html[data-bm-shell]) .main-wrapper .footer .terms{
    margin-bottom: 10px;
    text-align: center;
  }
}
:where(html[data-bm-shell]) .main-wrapper .footer .terms a{
  color: #94a3b8;
}
:where(html[data-bm-shell]) .main-wrapper .footer .terms a:hover{
  color: #365CF5;
}

:where(html[data-bm-shell]) .promo-box{
  background: #0f172a;
  padding: 15px 18px;
  text-align: center;
  max-width: 210px;
  margin: 0 auto;
  margin-top: 200px;
  border-radius: 14px;
  border: 1px solid #334155;
}
:where(html[data-bm-shell]) .promo-box .promo-icon{
  max-width: 82px;
  width: 100%;
  height: 82px;
  border-radius: 50%;
  margin: -58px auto 12px;
  border: 5px solid #1e293b;
}
:where(html[data-bm-shell]) .promo-box h3{
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  margin-bottom: 7px;
  color: #f8fafc;
}
:where(html[data-bm-shell]) .promo-box p{
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #94a3b8;
}
:where(html[data-bm-shell]) .promo-box .main-btn{
  border-radius: 43px;
  padding: 7px 12px;
  width: 100%;
  justify-content: center;
}

/* ========== DEFAULT CSS ======== */
/* ======= Margin Top ======= */
:where(html[data-bm-shell]) .mt-5{
  margin-top: 5px;
}

:where(html[data-bm-shell]) .mt-10{
  margin-top: 10px;
}

:where(html[data-bm-shell]) .mt-15{
  margin-top: 15px;
}

:where(html[data-bm-shell]) .mt-20{
  margin-top: 20px;
}

:where(html[data-bm-shell]) .mt-25{
  margin-top: 25px;
}

:where(html[data-bm-shell]) .mt-30{
  margin-top: 30px;
}

:where(html[data-bm-shell]) .mt-35{
  margin-top: 35px;
}

:where(html[data-bm-shell]) .mt-40{
  margin-top: 40px;
}

:where(html[data-bm-shell]) .mt-45{
  margin-top: 45px;
}

:where(html[data-bm-shell]) .mt-50{
  margin-top: 50px;
}

:where(html[data-bm-shell]) .mt-55{
  margin-top: 55px;
}

:where(html[data-bm-shell]) .mt-60{
  margin-top: 60px;
}

:where(html[data-bm-shell]) .mt-65{
  margin-top: 65px;
}

:where(html[data-bm-shell]) .mt-70{
  margin-top: 70px;
}

:where(html[data-bm-shell]) .mt-75{
  margin-top: 75px;
}

:where(html[data-bm-shell]) .mt-80{
  margin-top: 80px;
}

:where(html[data-bm-shell]) .mt-85{
  margin-top: 85px;
}

:where(html[data-bm-shell]) .mt-90{
  margin-top: 90px;
}

:where(html[data-bm-shell]) .mt-95{
  margin-top: 95px;
}

:where(html[data-bm-shell]) .mt-100{
  margin-top: 100px;
}

:where(html[data-bm-shell]) .mt-105{
  margin-top: 105px;
}

:where(html[data-bm-shell]) .mt-110{
  margin-top: 110px;
}

:where(html[data-bm-shell]) .mt-115{
  margin-top: 115px;
}

:where(html[data-bm-shell]) .mt-120{
  margin-top: 120px;
}

:where(html[data-bm-shell]) .mt-125{
  margin-top: 125px;
}

:where(html[data-bm-shell]) .mt-130{
  margin-top: 130px;
}

:where(html[data-bm-shell]) .mt-135{
  margin-top: 135px;
}

:where(html[data-bm-shell]) .mt-140{
  margin-top: 140px;
}

:where(html[data-bm-shell]) .mt-145{
  margin-top: 145px;
}

:where(html[data-bm-shell]) .mt-150{
  margin-top: 150px;
}

:where(html[data-bm-shell]) .mt-155{
  margin-top: 155px;
}

:where(html[data-bm-shell]) .mt-160{
  margin-top: 160px;
}

:where(html[data-bm-shell]) .mt-165{
  margin-top: 165px;
}

:where(html[data-bm-shell]) .mt-170{
  margin-top: 170px;
}

:where(html[data-bm-shell]) .mt-175{
  margin-top: 175px;
}

:where(html[data-bm-shell]) .mt-180{
  margin-top: 180px;
}

:where(html[data-bm-shell]) .mt-185{
  margin-top: 185px;
}

:where(html[data-bm-shell]) .mt-190{
  margin-top: 190px;
}

:where(html[data-bm-shell]) .mt-195{
  margin-top: 195px;
}

:where(html[data-bm-shell]) .mt-200{
  margin-top: 200px;
}

:where(html[data-bm-shell]) .mt-205{
  margin-top: 205px;
}

:where(html[data-bm-shell]) .mt-210{
  margin-top: 210px;
}

:where(html[data-bm-shell]) .mt-215{
  margin-top: 215px;
}

:where(html[data-bm-shell]) .mt-220{
  margin-top: 220px;
}

:where(html[data-bm-shell]) .mt-225{
  margin-top: 225px;
}

/* ======= Margin Bottom ======= */
:where(html[data-bm-shell]) .mb-5{
  margin-bottom: 5px;
}

:where(html[data-bm-shell]) .mb-10{
  margin-bottom: 10px;
}

:where(html[data-bm-shell]) .mb-15{
  margin-bottom: 15px;
}

:where(html[data-bm-shell]) .mb-20{
  margin-bottom: 20px;
}

:where(html[data-bm-shell]) .mb-25{
  margin-bottom: 25px;
}

:where(html[data-bm-shell]) .mb-30{
  margin-bottom: 30px;
}

:where(html[data-bm-shell]) .mb-35{
  margin-bottom: 35px;
}

:where(html[data-bm-shell]) .mb-40{
  margin-bottom: 40px;
}

:where(html[data-bm-shell]) .mb-45{
  margin-bottom: 45px;
}

:where(html[data-bm-shell]) .mb-50{
  margin-bottom: 50px;
}

:where(html[data-bm-shell]) .mb-55{
  margin-bottom: 55px;
}

:where(html[data-bm-shell]) .mb-60{
  margin-bottom: 60px;
}

:where(html[data-bm-shell]) .mb-65{
  margin-bottom: 65px;
}

:where(html[data-bm-shell]) .mb-70{
  margin-bottom: 70px;
}

:where(html[data-bm-shell]) .mb-75{
  margin-bottom: 75px;
}

:where(html[data-bm-shell]) .mb-80{
  margin-bottom: 80px;
}

:where(html[data-bm-shell]) .mb-85{
  margin-bottom: 85px;
}

:where(html[data-bm-shell]) .mb-90{
  margin-bottom: 90px;
}

:where(html[data-bm-shell]) .mb-95{
  margin-bottom: 95px;
}

:where(html[data-bm-shell]) .mb-100{
  margin-bottom: 100px;
}

:where(html[data-bm-shell]) .mb-105{
  margin-bottom: 105px;
}

:where(html[data-bm-shell]) .mb-110{
  margin-bottom: 110px;
}

:where(html[data-bm-shell]) .mb-115{
  margin-bottom: 115px;
}

:where(html[data-bm-shell]) .mb-120{
  margin-bottom: 120px;
}

:where(html[data-bm-shell]) .mb-125{
  margin-bottom: 125px;
}

:where(html[data-bm-shell]) .mb-130{
  margin-bottom: 130px;
}

:where(html[data-bm-shell]) .mb-135{
  margin-bottom: 135px;
}

:where(html[data-bm-shell]) .mb-140{
  margin-bottom: 140px;
}

:where(html[data-bm-shell]) .mb-145{
  margin-bottom: 145px;
}

:where(html[data-bm-shell]) .mb-150{
  margin-bottom: 150px;
}

:where(html[data-bm-shell]) .mb-155{
  margin-bottom: 155px;
}

:where(html[data-bm-shell]) .mb-160{
  margin-bottom: 160px;
}

:where(html[data-bm-shell]) .mb-165{
  margin-bottom: 165px;
}

:where(html[data-bm-shell]) .mb-170{
  margin-bottom: 170px;
}

:where(html[data-bm-shell]) .mb-175{
  margin-bottom: 175px;
}

:where(html[data-bm-shell]) .mb-180{
  margin-bottom: 180px;
}

:where(html[data-bm-shell]) .mb-185{
  margin-bottom: 185px;
}

:where(html[data-bm-shell]) .mb-190{
  margin-bottom: 190px;
}

:where(html[data-bm-shell]) .mb-195{
  margin-bottom: 195px;
}

:where(html[data-bm-shell]) .mb-200{
  margin-bottom: 200px;
}

:where(html[data-bm-shell]) .mb-205{
  margin-bottom: 205px;
}

:where(html[data-bm-shell]) .mb-210{
  margin-bottom: 210px;
}

:where(html[data-bm-shell]) .mb-215{
  margin-bottom: 215px;
}

:where(html[data-bm-shell]) .mb-220{
  margin-bottom: 220px;
}

:where(html[data-bm-shell]) .mb-225{
  margin-bottom: 225px;
}

/* ======= Margin Left ======= */
:where(html[data-bm-shell]) .ml-5{
  margin-left: 5px;
}

:where(html[data-bm-shell]) .ml-10{
  margin-left: 10px;
}

:where(html[data-bm-shell]) .ml-15{
  margin-left: 15px;
}

:where(html[data-bm-shell]) .ml-20{
  margin-left: 20px;
}

:where(html[data-bm-shell]) .ml-25{
  margin-left: 25px;
}

:where(html[data-bm-shell]) .ml-30{
  margin-left: 30px;
}

:where(html[data-bm-shell]) .ml-35{
  margin-left: 35px;
}

:where(html[data-bm-shell]) .ml-40{
  margin-left: 40px;
}

:where(html[data-bm-shell]) .ml-45{
  margin-left: 45px;
}

:where(html[data-bm-shell]) .ml-50{
  margin-left: 50px;
}

:where(html[data-bm-shell]) .ml-55{
  margin-left: 55px;
}

:where(html[data-bm-shell]) .ml-60{
  margin-left: 60px;
}

:where(html[data-bm-shell]) .ml-65{
  margin-left: 65px;
}

:where(html[data-bm-shell]) .ml-70{
  margin-left: 70px;
}

:where(html[data-bm-shell]) .ml-75{
  margin-left: 75px;
}

:where(html[data-bm-shell]) .ml-80{
  margin-left: 80px;
}

:where(html[data-bm-shell]) .ml-85{
  margin-left: 85px;
}

:where(html[data-bm-shell]) .ml-90{
  margin-left: 90px;
}

:where(html[data-bm-shell]) .ml-95{
  margin-left: 95px;
}

:where(html[data-bm-shell]) .ml-100{
  margin-left: 100px;
}

:where(html[data-bm-shell]) .ml-105{
  margin-left: 105px;
}

:where(html[data-bm-shell]) .ml-110{
  margin-left: 110px;
}

:where(html[data-bm-shell]) .ml-115{
  margin-left: 115px;
}

:where(html[data-bm-shell]) .ml-120{
  margin-left: 120px;
}

:where(html[data-bm-shell]) .ml-125{
  margin-left: 125px;
}

:where(html[data-bm-shell]) .ml-130{
  margin-left: 130px;
}

:where(html[data-bm-shell]) .ml-135{
  margin-left: 135px;
}

:where(html[data-bm-shell]) .ml-140{
  margin-left: 140px;
}

:where(html[data-bm-shell]) .ml-145{
  margin-left: 145px;
}

:where(html[data-bm-shell]) .ml-150{
  margin-left: 150px;
}

:where(html[data-bm-shell]) .ml-155{
  margin-left: 155px;
}

:where(html[data-bm-shell]) .ml-160{
  margin-left: 160px;
}

:where(html[data-bm-shell]) .ml-165{
  margin-left: 165px;
}

:where(html[data-bm-shell]) .ml-170{
  margin-left: 170px;
}

:where(html[data-bm-shell]) .ml-175{
  margin-left: 175px;
}

:where(html[data-bm-shell]) .ml-180{
  margin-left: 180px;
}

:where(html[data-bm-shell]) .ml-185{
  margin-left: 185px;
}

:where(html[data-bm-shell]) .ml-190{
  margin-left: 190px;
}

:where(html[data-bm-shell]) .ml-195{
  margin-left: 195px;
}

:where(html[data-bm-shell]) .ml-200{
  margin-left: 200px;
}

:where(html[data-bm-shell]) .ml-205{
  margin-left: 205px;
}

:where(html[data-bm-shell]) .ml-210{
  margin-left: 210px;
}

:where(html[data-bm-shell]) .ml-215{
  margin-left: 215px;
}

:where(html[data-bm-shell]) .ml-220{
  margin-left: 220px;
}

:where(html[data-bm-shell]) .ml-225{
  margin-left: 225px;
}

/* ======= Margin Right ======= */
:where(html[data-bm-shell]) .mr-5{
  margin-right: 5px;
}

:where(html[data-bm-shell]) .mr-10{
  margin-right: 10px;
}

:where(html[data-bm-shell]) .mr-15{
  margin-right: 15px;
}

:where(html[data-bm-shell]) .mr-20{
  margin-right: 20px;
}

:where(html[data-bm-shell]) .mr-25{
  margin-right: 25px;
}

:where(html[data-bm-shell]) .mr-30{
  margin-right: 30px;
}

:where(html[data-bm-shell]) .mr-35{
  margin-right: 35px;
}

:where(html[data-bm-shell]) .mr-40{
  margin-right: 40px;
}

:where(html[data-bm-shell]) .mr-45{
  margin-right: 45px;
}

:where(html[data-bm-shell]) .mr-50{
  margin-right: 50px;
}

:where(html[data-bm-shell]) .mr-55{
  margin-right: 55px;
}

:where(html[data-bm-shell]) .mr-60{
  margin-right: 60px;
}

:where(html[data-bm-shell]) .mr-65{
  margin-right: 65px;
}

:where(html[data-bm-shell]) .mr-70{
  margin-right: 70px;
}

:where(html[data-bm-shell]) .mr-75{
  margin-right: 75px;
}

:where(html[data-bm-shell]) .mr-80{
  margin-right: 80px;
}

:where(html[data-bm-shell]) .mr-85{
  margin-right: 85px;
}

:where(html[data-bm-shell]) .mr-90{
  margin-right: 90px;
}

:where(html[data-bm-shell]) .mr-95{
  margin-right: 95px;
}

:where(html[data-bm-shell]) .mr-100{
  margin-right: 100px;
}

:where(html[data-bm-shell]) .mr-105{
  margin-right: 105px;
}

:where(html[data-bm-shell]) .mr-110{
  margin-right: 110px;
}

:where(html[data-bm-shell]) .mr-115{
  margin-right: 115px;
}

:where(html[data-bm-shell]) .mr-120{
  margin-right: 120px;
}

:where(html[data-bm-shell]) .mr-125{
  margin-right: 125px;
}

:where(html[data-bm-shell]) .mr-130{
  margin-right: 130px;
}

:where(html[data-bm-shell]) .mr-135{
  margin-right: 135px;
}

:where(html[data-bm-shell]) .mr-140{
  margin-right: 140px;
}

:where(html[data-bm-shell]) .mr-145{
  margin-right: 145px;
}

:where(html[data-bm-shell]) .mr-150{
  margin-right: 150px;
}

:where(html[data-bm-shell]) .mr-155{
  margin-right: 155px;
}

:where(html[data-bm-shell]) .mr-160{
  margin-right: 160px;
}

:where(html[data-bm-shell]) .mr-165{
  margin-right: 165px;
}

:where(html[data-bm-shell]) .mr-170{
  margin-right: 170px;
}

:where(html[data-bm-shell]) .mr-175{
  margin-right: 175px;
}

:where(html[data-bm-shell]) .mr-180{
  margin-right: 180px;
}

:where(html[data-bm-shell]) .mr-185{
  margin-right: 185px;
}

:where(html[data-bm-shell]) .mr-190{
  margin-right: 190px;
}

:where(html[data-bm-shell]) .mr-195{
  margin-right: 195px;
}

:where(html[data-bm-shell]) .mr-200{
  margin-right: 200px;
}

:where(html[data-bm-shell]) .mr-205{
  margin-right: 205px;
}

:where(html[data-bm-shell]) .mr-210{
  margin-right: 210px;
}

:where(html[data-bm-shell]) .mr-215{
  margin-right: 215px;
}

:where(html[data-bm-shell]) .mr-220{
  margin-right: 220px;
}

:where(html[data-bm-shell]) .mr-225{
  margin-right: 225px;
}

/* ======= Padding Top ======= */
:where(html[data-bm-shell]) .pt-5{
  padding-top: 5px;
}

:where(html[data-bm-shell]) .pt-10{
  padding-top: 10px;
}

:where(html[data-bm-shell]) .pt-15{
  padding-top: 15px;
}

:where(html[data-bm-shell]) .pt-20{
  padding-top: 20px;
}

:where(html[data-bm-shell]) .pt-25{
  padding-top: 25px;
}

:where(html[data-bm-shell]) .pt-30{
  padding-top: 30px;
}

:where(html[data-bm-shell]) .pt-35{
  padding-top: 35px;
}

:where(html[data-bm-shell]) .pt-40{
  padding-top: 40px;
}

:where(html[data-bm-shell]) .pt-45{
  padding-top: 45px;
}

:where(html[data-bm-shell]) .pt-50{
  padding-top: 50px;
}

:where(html[data-bm-shell]) .pt-55{
  padding-top: 55px;
}

:where(html[data-bm-shell]) .pt-60{
  padding-top: 60px;
}

:where(html[data-bm-shell]) .pt-65{
  padding-top: 65px;
}

:where(html[data-bm-shell]) .pt-70{
  padding-top: 70px;
}

:where(html[data-bm-shell]) .pt-75{
  padding-top: 75px;
}

:where(html[data-bm-shell]) .pt-80{
  padding-top: 80px;
}

:where(html[data-bm-shell]) .pt-85{
  padding-top: 85px;
}

:where(html[data-bm-shell]) .pt-90{
  padding-top: 90px;
}

:where(html[data-bm-shell]) .pt-95{
  padding-top: 95px;
}

:where(html[data-bm-shell]) .pt-100{
  padding-top: 100px;
}

:where(html[data-bm-shell]) .pt-105{
  padding-top: 105px;
}

:where(html[data-bm-shell]) .pt-110{
  padding-top: 110px;
}

:where(html[data-bm-shell]) .pt-115{
  padding-top: 115px;
}

:where(html[data-bm-shell]) .pt-120{
  padding-top: 120px;
}

:where(html[data-bm-shell]) .pt-125{
  padding-top: 125px;
}

:where(html[data-bm-shell]) .pt-130{
  padding-top: 130px;
}

:where(html[data-bm-shell]) .pt-135{
  padding-top: 135px;
}

:where(html[data-bm-shell]) .pt-140{
  padding-top: 140px;
}

:where(html[data-bm-shell]) .pt-145{
  padding-top: 145px;
}

:where(html[data-bm-shell]) .pt-150{
  padding-top: 150px;
}

:where(html[data-bm-shell]) .pt-155{
  padding-top: 155px;
}

:where(html[data-bm-shell]) .pt-160{
  padding-top: 160px;
}

:where(html[data-bm-shell]) .pt-165{
  padding-top: 165px;
}

:where(html[data-bm-shell]) .pt-170{
  padding-top: 170px;
}

:where(html[data-bm-shell]) .pt-175{
  padding-top: 175px;
}

:where(html[data-bm-shell]) .pt-180{
  padding-top: 180px;
}

:where(html[data-bm-shell]) .pt-185{
  padding-top: 185px;
}

:where(html[data-bm-shell]) .pt-190{
  padding-top: 190px;
}

:where(html[data-bm-shell]) .pt-195{
  padding-top: 195px;
}

:where(html[data-bm-shell]) .pt-200{
  padding-top: 200px;
}

:where(html[data-bm-shell]) .pt-205{
  padding-top: 205px;
}

:where(html[data-bm-shell]) .pt-210{
  padding-top: 210px;
}

:where(html[data-bm-shell]) .pt-215{
  padding-top: 215px;
}

:where(html[data-bm-shell]) .pt-220{
  padding-top: 220px;
}

:where(html[data-bm-shell]) .pt-225{
  padding-top: 225px;
}

/* ======= Padding Bottom ======= */
:where(html[data-bm-shell]) .pb-5{
  padding-bottom: 5px;
}

:where(html[data-bm-shell]) .pb-10{
  padding-bottom: 10px;
}

:where(html[data-bm-shell]) .pb-15{
  padding-bottom: 15px;
}

:where(html[data-bm-shell]) .pb-20{
  padding-bottom: 20px;
}

:where(html[data-bm-shell]) .pb-25{
  padding-bottom: 25px;
}

:where(html[data-bm-shell]) .pb-30{
  padding-bottom: 30px;
}

:where(html[data-bm-shell]) .pb-35{
  padding-bottom: 35px;
}

:where(html[data-bm-shell]) .pb-40{
  padding-bottom: 40px;
}

:where(html[data-bm-shell]) .pb-45{
  padding-bottom: 45px;
}

:where(html[data-bm-shell]) .pb-50{
  padding-bottom: 50px;
}

:where(html[data-bm-shell]) .pb-55{
  padding-bottom: 55px;
}

:where(html[data-bm-shell]) .pb-60{
  padding-bottom: 60px;
}

:where(html[data-bm-shell]) .pb-65{
  padding-bottom: 65px;
}

:where(html[data-bm-shell]) .pb-70{
  padding-bottom: 70px;
}

:where(html[data-bm-shell]) .pb-75{
  padding-bottom: 75px;
}

:where(html[data-bm-shell]) .pb-80{
  padding-bottom: 80px;
}

:where(html[data-bm-shell]) .pb-85{
  padding-bottom: 85px;
}

:where(html[data-bm-shell]) .pb-90{
  padding-bottom: 90px;
}

:where(html[data-bm-shell]) .pb-95{
  padding-bottom: 95px;
}

:where(html[data-bm-shell]) .pb-100{
  padding-bottom: 100px;
}

:where(html[data-bm-shell]) .pb-105{
  padding-bottom: 105px;
}

:where(html[data-bm-shell]) .pb-110{
  padding-bottom: 110px;
}

:where(html[data-bm-shell]) .pb-115{
  padding-bottom: 115px;
}

:where(html[data-bm-shell]) .pb-120{
  padding-bottom: 120px;
}

:where(html[data-bm-shell]) .pb-125{
  padding-bottom: 125px;
}

:where(html[data-bm-shell]) .pb-130{
  padding-bottom: 130px;
}

:where(html[data-bm-shell]) .pb-135{
  padding-bottom: 135px;
}

:where(html[data-bm-shell]) .pb-140{
  padding-bottom: 140px;
}

:where(html[data-bm-shell]) .pb-145{
  padding-bottom: 145px;
}

:where(html[data-bm-shell]) .pb-150{
  padding-bottom: 150px;
}

:where(html[data-bm-shell]) .pb-155{
  padding-bottom: 155px;
}

:where(html[data-bm-shell]) .pb-160{
  padding-bottom: 160px;
}

:where(html[data-bm-shell]) .pb-165{
  padding-bottom: 165px;
}

:where(html[data-bm-shell]) .pb-170{
  padding-bottom: 170px;
}

:where(html[data-bm-shell]) .pb-175{
  padding-bottom: 175px;
}

:where(html[data-bm-shell]) .pb-180{
  padding-bottom: 180px;
}

:where(html[data-bm-shell]) .pb-185{
  padding-bottom: 185px;
}

:where(html[data-bm-shell]) .pb-190{
  padding-bottom: 190px;
}

:where(html[data-bm-shell]) .pb-195{
  padding-bottom: 195px;
}

:where(html[data-bm-shell]) .pb-200{
  padding-bottom: 200px;
}

:where(html[data-bm-shell]) .pb-205{
  padding-bottom: 205px;
}

:where(html[data-bm-shell]) .pb-210{
  padding-bottom: 210px;
}

:where(html[data-bm-shell]) .pb-215{
  padding-bottom: 215px;
}

:where(html[data-bm-shell]) .pb-220{
  padding-bottom: 220px;
}

:where(html[data-bm-shell]) .pb-225{
  padding-bottom: 225px;
}

/* ======= Padding Left ======= */
:where(html[data-bm-shell]) .pl-5{
  padding-left: 5px;
}

:where(html[data-bm-shell]) .pl-10{
  padding-left: 10px;
}

:where(html[data-bm-shell]) .pl-15{
  padding-left: 15px;
}

:where(html[data-bm-shell]) .pl-20{
  padding-left: 20px;
}

:where(html[data-bm-shell]) .pl-25{
  padding-left: 25px;
}

:where(html[data-bm-shell]) .pl-30{
  padding-left: 30px;
}

:where(html[data-bm-shell]) .pl-35{
  padding-left: 35px;
}

:where(html[data-bm-shell]) .pl-40{
  padding-left: 40px;
}

:where(html[data-bm-shell]) .pl-45{
  padding-left: 45px;
}

:where(html[data-bm-shell]) .pl-50{
  padding-left: 50px;
}

:where(html[data-bm-shell]) .pl-55{
  padding-left: 55px;
}

:where(html[data-bm-shell]) .pl-60{
  padding-left: 60px;
}

:where(html[data-bm-shell]) .pl-65{
  padding-left: 65px;
}

:where(html[data-bm-shell]) .pl-70{
  padding-left: 70px;
}

:where(html[data-bm-shell]) .pl-75{
  padding-left: 75px;
}

:where(html[data-bm-shell]) .pl-80{
  padding-left: 80px;
}

:where(html[data-bm-shell]) .pl-85{
  padding-left: 85px;
}

:where(html[data-bm-shell]) .pl-90{
  padding-left: 90px;
}

:where(html[data-bm-shell]) .pl-95{
  padding-left: 95px;
}

:where(html[data-bm-shell]) .pl-100{
  padding-left: 100px;
}

:where(html[data-bm-shell]) .pl-105{
  padding-left: 105px;
}

:where(html[data-bm-shell]) .pl-110{
  padding-left: 110px;
}

:where(html[data-bm-shell]) .pl-115{
  padding-left: 115px;
}

:where(html[data-bm-shell]) .pl-120{
  padding-left: 120px;
}

:where(html[data-bm-shell]) .pl-125{
  padding-left: 125px;
}

:where(html[data-bm-shell]) .pl-130{
  padding-left: 130px;
}

:where(html[data-bm-shell]) .pl-135{
  padding-left: 135px;
}

:where(html[data-bm-shell]) .pl-140{
  padding-left: 140px;
}

:where(html[data-bm-shell]) .pl-145{
  padding-left: 145px;
}

:where(html[data-bm-shell]) .pl-150{
  padding-left: 150px;
}

:where(html[data-bm-shell]) .pl-155{
  padding-left: 155px;
}

:where(html[data-bm-shell]) .pl-160{
  padding-left: 160px;
}

:where(html[data-bm-shell]) .pl-165{
  padding-left: 165px;
}

:where(html[data-bm-shell]) .pl-170{
  padding-left: 170px;
}

:where(html[data-bm-shell]) .pl-175{
  padding-left: 175px;
}

:where(html[data-bm-shell]) .pl-180{
  padding-left: 180px;
}

:where(html[data-bm-shell]) .pl-185{
  padding-left: 185px;
}

:where(html[data-bm-shell]) .pl-190{
  padding-left: 190px;
}

:where(html[data-bm-shell]) .pl-195{
  padding-left: 195px;
}

:where(html[data-bm-shell]) .pl-200{
  padding-left: 200px;
}

:where(html[data-bm-shell]) .pl-205{
  padding-left: 205px;
}

:where(html[data-bm-shell]) .pl-210{
  padding-left: 210px;
}

:where(html[data-bm-shell]) .pl-215{
  padding-left: 215px;
}

:where(html[data-bm-shell]) .pl-220{
  padding-left: 220px;
}

:where(html[data-bm-shell]) .pl-225{
  padding-left: 225px;
}

/* ======= Padding Right ======= */
:where(html[data-bm-shell]) .pr-5{
  padding-right: 5px;
}

:where(html[data-bm-shell]) .pr-10{
  padding-right: 10px;
}

:where(html[data-bm-shell]) .pr-15{
  padding-right: 15px;
}

:where(html[data-bm-shell]) .pr-20{
  padding-right: 20px;
}

:where(html[data-bm-shell]) .pr-25{
  padding-right: 25px;
}

:where(html[data-bm-shell]) .pr-30{
  padding-right: 30px;
}

:where(html[data-bm-shell]) .pr-35{
  padding-right: 35px;
}

:where(html[data-bm-shell]) .pr-40{
  padding-right: 40px;
}

:where(html[data-bm-shell]) .pr-45{
  padding-right: 45px;
}

:where(html[data-bm-shell]) .pr-50{
  padding-right: 50px;
}

:where(html[data-bm-shell]) .pr-55{
  padding-right: 55px;
}

:where(html[data-bm-shell]) .pr-60{
  padding-right: 60px;
}

:where(html[data-bm-shell]) .pr-65{
  padding-right: 65px;
}

:where(html[data-bm-shell]) .pr-70{
  padding-right: 70px;
}

:where(html[data-bm-shell]) .pr-75{
  padding-right: 75px;
}

:where(html[data-bm-shell]) .pr-80{
  padding-right: 80px;
}

:where(html[data-bm-shell]) .pr-85{
  padding-right: 85px;
}

:where(html[data-bm-shell]) .pr-90{
  padding-right: 90px;
}

:where(html[data-bm-shell]) .pr-95{
  padding-right: 95px;
}

:where(html[data-bm-shell]) .pr-100{
  padding-right: 100px;
}

:where(html[data-bm-shell]) .pr-105{
  padding-right: 105px;
}

:where(html[data-bm-shell]) .pr-110{
  padding-right: 110px;
}

:where(html[data-bm-shell]) .pr-115{
  padding-right: 115px;
}

:where(html[data-bm-shell]) .pr-120{
  padding-right: 120px;
}

:where(html[data-bm-shell]) .pr-125{
  padding-right: 125px;
}

:where(html[data-bm-shell]) .pr-130{
  padding-right: 130px;
}

:where(html[data-bm-shell]) .pr-135{
  padding-right: 135px;
}

:where(html[data-bm-shell]) .pr-140{
  padding-right: 140px;
}

:where(html[data-bm-shell]) .pr-145{
  padding-right: 145px;
}

:where(html[data-bm-shell]) .pr-150{
  padding-right: 150px;
}

:where(html[data-bm-shell]) .pr-155{
  padding-right: 155px;
}

:where(html[data-bm-shell]) .pr-160{
  padding-right: 160px;
}

:where(html[data-bm-shell]) .pr-165{
  padding-right: 165px;
}

:where(html[data-bm-shell]) .pr-170{
  padding-right: 170px;
}

:where(html[data-bm-shell]) .pr-175{
  padding-right: 175px;
}

:where(html[data-bm-shell]) .pr-180{
  padding-right: 180px;
}

:where(html[data-bm-shell]) .pr-185{
  padding-right: 185px;
}

:where(html[data-bm-shell]) .pr-190{
  padding-right: 190px;
}

:where(html[data-bm-shell]) .pr-195{
  padding-right: 195px;
}

:where(html[data-bm-shell]) .pr-200{
  padding-right: 200px;
}

:where(html[data-bm-shell]) .pr-205{
  padding-right: 205px;
}

:where(html[data-bm-shell]) .pr-210{
  padding-right: 210px;
}

:where(html[data-bm-shell]) .pr-215{
  padding-right: 215px;
}

:where(html[data-bm-shell]) .pr-220{
  padding-right: 220px;
}

:where(html[data-bm-shell]) .pr-225{
  padding-right: 225px;
}

/* ======= bg-primary shades ========= */
:where(html[data-bm-shell]) .bg-primary-100{
  background: rgba(54, 92, 245, 0.1);
}

:where(html[data-bm-shell]) .bg-primary-200{
  background: rgba(54, 92, 245, 0.2);
}

:where(html[data-bm-shell]) .bg-primary-300{
  background: rgba(54, 92, 245, 0.3);
}

:where(html[data-bm-shell]) .bg-primary-400{
  background: rgba(54, 92, 245, 0.4);
}

:where(html[data-bm-shell]) .bg-primary-500{
  background: rgba(54, 92, 245, 0.5);
}

:where(html[data-bm-shell]) .bg-primary-600{
  background: rgba(54, 92, 245, 0.6);
}

:where(html[data-bm-shell]) .bg-primary-700{
  background: rgba(54, 92, 245, 0.7);
}

:where(html[data-bm-shell]) .bg-primary-800{
  background: rgba(54, 92, 245, 0.8);
}

:where(html[data-bm-shell]) .bg-primary-900{
  background: rgba(54, 92, 245, 0.9);
}

/* ======= bg-secondary shades ========= */
:where(html[data-bm-shell]) .bg-secondary-100{
  background: rgba(0, 193, 248, 0.1);
}

:where(html[data-bm-shell]) .bg-secondary-200{
  background: rgba(0, 193, 248, 0.2);
}

:where(html[data-bm-shell]) .bg-secondary-300{
  background: rgba(0, 193, 248, 0.3);
}

:where(html[data-bm-shell]) .bg-secondary-400{
  background: rgba(0, 193, 248, 0.4);
}

:where(html[data-bm-shell]) .bg-secondary-500{
  background: rgba(0, 193, 248, 0.5);
}

:where(html[data-bm-shell]) .bg-secondary-600{
  background: rgba(0, 193, 248, 0.6);
}

:where(html[data-bm-shell]) .bg-secondary-700{
  background: rgba(0, 193, 248, 0.7);
}

:where(html[data-bm-shell]) .bg-secondary-800{
  background: rgba(0, 193, 248, 0.8);
}

:where(html[data-bm-shell]) .bg-secondary-900{
  background: rgba(0, 193, 248, 0.9);
}

/* ======= bg-success shades ========= */
:where(html[data-bm-shell]) .bg-success-100{
  background: rgba(33, 150, 83, 0.1);
}

:where(html[data-bm-shell]) .bg-success-200{
  background: rgba(33, 150, 83, 0.2);
}

:where(html[data-bm-shell]) .bg-success-300{
  background: rgba(33, 150, 83, 0.3);
}

:where(html[data-bm-shell]) .bg-success-400{
  background: rgba(33, 150, 83, 0.4);
}

:where(html[data-bm-shell]) .bg-success-500{
  background: rgba(33, 150, 83, 0.5);
}

:where(html[data-bm-shell]) .bg-success-600{
  background: rgba(33, 150, 83, 0.6);
}

:where(html[data-bm-shell]) .bg-success-700{
  background: rgba(33, 150, 83, 0.7);
}

:where(html[data-bm-shell]) .bg-success-800{
  background: rgba(33, 150, 83, 0.8);
}

:where(html[data-bm-shell]) .bg-success-900{
  background: rgba(33, 150, 83, 0.9);
}

/* ======= bg-danger shades ========= */
:where(html[data-bm-shell]) .bg-danger-100{
  background: rgba(213, 1, 0, 0.1);
}

:where(html[data-bm-shell]) .bg-danger-200{
  background: rgba(213, 1, 0, 0.2);
}

:where(html[data-bm-shell]) .bg-danger-300{
  background: rgba(213, 1, 0, 0.3);
}

:where(html[data-bm-shell]) .bg-danger-400{
  background: rgba(213, 1, 0, 0.4);
}

:where(html[data-bm-shell]) .bg-danger-500{
  background: rgba(213, 1, 0, 0.5);
}

:where(html[data-bm-shell]) .bg-danger-600{
  background: rgba(213, 1, 0, 0.6);
}

:where(html[data-bm-shell]) .bg-danger-700{
  background: rgba(213, 1, 0, 0.7);
}

:where(html[data-bm-shell]) .bg-danger-800{
  background: rgba(213, 1, 0, 0.8);
}

:where(html[data-bm-shell]) .bg-danger-900{
  background: rgba(213, 1, 0, 0.9);
}

/* ======= bg-warning shades ========= */
:where(html[data-bm-shell]) .bg-warning-100{
  background: rgba(247, 200, 0, 0.1);
}

:where(html[data-bm-shell]) .bg-warning-200{
  background: rgba(247, 200, 0, 0.2);
}

:where(html[data-bm-shell]) .bg-warning-300{
  background: rgba(247, 200, 0, 0.3);
}

:where(html[data-bm-shell]) .bg-warning-400{
  background: rgba(247, 200, 0, 0.4);
}

:where(html[data-bm-shell]) .bg-warning-500{
  background: rgba(247, 200, 0, 0.5);
}

:where(html[data-bm-shell]) .bg-warning-600{
  background: rgba(247, 200, 0, 0.6);
}

:where(html[data-bm-shell]) .bg-warning-700{
  background: rgba(247, 200, 0, 0.7);
}

:where(html[data-bm-shell]) .bg-warning-800{
  background: rgba(247, 200, 0, 0.8);
}

:where(html[data-bm-shell]) .bg-warning-900{
  background: rgba(247, 200, 0, 0.9);
}

/* ======= bg-info shades ========= */
:where(html[data-bm-shell]) .bg-info-100{
  background: rgba(151, 202, 49, 0.1);
}

:where(html[data-bm-shell]) .bg-info-200{
  background: rgba(151, 202, 49, 0.2);
}

:where(html[data-bm-shell]) .bg-info-300{
  background: rgba(151, 202, 49, 0.3);
}

:where(html[data-bm-shell]) .bg-info-400{
  background: rgba(151, 202, 49, 0.4);
}

:where(html[data-bm-shell]) .bg-info-500{
  background: rgba(151, 202, 49, 0.5);
}

:where(html[data-bm-shell]) .bg-info-600{
  background: rgba(151, 202, 49, 0.6);
}

:where(html[data-bm-shell]) .bg-info-700{
  background: rgba(151, 202, 49, 0.7);
}

:where(html[data-bm-shell]) .bg-info-800{
  background: rgba(151, 202, 49, 0.8);
}

:where(html[data-bm-shell]) .bg-info-900{
  background: rgba(151, 202, 49, 0.9);
}

/* ======= bg-dark shades ========= */
:where(html[data-bm-shell]) .bg-dark-100{
  background: rgba(248, 250, 252, 0.1);
}

:where(html[data-bm-shell]) .bg-dark-200{
  background: rgba(248, 250, 252, 0.2);
}

:where(html[data-bm-shell]) .bg-dark-300{
  background: rgba(248, 250, 252, 0.3);
}

:where(html[data-bm-shell]) .bg-dark-400{
  background: rgba(248, 250, 252, 0.4);
}

:where(html[data-bm-shell]) .bg-dark-500{
  background: rgba(248, 250, 252, 0.5);
}

:where(html[data-bm-shell]) .bg-dark-600{
  background: rgba(248, 250, 252, 0.6);
}

:where(html[data-bm-shell]) .bg-dark-700{
  background: rgba(248, 250, 252, 0.7);
}

:where(html[data-bm-shell]) .bg-dark-800{
  background: rgba(248, 250, 252, 0.8);
}

:where(html[data-bm-shell]) .bg-dark-900{
  background: rgba(248, 250, 252, 0.9);
}

/* ======= bg-purple shades ========= */
:where(html[data-bm-shell]) .bg-purple-100{
  background: rgba(155, 81, 224, 0.1);
}

:where(html[data-bm-shell]) .bg-purple-200{
  background: rgba(155, 81, 224, 0.2);
}

:where(html[data-bm-shell]) .bg-purple-300{
  background: rgba(155, 81, 224, 0.3);
}

:where(html[data-bm-shell]) .bg-purple-400{
  background: rgba(155, 81, 224, 0.4);
}

:where(html[data-bm-shell]) .bg-purple-500{
  background: rgba(155, 81, 224, 0.5);
}

:where(html[data-bm-shell]) .bg-purple-600{
  background: rgba(155, 81, 224, 0.6);
}

:where(html[data-bm-shell]) .bg-purple-700{
  background: rgba(155, 81, 224, 0.7);
}

:where(html[data-bm-shell]) .bg-purple-800{
  background: rgba(155, 81, 224, 0.8);
}

:where(html[data-bm-shell]) .bg-purple-900{
  background: rgba(155, 81, 224, 0.9);
}

/* ======= bg-orange shades ========= */
:where(html[data-bm-shell]) .bg-orange-100{
  background: rgba(242, 153, 74, 0.1);
}

:where(html[data-bm-shell]) .bg-orange-200{
  background: rgba(242, 153, 74, 0.2);
}

:where(html[data-bm-shell]) .bg-orange-300{
  background: rgba(242, 153, 74, 0.3);
}

:where(html[data-bm-shell]) .bg-orange-400{
  background: rgba(242, 153, 74, 0.4);
}

:where(html[data-bm-shell]) .bg-orange-500{
  background: rgba(242, 153, 74, 0.5);
}

:where(html[data-bm-shell]) .bg-orange-600{
  background: rgba(242, 153, 74, 0.6);
}

:where(html[data-bm-shell]) .bg-orange-700{
  background: rgba(242, 153, 74, 0.7);
}

:where(html[data-bm-shell]) .bg-orange-800{
  background: rgba(242, 153, 74, 0.8);
}

:where(html[data-bm-shell]) .bg-orange-900{
  background: rgba(242, 153, 74, 0.9);
}

/* ======== Background Colors ========== */
:where(html[data-bm-shell]) .primary-bg{
  background-color: #365CF5;
}

:where(html[data-bm-shell]) .secondary-bg{
  background-color: #00c1f8;
}

:where(html[data-bm-shell]) .success-bg{
  background-color: #219653;
}

:where(html[data-bm-shell]) .danger-bg{
  background-color: #d50100;
}

:where(html[data-bm-shell]) .warning-bg{
  background-color: #f7c800;
}

:where(html[data-bm-shell]) .info-bg{
  background-color: #97ca31;
}

:where(html[data-bm-shell]) .dark-bg{
  background-color: #f8fafc;
}

:where(html[data-bm-shell]) .light-bg{
  background-color: #1e293b;
}

:where(html[data-bm-shell]) .blue-light-bg{
  background-color: #49BEFF;
}

:where(html[data-bm-shell]) .active-bg{
  background-color: #365CF5;
}

:where(html[data-bm-shell]) .deactive-bg{
  background-color: #334155;
}

:where(html[data-bm-shell]) .gray-bg{
  background-color: #94a3b8;
}

:where(html[data-bm-shell]) .purple-bg{
  background-color: #9b51e0;
}

:where(html[data-bm-shell]) .orange-bg{
  background-color: #f2994a;
}

:where(html[data-bm-shell]) .deep-blue-bg{
  background-color: #345d9d;
}

:where(html[data-bm-shell]) .doc-bg{
  background-color: #f98db4;
}

:where(html[data-bm-shell]) .photo-bg{
  background-color: #93cfe2;
}

/* ======== Text Colors ========== */
:where(html[data-bm-shell]) .text-primary{
  color: #365CF5 !important;
}

:where(html[data-bm-shell]) .text-secondary{
  color: #00c1f8 !important;
}

:where(html[data-bm-shell]) .text-success{
  color: #219653 !important;
}

:where(html[data-bm-shell]) .text-success-2{
  color: #10B981 !important;
}

:where(html[data-bm-shell]) .text-danger{
  color: #d50100 !important;
}

:where(html[data-bm-shell]) .text-danger-2{
  color: #FB5454 !important;
}

:where(html[data-bm-shell]) .text-danger-light{
  color: #fa5a78 !important;
}

:where(html[data-bm-shell]) .text-warning{
  color: #f7c800 !important;
}

:where(html[data-bm-shell]) .text-info{
  color: #97ca31 !important;
}

:where(html[data-bm-shell]) .text-dark{
  color: #f8fafc !important;
}

:where(html[data-bm-shell]) .text-light{
  color: #94a3b8 !important;
}

:where(html[data-bm-shell]) .text-active{
  color: #365CF5 !important;
}

:where(html[data-bm-shell]) .text-deactive{
  color: #334155 !important;
}

:where(html[data-bm-shell]) .text-gray{
  color: #94a3b8 !important;
}

:where(html[data-bm-shell]) .text-orange{
  color: #f2994a !important;
}

:where(html[data-bm-shell]) .text-purple{
  color: #9b51e0 !important;
}

:where(html[data-bm-shell]) .text-doc{
  color: #f98db4 !important;
}

:where(html[data-bm-shell]) .text-photo{
  color: #93cfe2 !important;
}

/* ========= Font Weight =========== */
:where(html[data-bm-shell]) .fw-300{
  font-weight: 300;
}

:where(html[data-bm-shell]) .fw-400{
  font-weight: 400;
}

:where(html[data-bm-shell]) .fw-500{
  font-weight: 500;
}

:where(html[data-bm-shell]) .fw-600{
  font-weight: 600;
}

:where(html[data-bm-shell]) .fw-700{
  font-weight: 700;
}

:where(html[data-bm-shell]) .fw-800{
  font-weight: 800;
}

:where(html[data-bm-shell]) .fw-900{
  font-weight: 900;
}

/* =========== Sidebar css =========== */
:where(html[data-bm-shell]) #preloader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e293b;
  z-index: 999999;
}
:where(html[data-bm-shell]) #preloader .spinner{
  width: 80px;
  height: 80px;
  border: 5px solid #365CF5;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bm-panel-base-spinner 0.9s linear infinite;
}

@keyframes bm-panel-base-spinner {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

:where(html[data-bm-shell]) ::-webkit-scrollbar{
      width: 10px;
      height: 10px;
  }

  	:where(html[data-bm-shell]) ::-webkit-scrollbar{
      width: 10px;
      height: 10px;
  }

  /* Fondo de la barra (el carril) */
  :where(html[data-bm-shell]) ::-webkit-scrollbar-track{
      background: #0f172a; 
      border-left: 1px solid #1e293b;
  }

  /* La parte que se mueve (el pulgar) */
  :where(html[data-bm-shell]) ::-webkit-scrollbar-thumb{
      background-color: #334155;
      border-radius: 6px;       
      border: 2px solid #0f172a; 
  }

  /* Al pasar el mouse por la barra */
  :where(html[data-bm-shell]) ::-webkit-scrollbar-thumb:hover{
      background-color: #475569; 
  }
  
  /* Esquina donde se juntan horizontal y vertical */
  :where(html[data-bm-shell]) ::-webkit-scrollbar-corner{
      background: #0f172a;
  }

  /* Para Firefox (Estándar moderno) */
  :where(html[data-bm-shell]) *{
      scrollbar-width: thin;
      scrollbar-color: #334155 #0f172a;
  }

/* ================ 2. MENÚ Y CABECERA ====================== */

/* ==================== VISTA: html[data-bm-shell] ==================== */
/* Origen: menu.php:89 */
:where(html[data-bm-shell]):root{
      --bm-menu-bg:#101827;
      --bm-menu-bg-soft:#172033;
      --bm-menu-surface:#1e293b;
      --bm-menu-border:rgba(148,163,184,.14);
      --bm-menu-text:#f8fafc;
      --bm-menu-muted:#94a3b8;
      --bm-menu-muted-2:#64748b;
      --bm-menu-brand:#5b74f7;
      --bm-menu-brand-soft:rgba(91,116,247,.14);
      --bm-menu-shadow:0 14px 40px rgba(0,0,0,.18);
      --bm-menu-font:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    }

    :where(html[data-bm-shell]):is(html)[data-bs-theme="dark"] body,
:where(html[data-bm-shell]) body{
      background:#0f172a !important;
      color:var(--bm-menu-text) !important;
      font-family:var(--bm-menu-font) !important;
    }

    :where(html[data-bm-shell]) #preloader{
      background:rgba(15,23,42,.92) !important;
      backdrop-filter:blur(10px);
    }

    :where(html[data-bm-shell]) #preloader .spinner,
:where(html[data-bm-shell]) .spinner{
      border-color:rgba(91,116,247,.16) !important;
      border-top-color:var(--bm-menu-brand) !important;
    }

    :where(html[data-bm-shell]) .sidebar-nav-wrapper{
      background:linear-gradient(180deg, rgba(23,32,51,.98), rgba(16,24,39,.98)) !important;
      border-right:1px solid var(--bm-menu-border) !important;
      box-shadow:10px 0 30px rgba(0,0,0,.12);
      padding:18px 14px 20px !important;
      overflow:hidden auto;
      scrollbar-width:thin;
      scrollbar-color:rgba(148,163,184,.25) transparent;
    }

    :where(html[data-bm-shell]) .sidebar-nav-wrapper::-webkit-scrollbar{ width:8px; }
    :where(html[data-bm-shell]) .sidebar-nav-wrapper::-webkit-scrollbar-thumb{
      background:rgba(148,163,184,.22);
      border-radius:999px;
    }

    :where(html[data-bm-shell]) .sidebar-nav-wrapper .navbar-logo{
      margin:2px 4px 20px !important;
      position:relative;
      z-index:1;
    }

    :where(html[data-bm-shell]) .sidebar-nav-wrapper .navbar-logo a{
      display:block;
      text-decoration:none;
    }

    :where(html[data-bm-shell]) .sidebar-nav-wrapper .navbar-logo img{
      width:100% !important;
      height:auto !important;
      border-radius:16px !important;
      box-shadow:0 10px 24px rgba(0,0,0,.18);
    }

    :where(html[data-bm-shell]) .sidebar-nav{
      position:relative;
      z-index:1;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul{
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:0 !important;
      margin:0 !important;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item{
      margin:0 !important;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a{
      display:flex !important;
      align-items:center;
      gap:12px;
      min-height:50px;
      padding:12px 14px !important;
      border-radius:16px;
      color:var(--bm-menu-muted) !important;
      border:1px solid transparent;
      background:transparent;
      text-decoration:none;
      position:relative;
      transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a .icon,
:where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a .text,
:where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a .bm-nav-arrow{
      position:relative;
      z-index:1;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a .icon{
      width:38px !important;
      height:38px !important;
      min-width:38px;
      display:inline-flex !important;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      background:rgba(148,163,184,.08);
      color:#cbd5e1 !important;
      font-size:1.02rem;
      transition:background .18s ease, color .18s ease;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a .text{
      font-size:.90rem;
      line-height:1.24;
      font-weight:720;
      color:inherit !important;
      letter-spacing:-.01em;
      flex:1 1 auto;
    }

    /* Productos gratuitos incluidos: bloque independiente y compacto */
    :where(html[data-bm-shell]) .bm-free-products-group{
      list-style:none;
      margin:4px 0 2px !important;
      padding:10px !important;
      border:1px solid rgba(148,163,184,.12);
      border-radius:17px;
      background:linear-gradient(180deg, rgba(148,163,184,.045), rgba(15,23,42,.12));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    }

    :where(html[data-bm-shell]) .bm-free-products-heading{
      display:flex;
      align-items:flex-start;
      gap:8px;
      margin:0 2px 9px;
      color:#a5b4fc;
      font-size:.63rem;
      line-height:1.32;
      font-weight:820;
      letter-spacing:.045em;
      text-transform:uppercase;
    }

    :where(html[data-bm-shell]) .bm-free-products-heading-icon{
      width:17px;
      height:17px;
      min-width:17px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-top:1px;
      border-radius:6px;
      background:rgba(91,116,247,.14);
      color:#c7d2fe;
    }

    :where(html[data-bm-shell]) .bm-free-products-heading-icon svg{
      width:10px;
      height:10px;
      display:block;
      fill:none;
      stroke:currentColor;
      stroke-width:1.9;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    :where(html[data-bm-shell]) .bm-free-products-list{
      display:grid;
      gap:6px;
    }

    :where(html[data-bm-shell]) .bm-free-product-link{
      min-width:0;
      min-height:43px;
      display:flex;
      align-items:center;
      gap:9px;
      padding:7px 8px;
      border:1px solid transparent;
      border-radius:12px;
      background:rgba(15,23,42,.20);
      color:var(--bm-menu-muted) !important;
      text-decoration:none !important;
      transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
    }

    :where(html[data-bm-shell]) .bm-free-product-link:hover{
      transform:translateX(1px);
      color:#fff !important;
      background:rgba(91,116,247,.09);
      border-color:rgba(129,140,248,.18);
    }

    :where(html[data-bm-shell]) .bm-free-product-link.active{
      color:#fff !important;
      background:linear-gradient(135deg, rgba(91,116,247,.72), rgba(91,116,247,.46));
      border-color:rgba(255,255,255,.08);
      box-shadow:0 7px 18px rgba(55,65,180,.14);
    }

    :where(html[data-bm-shell]) .bm-free-product-icon{
      width:30px;
      height:30px;
      min-width:30px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:9px;
      background:rgba(148,163,184,.08);
      color:#cbd5e1;
      transition:background .18s ease, color .18s ease;
    }

    :where(html[data-bm-shell]) .bm-free-product-icon svg{
      width:15px;
      height:15px;
      display:block;
      fill:none;
      stroke:currentColor;
      stroke-width:1.8;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    :where(html[data-bm-shell]) .bm-free-product-link:hover .bm-free-product-icon,
:where(html[data-bm-shell]) .bm-free-product-link.active .bm-free-product-icon{
      background:rgba(255,255,255,.11);
      color:#fff;
    }

    :where(html[data-bm-shell]) .bm-free-product-name{
      min-width:0;
      flex:1 1 auto;
      color:inherit;
      font-size:.76rem;
      line-height:1.2;
      font-weight:740;
      letter-spacing:-.01em;
    }

    :where(html[data-bm-shell]) .bm-free-product-arrow{
      width:14px;
      height:14px;
      min-width:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--bm-menu-muted-2);
      font-size:.68rem;
      opacity:.68;
      transition:color .18s ease, opacity .18s ease;
    }

    :where(html[data-bm-shell]) .bm-free-product-link:hover .bm-free-product-arrow,
:where(html[data-bm-shell]) .bm-free-product-link.active .bm-free-product-arrow{
      color:#fff;
      opacity:1;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a .bm-nav-arrow{
      width:18px;
      height:18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--bm-menu-muted-2);
      opacity:.68;
      transition:color .18s ease, opacity .18s ease;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a:hover{
      color:var(--bm-menu-text) !important;
      border-color:var(--bm-menu-border);
      background:rgba(148,163,184,.06);
      transform:translateX(1px);
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a:hover .icon{
      background:rgba(91,116,247,.12);
      color:#fff !important;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a:hover .bm-nav-arrow{
      color:#cbd5e1;
      opacity:1;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a.active{
      color:#fff !important;
      background:linear-gradient(135deg, rgba(91,116,247,.88), rgba(91,116,247,.64)) !important;
      border-color:rgba(255,255,255,.08);
      box-shadow:0 8px 24px rgba(91,116,247,.18);
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a.active .icon{
      background:rgba(255,255,255,.14);
      color:#fff !important;
    }

    :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a.active .bm-nav-arrow{
      color:#fff;
      opacity:1;
    }

    /* Bloque social compacto e independiente del menú */
    :where(html[data-bm-shell]) .bm-sidebar-modern{
      display:flex;
      flex-direction:column;
      min-height:100vh;
    }

    :where(html[data-bm-shell]) .bm-sidebar-modern .sidebar-nav{
      flex:0 0 auto;
    }

    :where(html[data-bm-shell]) .bm-social-panel{
      position:relative;
      z-index:1;
      margin-top:auto;
      padding-top:16px;
    }

    :where(html[data-bm-shell]) .bm-social-panel::before{
      content:"";
      display:block;
      height:1px;
      margin:0 6px 11px;
      background:linear-gradient(90deg, transparent, rgba(148,163,184,.20), transparent);
    }

    :where(html[data-bm-shell]) .bm-social-card{
      padding:0 2px;
      border:0;
      background:transparent;
      box-shadow:none;
    }

    :where(html[data-bm-shell]) .bm-social-heading{
      display:flex;
      align-items:center;
      gap:7px;
      margin:0 2px 8px;
      color:#7f8ba3;
      font-size:.59rem;
      line-height:1;
      font-weight:850;
      letter-spacing:.13em;
      text-transform:uppercase;
    }

    :where(html[data-bm-shell]) .bm-social-heading-dot{
      width:5px;
      height:5px;
      flex:0 0 5px;
      border-radius:50%;
      background:#6d7cff;
      box-shadow:0 0 0 3px rgba(91,116,247,.10);
    }

    :where(html[data-bm-shell]) .bm-social-actions{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:7px;
    }

    :where(html[data-bm-shell]) .bm-social-action{
      min-width:0;
      min-height:40px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      padding:7px 8px;
      border:1px solid rgba(148,163,184,.11);
      border-radius:12px;
      background:rgba(148,163,184,.035);
      color:#cbd5e1 !important;
      text-decoration:none !important;
      transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    }

    :where(html[data-bm-shell]) .bm-social-action:hover{
      transform:translateY(-1px);
      border-color:rgba(129,140,248,.25);
      background:rgba(91,116,247,.08);
      color:#fff !important;
    }

    :where(html[data-bm-shell]) .bm-social-action:focus-visible{
      outline:2px solid rgba(129,140,248,.72);
      outline-offset:2px;
    }

    :where(html[data-bm-shell]) .bm-social-action.is-disabled{
      cursor:not-allowed;
      opacity:.60;
    }

    :where(html[data-bm-shell]) .bm-social-icon{
      width:24px;
      height:24px;
      min-width:24px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:8px;
      color:#fff;
    }

    :where(html[data-bm-shell]) .bm-social-icon svg{
      width:14px;
      height:14px;
      display:block;
      fill:currentColor;
    }

    :where(html[data-bm-shell]) .bm-social-action--instagram .bm-social-icon{
      background:linear-gradient(135deg, #6f5cff 0%, #c43aa7 50%, #ff875f 100%);
      box-shadow:none;
    }

    :where(html[data-bm-shell]) .bm-social-action--telegram .bm-social-icon{
      background:linear-gradient(135deg, #35aee2, #2787d8);
      box-shadow:none;
    }

    :where(html[data-bm-shell]) .bm-social-copy{
      min-width:0;
    }

    :where(html[data-bm-shell]) .bm-social-title{
      display:block;
      min-width:0;
      overflow:hidden;
      color:inherit;
      font-size:.66rem;
      line-height:1.1;
      font-weight:780;
      letter-spacing:-.01em;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    :where(html[data-bm-shell]) .bm-social-subtitle,
:where(html[data-bm-shell]) .bm-social-open{
      display:none !important;
    }

    :where(html[data-bm-shell]) .main-wrapper{
      background:transparent !important;
    }

    :where(html[data-bm-shell]) .overlay{
      background:rgba(2,6,23,.52) !important;
      backdrop-filter:blur(5px);
    }

    @media (max-width: 1199px){
      :where(html[data-bm-shell]) .sidebar-nav-wrapper{
        box-shadow:16px 0 48px rgba(0,0,0,.24);
      }
    }

    @media (max-width: 767px){
      :where(html[data-bm-shell]) .sidebar-nav-wrapper{
        padding:16px 12px 16px !important;
      }
      :where(html[data-bm-shell]) .sidebar-nav-wrapper .navbar-logo{
        margin-bottom:16px !important;
      }
      :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a{
        min-height:48px;
        padding:11px 12px !important;
      }
      :where(html[data-bm-shell]) .sidebar-nav ul li.nav-item > a .text{
        font-size:.88rem;
      }
      :where(html[data-bm-shell]) .bm-free-products-group{
        padding:9px !important;
        border-radius:16px;
      }
      :where(html[data-bm-shell]) .bm-free-products-heading{
        margin-bottom:8px;
        font-size:.61rem;
      }
      :where(html[data-bm-shell]) .bm-free-product-link{
        min-height:41px;
        padding:6px 7px;
      }
      :where(html[data-bm-shell]) .bm-free-product-name{
        font-size:.74rem;
      }
      :where(html[data-bm-shell]) .bm-social-panel{
        padding-top:14px;
      }
      :where(html[data-bm-shell]) .bm-social-action{
        min-height:38px;
        padding:6px 7px;
      }
    }

/* ==================== VISTA: html[data-bm-shell] ==================== */
/* Origen: header.php:1 */
:where(html[data-bm-shell]):root{
    --bm-header-bg:rgba(15,23,42,.92);
    --bm-header-surface:rgba(30,41,59,.78);
    --bm-header-border:rgba(148,163,184,.14);
    --bm-header-text:#f8fafc;
    --bm-header-muted:#94a3b8;
    --bm-header-brand:#5b74f7;
    --bm-header-brand-soft:rgba(91,116,247,.14);
  }

  /* --- FIX & DARK MODE GOOGLE TRANSLATE --- */
  :where(html[data-bm-shell]) #google_translate_element{
    overflow: visible !important;
    display: inline-block;
    width: 100%;
  }

  :where(html[data-bm-shell]) .goog-te-combo{
    background-color: rgba(15,23,42,.82) !important;
    color: #ffffff !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    font-family: inherit;
    outline: none;
    box-shadow: none !important;
    width: 100%;
    cursor: pointer;
    min-height: 40px;
    font-weight: 600 !important;
  }

  :where(html[data-bm-shell]) .goog-te-combo:hover,
:where(html[data-bm-shell]) .goog-te-combo:focus{
    background-color: rgba(30,41,59,.94) !important;
    border-color: rgba(91,116,247,.40) !important;
  }

  :where(html[data-bm-shell]) .goog-te-gadget{
    font-size: 0 !important;
    color: transparent !important;
    margin-top: 0 !important;
  }

  :where(html[data-bm-shell]) .goog-te-gadget .goog-te-combo{
    font-size: 13px !important;
    margin: 0 !important;
    vertical-align: middle;
  }

  :where(html[data-bm-shell]) .goog-te-banner-frame{
    display: none !important;
  }

  :where(html[data-bm-shell]) body{
    top: 0px !important;
  }

  :where(html[data-bm-shell]) .header.bm-header-modern{
    background:rgba(15,23,42,.86) !important;
    border-bottom:1px solid var(--bm-header-border) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    position:sticky;
    top:0;
    z-index:1000;
  }

  :where(html[data-bm-shell]) .bm-header-modern .container-fluid{
    padding-left:24px;
    padding-right:24px;
  }

  :where(html[data-bm-shell]) .bm-header-modern .bm-header-shell{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }

  :where(html[data-bm-shell]) .bm-header-modern .header-left,
:where(html[data-bm-shell]) .bm-header-modern .header-right{
    display:flex;
    align-items:center;
  }

  :where(html[data-bm-shell]) .bm-header-modern .header-right{
    justify-content:flex-end;
    gap:12px;
  }

  :where(html[data-bm-shell]) .bm-header-modern .bm-menu-button{
    min-height:42px;
    padding:0 14px;
    border:1px solid rgba(148,163,184,.16) !important;
    border-radius:14px !important;
    background:rgba(91,116,247,.14) !important;
    color:#e7edff !important;
    box-shadow:none !important;
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-weight:760;
    line-height:1;
    letter-spacing:-.01em;
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
  }

  :where(html[data-bm-shell]) .bm-header-modern .bm-menu-button:hover{
    transform:translateY(-1px);
    background:rgba(91,116,247,.22) !important;
    border-color:rgba(91,116,247,.34) !important;
  }

  :where(html[data-bm-shell]) .bm-header-modern .bm-menu-button i{
    margin:0 !important;
  }

  :where(html[data-bm-shell]) .bm-header-modern .bm-language-box{
    width:188px;
    max-width:188px;
    position:relative;
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-box{
    margin-left:0 !important;
    position:relative;
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-box .dropdown-toggle{
    padding:0 !important;
    border-radius:14px;
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-box .dropdown-toggle::after{
    display:none !important;
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-info{
    padding:5px 8px 5px 5px;
    border-radius:14px;
    border:1px solid var(--bm-header-border);
    background:var(--bm-header-surface);
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-box .dropdown-toggle:hover .profile-info{
    background:rgba(51,65,85,.86);
    border-color:rgba(91,116,247,.26);
    transform:translateY(-1px);
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-info .info{
    display:flex;
    align-items:center;
    gap:10px;
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-info .image{
    width:40px;
    height:40px;
    border-radius:12px;
    overflow:hidden;
    background:rgba(91,116,247,.12);
    border:1px solid rgba(255,255,255,.08);
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-info .image img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-info h6{
    margin:0;
    color:var(--bm-header-text) !important;
    font-size:.93rem;
    font-weight:800 !important;
    line-height:1.15;
    max-width:150px;
  }

  :where(html[data-bm-shell]) .bm-header-modern .profile-info p{
    margin:2px 0 0;
    color:var(--bm-header-muted) !important;
    font-size:.75rem;
    font-weight:700;
    line-height:1.15;
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu{
    margin-top:12px !important;
    padding:10px !important;
    min-width:248px;
    border-radius:16px;
    background:rgba(15,23,42,.97) !important;
    border:1px solid var(--bm-header-border) !important;
    box-shadow:0 20px 50px rgba(0,0,0,.30);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu .author-info{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px !important;
    border-radius:12px;
    background:rgba(30,41,59,.70);
    border:1px solid rgba(148,163,184,.10);
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu .author-info .image{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:14px;
    overflow:hidden;
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu .author-info .image img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu .author-info h4{
    margin:0;
    color:var(--bm-header-text) !important;
    font-size:.9rem !important;
    font-weight:800;
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu .author-info a{
    color:var(--bm-header-muted) !important;
    font-size:.78rem !important;
    text-decoration:none;
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu .divider{
    height:1px;
    margin:10px 4px;
    background:rgba(148,163,184,.14);
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu li a,
:where(html[data-bm-shell]) .bm-header-modern .dropdown-menu .dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px !important;
    border-radius:12px;
    color:var(--bm-header-muted) !important;
    font-size:.92rem;
    font-weight:740;
    text-decoration:none;
    transition:background .18s ease, color .18s ease;
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu li a i,
:where(html[data-bm-shell]) .bm-header-modern .dropdown-menu .dropdown-item i{
    width:26px;
    height:26px;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(148,163,184,.10);
    color:#cbd5e1;
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu li a:hover,
:where(html[data-bm-shell]) .bm-header-modern .dropdown-menu .dropdown-item:hover{
    background:rgba(91,116,247,.12) !important;
    color:#fff !important;
  }

  :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu li a[href="logout.php"]:hover{
    background:rgba(248,113,113,.12) !important;
    color:#fecaca !important;
  }

  @media (max-width: 991px){
    :where(html[data-bm-shell]) .bm-header-modern .bm-language-box{
      width:172px;
      max-width:172px;
    }
  }

  @media (max-width: 767px){
    :where(html[data-bm-shell]) .bm-header-modern .container-fluid{
      padding-left:14px;
      padding-right:14px;
    }
    :where(html[data-bm-shell]) .bm-header-modern .bm-header-shell{
      min-height:66px;
      gap:10px;
    }
    :where(html[data-bm-shell]) .bm-header-modern .bm-menu-button{
      min-height:40px;
      padding:0 12px;
      border-radius:12px !important;
      font-size:.92rem;
    }
    :where(html[data-bm-shell]) .bm-header-modern .bm-language-box{
      display:none;
    }
    :where(html[data-bm-shell]) .bm-header-modern .profile-info{
      padding:4px;
      border-radius:13px;
    }
    :where(html[data-bm-shell]) .bm-header-modern .profile-info .image{
      width:38px;
      height:38px;
      border-radius:12px;
    }
    :where(html[data-bm-shell]) .bm-header-modern .profile-info h6,
:where(html[data-bm-shell]) .bm-header-modern .profile-info p{
      display:none;
    }
    :where(html[data-bm-shell]) .bm-header-modern .dropdown-menu{
      min-width:230px;
    }
  }

/* ==================== 3. VISTAS ============================ */

/* ==================== VISTA: html[data-bm-page="afiliado"] ==================== */
/* Origen: afiliado.php:936 */
:where(html[data-bm-page="afiliado"]):root{
            --bg: #070b16;
            --bg-2: #0b1224;
            --panel: rgba(12, 18, 34, 0.88);
            --panel-strong: rgba(15, 23, 42, 0.96);
            --card: rgba(18, 27, 48, 0.78);
            --card-hover: rgba(24, 36, 64, 0.90);
            --text: #f8fafc;
            --muted: #94a3b8;
            --muted2: #cbd5e1;
            --accent: #5b6ff7;
            --accent-2: #7c5cff;
            --accent-soft: rgba(91, 111, 247, 0.16);
            --success: #2dd4bf;
            --success-soft: rgba(45, 212, 191, 0.12);
            --rare: #f59e0b;
            --rare-2: #fb7185;
            --rare-soft: rgba(245, 158, 11, 0.13);
            --surface-soft: rgba(255, 255, 255, 0.055);
            --surface-soft-2: rgba(255, 255, 255, 0.085);
            --border: rgba(255, 255, 255, 0.105);
            --border-strong: rgba(255, 255, 255, 0.18);
            --strike: rgba(183, 193, 212, 0.85);
            --shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
            --shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.24);
            --radius-lg: 30px;
            --radius-md: 22px;
            --radius-sm: 16px;
        }

        :where(html[data-bm-page="afiliado"]) *{ box-sizing: border-box; }

        :where(html[data-bm-page="afiliado"]):is(html){
            min-height: 100%;
            background: var(--bg);
        }

        :where(html[data-bm-page="afiliado"]) body{
            margin: 0;
            min-height: 100vh;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 9% 7%, rgba(91, 111, 247, 0.22), transparent 28%),
                radial-gradient(circle at 86% 2%, rgba(45, 212, 191, 0.10), transparent 24%),
                radial-gradient(circle at 78% 88%, rgba(124, 92, 255, 0.12), transparent 30%),
                linear-gradient(145deg, #050816 0%, #0b1224 48%, #070b16 100%);
            overflow-x: hidden;
        }

        :where(html[data-bm-page="afiliado"]) body::before{
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255,255,255,0.030) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.62), transparent 72%);
        }

        :where(html[data-bm-page="afiliado"]) a,
:where(html[data-bm-page="afiliado"]) button{ -webkit-tap-highlight-color: transparent; }

        :where(html[data-bm-page="afiliado"]) .page{
            width: 100%;
            max-width: 1080px;
            margin: 0 auto;
            padding: clamp(14px, 3vw, 32px) clamp(10px, 2.2vw, 22px) 40px;
            position: relative;
            z-index: 1;
            transition: filter 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
        }

        :where(html[data-bm-page="afiliado"]) body.needs-language .page{
            filter: blur(7px);
            transform: scale(0.985);
            pointer-events: none;
            user-select: none;
        }

        :where(html[data-bm-page="afiliado"]) .main-card{
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
                var(--panel);
            box-shadow: var(--shadow);
            backdrop-filter: blur(18px);
        }

        :where(html[data-bm-page="afiliado"]) .main-card::before{
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 12% 0%, rgba(91,111,247,0.20), transparent 31%),
                radial-gradient(circle at 100% 12%, rgba(45,212,191,0.09), transparent 26%);
        }

        :where(html[data-bm-page="afiliado"]) .hero,
:where(html[data-bm-page="afiliado"]) .links{ position: relative; z-index: 1; }

        :where(html[data-bm-page="afiliado"]) .hero{
            padding: clamp(20px, 3vw, 32px);
            border-bottom: 1px solid var(--border);
            background:
                linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.012)),
                rgba(255,255,255,0.012);
        }

        :where(html[data-bm-page="afiliado"]) .hero-top{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
        }

        :where(html[data-bm-page="afiliado"]) h1{
            margin: 0;
            max-width: 780px;
            font-size: clamp(1.55rem, 3.8vw, 2.55rem);
            line-height: 1.02;
            letter-spacing: -0.06em;
            font-weight: 950;
            text-wrap: balance;
        }

        :where(html[data-bm-page="afiliado"]) .language-switcher{
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(5, 9, 20, 0.38);
            flex: 0 0 auto;
        }

        :where(html[data-bm-page="afiliado"]) .language-switcher a{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            min-height: 31px;
            padding: 7px 10px;
            border-radius: 999px;
            color: var(--muted2);
            text-decoration: none;
            font-size: 0.73rem;
            font-weight: 950;
            letter-spacing: 0.05em;
            transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
        }

        :where(html[data-bm-page="afiliado"]) .language-switcher a:hover,
:where(html[data-bm-page="afiliado"]) .language-switcher a.active{
            color: #fff;
            background: linear-gradient(135deg, rgba(91,111,247,0.42), rgba(124,92,255,0.24));
            transform: translateY(-1px);
        }

        :where(html[data-bm-page="afiliado"]) .coupon-row{
            width: 100%;
            margin-top: 18px;
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 20px;
            background: rgba(5, 9, 20, 0.42);
            border: 1px solid var(--border);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
        }

        :where(html[data-bm-page="afiliado"]) .coupon-info{
            width: 100%;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            max-width: 100%;
        }

        :where(html[data-bm-page="afiliado"]) .coupon-label{
            color: var(--muted);
            font-size: 0.76rem;
            font-weight: 850;
            white-space: nowrap;
        }

        :where(html[data-bm-page="afiliado"]) .coupon-code{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            max-width: min(340px, 100%);
            padding: 7px 12px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(91,111,247,0.28), rgba(124,92,255,0.16));
            border: 1px solid rgba(139, 155, 255, 0.34);
            color: #fff;
            font-size: 0.84rem;
            font-weight: 950;
            letter-spacing: 0.055em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-shadow: 0 12px 28px rgba(91,111,247,0.13);
        }

        :where(html[data-bm-page="afiliado"]) .links{ padding: clamp(15px, 2.5vw, 24px); }

        :where(html[data-bm-page="afiliado"]) .category-filter{
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 16px;
            padding: 0 0 8px;
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.18) transparent;
            -webkit-overflow-scrolling: touch;
        }

        :where(html[data-bm-page="afiliado"]) .category-filter::-webkit-scrollbar{ height: 5px; }
        :where(html[data-bm-page="afiliado"]) .category-filter::-webkit-scrollbar-track{ background: transparent; }
        :where(html[data-bm-page="afiliado"]) .category-filter::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); border-radius: 999px; }

        :where(html[data-bm-page="afiliado"]) .category-pill{
            flex: 0 0 auto;
            border: 1px solid var(--border);
            cursor: pointer;
            padding: 9px 13px;
            border-radius: 999px;
            background: rgba(255,255,255,0.045);
            color: var(--muted2);
            font: inherit;
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1;
            white-space: nowrap;
            transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
        }

        :where(html[data-bm-page="afiliado"]) .category-pill:hover,
:where(html[data-bm-page="afiliado"]) .category-pill.active{
            background: linear-gradient(135deg, rgba(91,111,247,0.26), rgba(124,92,255,0.15));
            border-color: rgba(139,155,255,0.38);
            color: #fff;
            transform: translateY(-1px);
        }

        :where(html[data-bm-page="afiliado"]) .links-header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 16px;
        }

        :where(html[data-bm-page="afiliado"]) .links-title{
            margin: 0;
            color: #fff;
            font-size: clamp(1.04rem, 2.2vw, 1.22rem);
            line-height: 1.16;
            font-weight: 950;
            letter-spacing: -0.04em;
        }

        :where(html[data-bm-page="afiliado"]) .products-count{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--muted2);
            background: rgba(255,255,255,0.045);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 7px 10px;
            font-size: 0.70rem;
            font-weight: 950;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        :where(html[data-bm-page="afiliado"]) .products-grid{
            display: grid;
            gap: 14px;
        }

        :where(html[data-bm-page="afiliado"]) .product-card{
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(222px, 252px);
            gap: 16px;
            padding: 16px;
            border-radius: var(--radius-md);
            background:
                linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.022)),
                var(--card);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-soft);
            transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
            overflow: hidden;
            isolation: isolate;
        }

        :where(html[data-bm-page="afiliado"]) .product-card::before{
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 0% 0%, rgba(91,111,247,0.12), transparent 36%),
                linear-gradient(90deg, rgba(255,255,255,0.035), transparent 42%);
            opacity: 0.74;
            z-index: -1;
        }

        :where(html[data-bm-page="afiliado"]) .product-card:hover{
            background:
                linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.030)),
                var(--card-hover);
            border-color: rgba(139,155,255,0.30);
            box-shadow: 0 22px 58px rgba(0, 0, 0, 0.30);
            transform: translateY(-2px);
        }

        :where(html[data-bm-page="afiliado"]) .product-card.has-rare-offer{
            border-color: rgba(245, 158, 11, 0.34);
            background:
                linear-gradient(145deg, rgba(245,158,11,0.070), rgba(255,255,255,0.020) 46%, rgba(251,113,133,0.035)),
                var(--card);
        }

        :where(html[data-bm-page="afiliado"]) .product-card.has-rare-offer::before{
            background:
                radial-gradient(circle at 0% 0%, rgba(245,158,11,0.16), transparent 34%),
                radial-gradient(circle at 100% 0%, rgba(251,113,133,0.10), transparent 32%),
                linear-gradient(90deg, rgba(255,255,255,0.035), transparent 42%);
        }

        :where(html[data-bm-page="afiliado"]) .discount-flag{
            position: absolute;
            top: 14px;
            right: 14px;
            min-width: 64px;
            padding: 7px 10px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff;
            font-size: 0.76rem;
            font-weight: 950;
            letter-spacing: -0.015em;
            text-align: center;
            z-index: 3;
            box-shadow: 0 12px 30px rgba(91, 111, 247, 0.28);
            border: 1px solid rgba(255,255,255,0.16);
        }

        :where(html[data-bm-page="afiliado"]) .has-rare-offer .discount-flag{
            background: linear-gradient(135deg, var(--rare), var(--rare-2));
            box-shadow: 0 13px 32px rgba(245, 158, 11, 0.24);
        }

        :where(html[data-bm-page="afiliado"]) .product-card.has-discount .product-main{
            padding-top: 2px;
            padding-right: 74px;
        }

        :where(html[data-bm-page="afiliado"]) .product-main{
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr);
            gap: 14px;
            align-items: flex-start;
            min-width: 0;
        }

        :where(html[data-bm-page="afiliado"]) .icon{
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border-radius: 18px;
            background: linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035));
            border: 1px solid var(--border);
            font-size: 1.27rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
        }

        :where(html[data-bm-page="afiliado"]) .content{ min-width: 0; }

        :where(html[data-bm-page="afiliado"]) .topline{
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        :where(html[data-bm-page="afiliado"]) .title{
            color: #fff;
            font-size: 1.05rem;
            font-weight: 950;
            line-height: 1.22;
            letter-spacing: -0.028em;
            padding-right: 2px;
        }

        :where(html[data-bm-page="afiliado"]) .badge{
            display: inline-flex;
            align-items: center;
            min-height: 25px;
            padding: 5px 9px;
            border-radius: 999px;
            background: rgba(91,111,247,0.13);
            border: 1px solid rgba(139,155,255,0.22);
            color: #e7eaff;
            font-size: 0.68rem;
            font-weight: 950;
            line-height: 1;
        }

        :where(html[data-bm-page="afiliado"]) .has-rare-offer .badge{
            background: rgba(245,158,11,0.12);
            border-color: rgba(245,158,11,0.22);
            color: #fff3dc;
        }

        :where(html[data-bm-page="afiliado"]) .description{
            margin-top: 7px;
            color: var(--muted);
            font-size: 0.86rem;
            line-height: 1.48;
            display: block;
            overflow: visible;
            overflow-wrap: anywhere;
            word-break: normal;
            white-space: pre-line;
        }

        :where(html[data-bm-page="afiliado"]) .extras{
            margin-top: 12px;
            padding: 10px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(45,212,191,0.105), rgba(91,111,247,0.070));
            border: 1px solid rgba(255,255,255,0.115);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
        }

        :where(html[data-bm-page="afiliado"]) .extras-heading{
            display: flex;
            align-items: center;
            gap: 7px;
            color: #eef6ff;
            font-size: 0.70rem;
            font-weight: 950;
            letter-spacing: 0.055em;
            text-transform: uppercase;
            line-height: 1.2;
            margin-bottom: 8px;
        }

        :where(html[data-bm-page="afiliado"]) .extras-heading::before{
            content: "";
            width: 7px;
            height: 7px;
            flex: 0 0 auto;
            border-radius: 999px;
            background: var(--success);
            box-shadow: 0 0 0 5px rgba(45,212,191,0.10);
        }

        :where(html[data-bm-page="afiliado"]) .extras-list{
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        :where(html[data-bm-page="afiliado"]) .extra-pill{
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 28px;
            padding: 6px 9px;
            border-radius: 999px;
            background: rgba(5, 9, 20, 0.28);
            border: 1px solid rgba(255,255,255,0.105);
            color: #e6edf7;
            font-size: 0.71rem;
            font-weight: 900;
            line-height: 1;
        }

        :where(html[data-bm-page="afiliado"]) .extra-pill.gift{
            background: rgba(45, 212, 191, 0.095);
            border-color: rgba(45, 212, 191, 0.22);
            color: #e7fffb;
        }

        :where(html[data-bm-page="afiliado"]) .countdown-box{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            padding: 7px 9px;
            border-radius: 999px;
            background: rgba(5,9,20,0.32);
            border: 1px solid var(--border);
            color: var(--muted2);
            font-size: 0.73rem;
            font-weight: 900;
            max-width: 100%;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }

        :where(html[data-bm-page="afiliado"]) .has-rare-offer .countdown-box{
            border-color: rgba(245, 158, 11, 0.25);
            background: rgba(245, 158, 11, 0.075);
        }

        :where(html[data-bm-page="afiliado"]) .countdown-title{
            color: var(--muted);
            font-weight: 950;
            white-space: nowrap;
        }

        :where(html[data-bm-page="afiliado"]) .countdown-inline{
            display: inline-flex;
            align-items: center;
            gap: 3px;
            color: #e5e7eb;
            white-space: nowrap;
        }

        :where(html[data-bm-page="afiliado"]) .countdown-inline strong{
            color: #fff;
            font-weight: 950;
        }

        :where(html[data-bm-page="afiliado"]) .offer-note{
            margin-top: 8px;
            color: var(--muted2);
            font-size: 0.75rem;
            line-height: 1.35;
        }

        :where(html[data-bm-page="afiliado"]) .price-actions{
            align-self: stretch;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
            min-width: 0;
        }

        :where(html[data-bm-page="afiliado"]) .price-box{
            position: relative;
            padding: 14px;
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.032));
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.075);
            overflow: hidden;
        }

        :where(html[data-bm-page="afiliado"]) .price-box::before{
            content: "";
            position: absolute;
            width: 120px;
            height: 120px;
            border-radius: 999px;
            right: -70px;
            top: -76px;
            background: rgba(91,111,247,0.20);
            pointer-events: none;
        }

        :where(html[data-bm-page="afiliado"]) .has-rare-offer .price-box{
            border-color: rgba(245, 158, 11, 0.25);
        }

        :where(html[data-bm-page="afiliado"]) .has-rare-offer .price-box::before{
            background: rgba(245,158,11,0.22);
        }

        :where(html[data-bm-page="afiliado"]) .price-head{
            position: relative;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-direction: column;
            gap: 7px;
        }

        :where(html[data-bm-page="afiliado"]) .price-head span{
            color: var(--muted);
            font-size: 0.66rem;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: 0.075em;
            line-height: 1.15;
        }

        :where(html[data-bm-page="afiliado"]) .price-head strong{
            color: #fff;
            font-size: clamp(1.34rem, 2.8vw, 1.76rem);
            font-weight: 950;
            line-height: 0.98;
            letter-spacing: -0.062em;
            text-align: left;
            white-space: nowrap;
        }

        :where(html[data-bm-page="afiliado"]) .price-summary{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 6px;
            margin-top: 8px;
        }

        :where(html[data-bm-page="afiliado"]) .mini-price{
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            color: var(--muted);
            font-size: 0.69rem;
            font-weight: 900;
            line-height: 1;
        }

        :where(html[data-bm-page="afiliado"]) .mini-price del{
            color: #aeb7c8;
            font-size: 0.73rem;
            font-weight: 950;
            white-space: nowrap;
            text-decoration-thickness: 2px;
            text-decoration-color: var(--strike);
        }

        :where(html[data-bm-page="afiliado"]) .button-row{
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        :where(html[data-bm-page="afiliado"]) .btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 10px 12px;
            border-radius: 15px;
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 950;
            line-height: 1.1;
            transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
            text-align: center;
        }

        :where(html[data-bm-page="afiliado"]) .btn-primary{
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff;
            box-shadow: 0 14px 30px rgba(91,111,247,0.22);
            border: 1px solid rgba(255,255,255,0.13);
        }

        :where(html[data-bm-page="afiliado"]) .has-rare-offer .btn-primary{
            background: linear-gradient(135deg, var(--rare), var(--rare-2));
            box-shadow: 0 14px 30px rgba(245,158,11,0.20);
        }

        :where(html[data-bm-page="afiliado"]) .btn-primary:hover{
            transform: translateY(-1px);
            box-shadow: 0 18px 38px rgba(91,111,247,0.28);
        }

        :where(html[data-bm-page="afiliado"]) .has-rare-offer .btn-primary:hover{
            box-shadow: 0 18px 38px rgba(245,158,11,0.25);
        }

        :where(html[data-bm-page="afiliado"]) .btn-secondary{
            background: rgba(255,255,255,0.055);
            color: #e5e7eb;
            border: 1px solid var(--border);
        }

        :where(html[data-bm-page="afiliado"]) .btn-secondary:hover{
            background: rgba(255,255,255,0.085);
            border-color: var(--border-strong);
            transform: translateY(-1px);
        }

        :where(html[data-bm-page="afiliado"]) .not-found{
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 24px;
            position: relative;
            z-index: 1;
        }

        :where(html[data-bm-page="afiliado"]) .not-found-card{
            width: 100%;
            max-width: 520px;
            text-align: center;
            padding: 34px;
            background: var(--panel-strong);
            border: 1px solid var(--border);
            border-radius: 26px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(16px);
        }

        :where(html[data-bm-page="afiliado"]) .not-found-card h1{
            font-size: 2rem;
            margin-bottom: 12px;
        }

        :where(html[data-bm-page="afiliado"]) .not-found-card p{
            color: var(--muted);
            margin: 0;
            line-height: 1.55;
        }

        :where(html[data-bm-page="afiliado"]) .empty{
            padding: 34px 18px;
            text-align: center;
            color: var(--muted);
            border: 1px dashed rgba(255,255,255,0.17);
            border-radius: 20px;
            background: rgba(255,255,255,0.04);
        }

        :where(html[data-bm-page="afiliado"]) .language-modal{
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            z-index: 30;
            background:
                radial-gradient(circle at 50% 10%, rgba(91,111,247,0.18), transparent 30%),
                rgba(3, 7, 18, 0.74);
            backdrop-filter: blur(14px);
        }

        :where(html[data-bm-page="afiliado"]) body.needs-language .language-modal{
            display: flex;
        }

        :where(html[data-bm-page="afiliado"]) .language-card{
            width: min(100%, 560px);
            position: relative;
            overflow: hidden;
            padding: clamp(22px, 4vw, 34px);
            border-radius: 30px;
            border: 1px solid rgba(255,255,255,0.14);
            background:
                linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028)),
                rgba(15, 23, 42, 0.94);
            box-shadow: 0 30px 90px rgba(0,0,0,0.48);
        }

        :where(html[data-bm-page="afiliado"]) .language-card::before{
            content: "";
            position: absolute;
            width: 260px;
            height: 260px;
            right: -130px;
            top: -150px;
            border-radius: 999px;
            background: rgba(91,111,247,0.24);
            pointer-events: none;
        }

        :where(html[data-bm-page="afiliado"]) .language-kicker{
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            color: #dbeafe;
            background: rgba(91,111,247,0.13);
            border: 1px solid rgba(139,155,255,0.22);
            border-radius: 999px;
            padding: 7px 10px;
            font-size: 0.74rem;
            font-weight: 950;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        :where(html[data-bm-page="afiliado"]) .language-card h2{
            position: relative;
            margin: 0;
            color: #fff;
            font-size: clamp(1.45rem, 4vw, 2.08rem);
            line-height: 1.05;
            letter-spacing: -0.055em;
            font-weight: 950;
        }

        :where(html[data-bm-page="afiliado"]) .language-card p{
            position: relative;
            margin: 12px 0 0;
            color: var(--muted2);
            line-height: 1.55;
            font-size: 0.96rem;
        }

        :where(html[data-bm-page="afiliado"]) .language-card p span{
            display: block;
        }

        :where(html[data-bm-page="afiliado"]) .language-options{
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 20px;
        }

        :where(html[data-bm-page="afiliado"]) .language-option{
            cursor: pointer;
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: 20px;
            min-height: 82px;
            padding: 14px;
            background: rgba(255,255,255,0.055);
            color: #fff;
            text-align: left;
            transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
            font: inherit;
        }

        :where(html[data-bm-page="afiliado"]) .language-option:hover{
            transform: translateY(-2px);
            border-color: rgba(139,155,255,0.42);
            background: rgba(91,111,247,0.13);
            box-shadow: 0 18px 40px rgba(0,0,0,0.24);
        }

        :where(html[data-bm-page="afiliado"]) .language-option strong{
            display: block;
            font-size: 1rem;
            font-weight: 950;
            letter-spacing: -0.02em;
        }

        :where(html[data-bm-page="afiliado"]) .language-option small{
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 0.78rem;
            line-height: 1.25;
            font-weight: 800;
        }

        @media (max-width: 820px){
            :where(html[data-bm-page="afiliado"]) .product-card{ grid-template-columns: 1fr; }

            :where(html[data-bm-page="afiliado"]) .price-actions{
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(160px, 210px);
                align-items: stretch;
            }

            :where(html[data-bm-page="afiliado"]) .button-row{ align-content: stretch; }
        }

        @media (max-width: 640px){
            :where(html[data-bm-page="afiliado"]) .main-card{ border-radius: 24px; }
            :where(html[data-bm-page="afiliado"]) .hero{ padding: 20px 15px 16px; }
            :where(html[data-bm-page="afiliado"]) .hero-top{ flex-direction: column; }
            :where(html[data-bm-page="afiliado"]) .language-switcher{ align-self: flex-start; }
            :where(html[data-bm-page="afiliado"]) .links{ padding: 16px 12px 14px; }
            :where(html[data-bm-page="afiliado"]) .category-filter{ margin-bottom: 13px; padding-bottom: 7px; }
            :where(html[data-bm-page="afiliado"]) .category-pill{ padding: 8px 11px; font-size: 0.76rem; }
            :where(html[data-bm-page="afiliado"]) .links-header{ align-items: flex-start; margin-bottom: 13px; }
            :where(html[data-bm-page="afiliado"]) .products-count{ padding: 6px 9px; font-size: 0.67rem; }
            :where(html[data-bm-page="afiliado"]) .coupon-row{ max-width: 100%; }
            :where(html[data-bm-page="afiliado"]) .coupon-info{ flex-wrap: nowrap; }
            :where(html[data-bm-page="afiliado"]) .product-card{ padding: 14px; border-radius: 21px; }
            :where(html[data-bm-page="afiliado"]) .product-main{ grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
            :where(html[data-bm-page="afiliado"]) .icon{ width: 46px; height: 46px; border-radius: 16px; }
            :where(html[data-bm-page="afiliado"]) .product-card.has-discount .product-main{ padding-right: 70px; }
            :where(html[data-bm-page="afiliado"]) .discount-flag{ top: 12px; right: 12px; }
        }

        @media (max-width: 500px){
            :where(html[data-bm-page="afiliado"]) .page{ padding: 12px 9px 28px; }
            :where(html[data-bm-page="afiliado"]) h1{ font-size: 1.42rem; letter-spacing: -0.052em; }
            :where(html[data-bm-page="afiliado"]) .coupon-info{ align-items: flex-start; flex-direction: column; gap: 7px; }
            :where(html[data-bm-page="afiliado"]) .coupon-code{ max-width: 100%; }
            :where(html[data-bm-page="afiliado"]) .links-header{ flex-direction: column; gap: 8px; }
            :where(html[data-bm-page="afiliado"]) .products-count{ align-self: flex-start; }
            :where(html[data-bm-page="afiliado"]) .product-card{ padding: 13px; }
            :where(html[data-bm-page="afiliado"]) .product-main{ grid-template-columns: 1fr; }
            :where(html[data-bm-page="afiliado"]) .product-card.has-discount .product-main{ padding-top: 38px; padding-right: 0; }
            :where(html[data-bm-page="afiliado"]) .discount-flag{ left: 13px; right: auto; }
            :where(html[data-bm-page="afiliado"]) .title{ font-size: 1.01rem; }
            :where(html[data-bm-page="afiliado"]) .description{ font-size: 0.84rem; }
            :where(html[data-bm-page="afiliado"]) .extras{ padding: 9px; }
            :where(html[data-bm-page="afiliado"]) .extras-heading{ font-size: 0.66rem; }
            :where(html[data-bm-page="afiliado"]) .price-actions{ grid-template-columns: 1fr; }
            :where(html[data-bm-page="afiliado"]) .button-row{ grid-template-columns: 1fr 1fr; }
            :where(html[data-bm-page="afiliado"]) .countdown-box{ width: 100%; justify-content: space-between; border-radius: 14px; }
            :where(html[data-bm-page="afiliado"]) .language-options{ grid-template-columns: 1fr; }
            :where(html[data-bm-page="afiliado"]) .language-option{ min-height: 70px; }
        }

        @media (max-width: 380px){
            :where(html[data-bm-page="afiliado"]) .button-row{ grid-template-columns: 1fr; }
            :where(html[data-bm-page="afiliado"]) .price-head strong{ white-space: normal; }
            :where(html[data-bm-page="afiliado"]) .countdown-box{ align-items: flex-start; flex-direction: column; gap: 4px; }
        }

/* ==================== VISTA: html[data-bm-page="check_updates"] ==================== */
/* Origen: check_updates.php:89 */
/* ========== PREMIUM SAAS UI VARIABLES (DARK MODE) ========== */
    :where(html[data-bm-page="check_updates"]):root{
        /* Fondos Dark Mode (Slate Palette) */
        --bg-body: #0f172a; /* Slate 900 */
        --surface-white: #1e293b; /* Slate 800 */
        --surface-hover: #334155; /* Slate 700 */
        
        /* Tipografía Dark Mode */
        --text-primary: #f8fafc; /* Slate 50 */
        --text-secondary: #94a3b8; /* Slate 400 */
        --text-light: #64748b; /* Slate 500 */
        
        /* Colores de Marca Profesional */
        --brand-primary: #365CF5; /* Azul Brillante */
        --brand-primary-hover: #5a7af7;
        
        /* Colores de Estado Refinados (Dark Backgrounds) */
        --success-soft: rgba(33, 150, 83, 0.15);
        --success-text: #4ade80; /* Green 400 */
        --warning-soft: rgba(245, 158, 11, 0.15);
        --warning-text: #fbbf24; /* Amber 400 */
        --danger-soft: rgba(213, 1, 0, 0.15);
        --danger-text: #f87171; /* Red 400 */
        
        /* Nuevos colores para estado Disponible/Neutral */
        --info-soft: rgba(59, 130, 246, 0.15);
        --info-text: #60a5fa; /* Blue 400 */

        /* Bordes y Sombras Suaves */
        --border-subtle: #334155; /* Slate 700 */
        --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
        
        --radius-card: 12px;
        --radius-btn: 8px;
        
        --font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    :where(html[data-bm-page="check_updates"]) body{
        background-color: var(--bg-body);
        font-family: var(--font-main);
        color: var(--text-primary);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }
    
    :where(html[data-bm-page="check_updates"]) a{ text-decoration: none; transition: color 0.2s; }
    
    /* Layout */
    :where(html[data-bm-page="check_updates"]) .dashboard-container{
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 20px 80px 20px;
    }

    /* ========== HEADER & KPI SECTION ========== */
    :where(html[data-bm-page="check_updates"]) .header-section{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 3rem;
        flex-wrap: wrap;
        gap: 25px;
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: 25px;
    }
    
    :where(html[data-bm-page="check_updates"]) .page-title h2{
        font-weight: 800;
        font-size: 2rem;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
        letter-spacing: -0.03em;
    }
    
    :where(html[data-bm-page="check_updates"]) .page-subtitle{
        color: var(--text-secondary);
        font-size: 1.05rem;
    }

    /* KPI Pills */
    :where(html[data-bm-page="check_updates"]) .kpi-row{
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }
    
    :where(html[data-bm-page="check_updates"]) .kpi-pill{
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--surface-white);
        border: 1px solid var(--border-subtle);
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-secondary);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        transition: all 0.2s;
        cursor: default;
    }
    :where(html[data-bm-page="check_updates"]) .kpi-pill:hover{ transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.4); background: var(--surface-hover); color: var(--text-primary); }
    
    :where(html[data-bm-page="check_updates"]) .kpi-dot{ width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    :where(html[data-bm-page="check_updates"]) .kpi-dot.red{ background-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
    :where(html[data-bm-page="check_updates"]) .kpi-dot.green{ background-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
    :where(html[data-bm-page="check_updates"]) .kpi-dot.amber{ background-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
    :where(html[data-bm-page="check_updates"]) .kpi-dot.blue{ background-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

    /* ========== SEARCH BAR ========== */
    :where(html[data-bm-page="check_updates"]) .search-container{
        position: relative;
        max-width: 480px;
        width: 100%;
        margin-bottom: 2.5rem;
    }
    
    :where(html[data-bm-page="check_updates"]) .search-input{
        width: 100%;
        padding: 14px 16px 14px 50px;
        border-radius: 12px;
        border: 2px solid transparent;
        background: var(--surface-white);
        font-size: 1rem;
        color: var(--text-primary);
        box-shadow: var(--shadow-card);
        transition: all 0.2s ease;
    }
    
    :where(html[data-bm-page="check_updates"]) .search-input:focus{
        outline: none;
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 4px rgba(54, 92, 245, 0.2);
        background: #162032; 
    }
    
    :where(html[data-bm-page="check_updates"]) .search-input::placeholder{ color: var(--text-light); }
    
    :where(html[data-bm-page="check_updates"]) .search-icon{
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-light);
        pointer-events: none;
    }

    /* ========== PRODUCT CARD ========== */
    :where(html[data-bm-page="check_updates"]) .premium-card{
        background: var(--surface-white);
        border-radius: var(--radius-card);
        border: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-card);
        margin-bottom: 28px;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    :where(html[data-bm-page="check_updates"]) .premium-card:hover{
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--brand-primary);
    }
    
    /* Card Header */
    :where(html[data-bm-page="check_updates"]) .card-top{
        padding: 24px 28px;
        border-bottom: 1px solid var(--border-subtle);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--surface-white);
    }
    
    :where(html[data-bm-page="check_updates"]) .product-meta{
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }
    
    :where(html[data-bm-page="check_updates"]) .order-badge{
        font-family: 'Roboto Mono', 'Menlo', monospace;
        font-size: 0.85rem;
        background: var(--bg-body);
        color: var(--text-secondary);
        padding: 6px 10px;
        border-radius: 8px;
        font-weight: 600;
        letter-spacing: 0.5px;
        border: 1px solid var(--border-subtle);
    }
    
    :where(html[data-bm-page="check_updates"]) .product-name{
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--text-primary);
        letter-spacing: -0.02em;
    }
    
    :where(html[data-bm-page="check_updates"]) .status-badge{
        padding: 6px 14px;
        border-radius: 30px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    
    :where(html[data-bm-page="check_updates"]) .status-badge.active{ background: var(--success-soft); color: var(--success-text); }
    :where(html[data-bm-page="check_updates"]) .status-badge.available{ background: var(--info-soft); color: var(--info-text); }
    :where(html[data-bm-page="check_updates"]) .status-badge.pending{ background: var(--warning-soft); color: var(--warning-text); }

    /* Card Body - Adaptado para ocupar el 100% (sin barra lateral de acciones) */
    :where(html[data-bm-page="check_updates"]) .card-content{
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    /* Left: Device Info */
    :where(html[data-bm-page="check_updates"]) .device-panel{
        padding: 28px;
        background: #162032; 
        border-right: none;
        display: flex;
        flex-direction: column;
    }
    
    :where(html[data-bm-page="check_updates"]) .info-label{
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--text-light);
        font-weight: 800;
        margin-bottom: 12px;
        letter-spacing: 0.08em;
    }
    
    :where(html[data-bm-page="check_updates"]) .device-box{
        background: var(--bg-body);
        border: 2px solid var(--border-subtle);
        border-radius: 12px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 400px;
        transition: border-color 0.2s;
    }
    :where(html[data-bm-page="check_updates"]) .device-box:hover{ border-color: var(--text-secondary); }
    
    :where(html[data-bm-page="check_updates"]) .mac-address{
        font-family: 'Roboto Mono', monospace;
        color: var(--text-primary);
        font-weight: 600;
        font-size: 1rem;
    }
    
    :where(html[data-bm-page="check_updates"]) .copy-btn{
        background: var(--surface-hover);
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 6px;
        border-radius: 6px;
        transition: all 0.2s;
        display: flex; align-items: center; justify-content: center;
    }
    :where(html[data-bm-page="check_updates"]) .copy-btn:hover{ background: var(--border-subtle); color: var(--brand-primary); }
    
    :where(html[data-bm-page="check_updates"]) .no-device-msg{
        color: var(--text-secondary);
        font-size: 0.95rem;
        margin-bottom: 16px;
        font-style: italic;
    }

    /* Buttons */
    :where(html[data-bm-page="check_updates"]) .btn-pro{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 24px;
        border-radius: var(--radius-btn);
        font-weight: 700;
        font-size: 0.95rem;
        transition: all 0.2s ease;
        cursor: pointer;
        border: 2px solid transparent;
        white-space: nowrap;
        gap: 8px;
    }
    
    :where(html[data-bm-page="check_updates"]) .btn-pro-primary{
        background: var(--brand-primary);
        color: white;
        box-shadow: 0 4px 6px -1px rgba(54, 92, 245, 0.2);
    }
    :where(html[data-bm-page="check_updates"]) .btn-pro-primary:hover{
        background: var(--brand-primary-hover);
        box-shadow: 0 6px 10px -1px rgba(54, 92, 245, 0.3);
        transform: translateY(-1px);
        color: white;
    }

    /* Responsive */
    @media (max-width: 768px){
        :where(html[data-bm-page="check_updates"]) .dashboard-container{ padding: 20px 15px; }
        :where(html[data-bm-page="check_updates"]) .header-section{ flex-direction: column; align-items: flex-start; gap: 15px; padding-bottom: 20px; margin-bottom: 2rem; }
        :where(html[data-bm-page="check_updates"]) .card-top{ flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
        :where(html[data-bm-page="check_updates"]) .product-meta{ width: 100%; justify-content: space-between; }
        :where(html[data-bm-page="check_updates"]) .device-panel{ padding: 20px; }
        :where(html[data-bm-page="check_updates"]) .btn-pro{ width: 100%; }
        
        :where(html[data-bm-page="check_updates"]) .update-banner{ flex-direction: column; align-items: stretch; }
        :where(html[data-bm-page="check_updates"]) .update-action .btn-update-action{ width: 100%; justify-content: center; }
    }

    /* Update Banner Styles - Modern & Dynamic */
    :where(html[data-bm-page="check_updates"]) .update-banner{
        margin: 0;
        padding: 22px 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        border-bottom: 1px solid var(--border-subtle);
        position: relative;
        overflow: hidden;
        animation: bm-c2693889cb-slideDownFade 0.5s ease-out forwards;
    }
    :where(html[data-bm-page="check_updates"]) .update-banner::before{
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
        pointer-events: none;
    }
    :where(html[data-bm-page="check_updates"]) .update-banner-content{
        display: flex;
        align-items: center;
        gap: 20px;
        position: relative;
        z-index: 1;
    }
    :where(html[data-bm-page="check_updates"]) .update-icon-wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 14px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    :where(html[data-bm-page="check_updates"]) .update-text{
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--text-primary);
    }
    :where(html[data-bm-page="check_updates"]) .update-text strong{
        font-weight: 800;
        letter-spacing: -0.01em;
    }
    :where(html[data-bm-page="check_updates"]) .update-text code{
        background: rgba(0,0,0,0.25);
        padding: 4px 8px;
        border-radius: 6px;
        font-family: 'Roboto Mono', monospace;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.1);
        font-size: 0.9rem;
    }
    :where(html[data-bm-page="check_updates"]) .update-note{
        margin-top: 8px;
        font-size: 0.85rem;
        color: rgba(255,255,255,0.65);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    /* Info (Level 0) */
    :where(html[data-bm-page="check_updates"]) .update-banner-info{
        background: rgba(54, 92, 245, 0.12);
        border-left: 5px solid var(--brand-primary);
    }
    :where(html[data-bm-page="check_updates"]) .update-banner-info .update-icon-wrapper{ background: linear-gradient(135deg, #365CF5 0%, #6b88fb 100%); }
    
    /* Warning (Level 2) */
    :where(html[data-bm-page="check_updates"]) .update-banner-warning{
        background: rgba(245, 158, 11, 0.12);
        border-left: 5px solid var(--warning-text);
    }
    :where(html[data-bm-page="check_updates"]) .update-banner-warning .update-icon-wrapper{ background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
    
    /* Danger (Level 3) */
    :where(html[data-bm-page="check_updates"]) .update-banner-danger{
        background: rgba(239, 68, 68, 0.12);
        border-left: 5px solid var(--danger-text);
        animation: bm-c2693889cb-pulseDangerBg 2.5s infinite;
    }
    :where(html[data-bm-page="check_updates"]) .update-banner-danger .update-icon-wrapper{ 
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); 
        animation: bm-c2693889cb-shakeIcon 4s infinite ease-in-out; 
    }

    /* Modern Button inside banner */
    :where(html[data-bm-page="check_updates"]) .btn-update-action{
        background: #ffffff;
        color: #0f172a;
        border: none;
        padding: 0 24px;
        height: 46px;
        border-radius: 10px;
        font-weight: 800;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        white-space: nowrap;
        position: relative;
        z-index: 1;
        text-decoration: none;
    }
    :where(html[data-bm-page="check_updates"]) .btn-update-action:hover{
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        background: #f8fafc;
    }
    :where(html[data-bm-page="check_updates"]) .update-banner-info .btn-update-action{ color: var(--brand-primary); }
    :where(html[data-bm-page="check_updates"]) .update-banner-warning .btn-update-action{ color: #d97706; }
    :where(html[data-bm-page="check_updates"]) .update-banner-danger .btn-update-action{ color: #dc2626; }

    /* Animations */
    @keyframes bm-c2693889cb-slideDownFade {
        from { opacity: 0; transform: translateY(-15px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes bm-c2693889cb-pulseDangerBg {
        0% { background: rgba(239, 68, 68, 0.12); }
        50% { background: rgba(239, 68, 68, 0.20); }
        100% { background: rgba(239, 68, 68, 0.12); }
    }
    @keyframes bm-c2693889cb-shakeIcon {
        0%, 100% { transform: rotate(0deg); }
        5%, 15%, 25%, 35%, 45% { transform: rotate(-6deg); }
        10%, 20%, 30%, 40% { transform: rotate(6deg); }
        50% { transform: rotate(0deg); }
    }

/* ==================== VISTA: html[data-bm-page="dashboard"] ==================== */
/* Origen: dashboard.php:1222 */
:where(html[data-bm-page="dashboard"]) .tj-access-gate-page{
      min-height: calc(100vh - 110px);
      padding: 32px 16px 48px;
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-gate-shell{
      width: min(940px, 100%);
      margin: 0 auto;
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-gate-card{
      position: relative;
      overflow: hidden;
      padding: clamp(24px, 5vw, 42px);
      border: 1px solid rgba(79, 108, 247, .30);
      border-radius: 22px;
      color: #f8fafc;
      background:
        radial-gradient(circle at 92% 8%, rgba(79, 108, 247, .24), transparent 34%),
        linear-gradient(145deg, rgba(17, 27, 46, .98), rgba(11, 18, 32, .98));
      box-shadow: 0 22px 55px rgba(2, 8, 23, .24);
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-gate-grid{
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-gate-icon{
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: #aebcff;
      background: rgba(79, 108, 247, .16);
      font-size: 29px;
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-kicker{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: #aebcff;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-gate-copy h1{
      margin: 0 0 12px;
      color: #fff;
      font-size: clamp(24px, 4vw, 34px);
      line-height: 1.18;
      letter-spacing: -.025em;
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-gate-copy > p{
      max-width: 760px;
      margin: 0;
      color: #c3cfde;
      font-size: 15px;
      line-height: 1.75;
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-action{
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 11px 18px;
      border-radius: 12px;
      border: 1px solid rgba(148, 163, 184, .24);
      color: #dbe4f0;
      background: rgba(255, 255, 255, .045);
      font: inherit;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    :where(html[data-bm-page="dashboard"]) .tj-access-action:hover{
      color: #fff;
      transform: translateY(-1px);
      border-color: rgba(174, 188, 255, .42);
      background: rgba(255, 255, 255, .075);
    }
    @media (max-width: 760px){
      :where(html[data-bm-page="dashboard"]) .tj-access-gate-grid{ grid-template-columns: 1fr; }
    }
    @media (max-width: 575.98px){
      :where(html[data-bm-page="dashboard"]) .tj-access-gate-page{ padding: 22px 12px 36px; }
      :where(html[data-bm-page="dashboard"]) .tj-access-actions > *{ width: 100%; }
    }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"] ==================== */
/* Origen: dashboard.php:1361, dashboardAnt.php:1232 */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 12px;
  margin: 18px 0 22px;
  transition: transform .28s ease, opacity .28s ease, max-height .28s ease, margin .28s ease;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert.alert-hidden{
  transform: translateY(-8px);
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-card{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  max-width: 100%;
  padding: 18px 18px;
  border-radius: 20px;
  border: 1px solid rgba(251, 146, 60, .34);
  background:
    radial-gradient(circle at top left, rgba(251, 146, 60, .28), transparent 34%),
    linear-gradient(135deg, rgba(69, 26, 3, .98) 0%, rgba(124, 45, 18, .98) 46%, rgba(15, 23, 42, .98) 100%);
  color: #ffedd5;
  box-shadow: 0 18px 42px rgba(2, 6, 23, .28), inset 0 1px 0 rgba(255,255,255,.08);
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 24%, transparent 48%);
  transform: translateX(-110%);
  animation: bm-926a7e6b8a-tjUpdateAlertShine 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bm-926a7e6b8a-tjUpdateAlertShine {
  0%, 52% { transform: translateX(-115%); }
  72%, 100% { transform: translateX(115%); }
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert .alert-icon-wrapper{
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: #fed7aa;
  box-shadow: 0 0 0 6px rgba(251, 146, 60, .10);
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert .alert-icon-wrapper i{
  font-size: 25px;
  line-height: 1;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-main{
  position: relative;
  min-width: 0;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fdba74;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-title{
  margin: 0 0 5px;
  color: #fff7ed;
  font-size: clamp(1.02rem, 1.8vw, 1.22rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.015em;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-text{
  margin: 0;
  color: #ffedd5;
  font-size: .93rem;
  line-height: 1.48;
  max-width: 980px;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-steps{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-step{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .36);
  border: 1px solid rgba(255,255,255,.10);
  color: #ffedd5;
  font-size: .80rem;
  font-weight: 700;
  white-space: nowrap;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-step span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: #fed7aa;
  color: #7c2d12;
  font-size: .72rem;
  font-weight: 900;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-actions{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 260px;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert .btn-update-addon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert .btn-update-addon{
  border: 0;
  background: #fff7ed;
  color: #9a3412;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .22);
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert .btn-update-addon:hover{
  transform: translateY(-1px);
}


:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert .btn-close-custom{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert .btn-close-custom:hover{
  color: #fff;
  background: rgba(255,255,255,.15);
  transform: rotate(90deg);
}

@media (max-width: 991.98px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-card{
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    padding: 16px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-actions{
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-width: 0;
    padding-right: 32px;
  }
}

@media (max-width: 575.98px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert{
    padding: 0;
    margin-top: 14px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-card{
    grid-template-columns: 1fr;
    gap: 12px;
    border-radius: 16px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert .alert-icon-wrapper{
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-actions,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert .btn-update-addon{
    width: 100%;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .top-system-alert-step{
    width: 100%;
    white-space: normal;
  }
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tooltip-wrapper{
  position: relative;
  display: inline-block;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tooltip-custom{
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translate(-.5rem, -50%);
  background: #343a40;
  color: #fff;
  padding: .5rem .75rem;
  border-radius: .5rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1200;
  font-size: 0.85rem;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tooltip-custom::after{
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: .4rem;
  border-style: solid;
  border-color: transparent transparent transparent #343a40;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tooltip-wrapper:hover .tooltip-custom{
  opacity: 1;
  visibility: visible;
}

/* Grid para botones uniformes y responsive */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"] ==================== */
/* Origen: dashboard.php:1645, dashboardAnt.php:1516 */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]):root{
    --tj-green: #2ecc71;  /* Verde Esmeralda Brillante */
    --tj-red: #ff5252;    /* Rojo Coral Luminoso */
    --tj-gray: #94a3b8;   /* Gris más claro para mejor contraste */
    --tj-blue: #3b82f6;   /* Azul brillante (Tailwind Blue 500) */

    /* Calendario Dark Mode */
    --cal-border: #334155;
    --cal-bg: #1e293b;       /* Slate 800 */
    --cal-bg-out: #0f172a;   /* Slate 900 */
    
    /* Colores pastel transparentes para días P/L */
    --cal-pos: rgba(33, 150, 83, 0.15);
    --cal-neg: rgba(213, 1, 0, 0.15);
    --cal-zero: #334155;
    
    --cal-weekbox-bg: #1e293b;
    --cal-weekbox-border: #334155;
  }

  @media (min-width: 1200px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .col-xl-fifth{ flex: 0 0 20%; max-width: 20%; }
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-toolbar{ width: 100%; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: end;
  }
  @media (min-width: 768px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid{
      grid-template-columns:
        minmax(220px, 1fr)
        minmax(160px, 220px)
        minmax(160px, 220px)
        minmax(120px, 140px)
        auto;
      column-gap: 14px;
    }
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid .form-label{ margin-bottom: 6px; font-weight: 600; font-size: 0.875rem; color: #f8fafc; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid .form-control-sm,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid .form-select-sm{ height: 38px; background-color: #0f172a; border-color: #334155; color: #f8fafc; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid .btn{ height: 38px; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .title-wrapper{ padding-top: 30px; margin-bottom: 18px; }
  @media (min-width: 992px){ :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .title-wrapper{ margin-bottom: 26px; } }

  /* =============================
     Encabezado moderno del dashboard
     Mejora visual sutil sin cambiar la distribución original
     ============================= */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-card{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    padding: 4px 0;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-icon{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    color: #9db5ff;
    background: rgba(54, 92, 245, 0.12);
    border: 1px solid rgba(54, 92, 245, 0.24);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.18);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-icon i{
    font-size: 21px;
    line-height: 1;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-copy{
    min-width: 0;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-copy h2{
    margin: 0 0 9px;
    color: #f8fafc;
    font-size: clamp(1.68rem, 2.15vw, 2.35rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.028em;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-breadcrumb-modern{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
    border: 0;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-breadcrumb-modern .breadcrumb-item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-breadcrumb-modern .breadcrumb-item + .breadcrumb-item::before{
    display: none;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-breadcrumb-modern .breadcrumb-item a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.18s ease;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-breadcrumb-modern .breadcrumb-item a:hover{
    color: #f8fafc;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-breadcrumb-modern .breadcrumb-item.active{
    color: #5f83ff;
    font-weight: 600;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-breadcrumb-separator{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1;
    flex: 0 0 auto;
  }
  @media (max-width: 991.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-card{
      width: 100%;
      align-items: center;
      padding-bottom: 0;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-copy h2{
      margin-bottom: 0;
      font-size: clamp(1.55rem, 7vw, 2.1rem);
    }
  }
  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-card{
      gap: 10px;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-icon{
      width: 38px;
      height: 38px;
      flex-basis: 38px;
      border-radius: 12px;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .journal-title-icon i{
      font-size: 19px;
    }
  }


  /* =============================
     Widgets de descuentos (afiliados)
     ============================= */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-widgets-row{
    margin-top: 10px;
    margin-bottom: 26px;
    row-gap: 20px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-card{
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 18px;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-card-title{
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-card-subtitle{
    font-size: 0.80rem;
    color: #94a3b8;
    margin: 2px 0 0;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-badge{
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: 999px;
    background-color: rgba(54, 92, 245, 0.1);
    color: var(--tj-blue);
    border: 1px solid rgba(54, 92, 245, 0.3);
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-card-list{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
    padding: 7px 9px;
    border-radius: 12px;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
    border: 1px solid transparent;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item:hover{
    background-color: #0f172a;
    border-color: #334155;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item-icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f8fafc;
    background: #334155;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item-main{
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item-title{
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item-meta{
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item-meta strong{
    font-weight: 600;
    color: #cbd5e1;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* Pill tipo "SYNC" */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px dashed #475569;
    background-color: #0f172a;
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
    cursor: pointer;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-pill-label{
    text-transform: uppercase;
    font-size: 0.70rem;
    letter-spacing: 0.06em;
    color: #64748b;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-pill-code{
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-pill-icon{
    font-size: 0.9rem;
    line-height: 1;
  }

  /* Estado visual cuando el cupón se ha copiado */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-pill-copied{
    background-color: rgba(33, 150, 83, 0.15);
    border-color: rgba(33, 150, 83, 0.5);
    color: #219653;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-pill-copied .affiliate-pill-label{
    color: #219653;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-discount-text{
    color: var(--tj-green);
    font-weight: 600;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-card-footer{
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #334155;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-footer-btn.btn{
    width: 100%;
    justify-content: center;
    padding: 6px 14px;
    font-size: 0.84rem;
    border-radius: 999px;
    font-weight: 600;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-empty{
    font-size: 0.82rem;
    color: #64748b;
    padding-top: 4px;
  }

  @media (max-width: 767.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      row-gap: 6px;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-item-actions{
      grid-column: 1 / -1;
      justify-content: flex-start;
    }
  }

  @media (max-width: 991.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .affiliate-widgets-row{
      margin-bottom: 20px;
    }
  }

  /* =============================
     KPI (métricas superiores)
     ============================= */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .metrics-row{ row-gap: 20px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .metrics-row > [class*="col-"]{ display: flex; }

  /* Tarjeta base */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .icon-card{
    width: 100%;
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #334155;
    border-radius: 14px;
    background: #1e293b;
    min-height: 156px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }
  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .icon-card{
      grid-template-columns: 1fr;
      text-align: center;
      min-height: 0;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .icon-card .icon{ margin: 0 auto 6px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .kpi-meta{ justify-content: center; }
  }

  /* Área de icono / mini-gráfico */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .icon{
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    border-radius: 12px;
    background: #0f172a;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .icon.no-bg{ background-color: transparent !important; box-shadow: none !important; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .icon-card .icon canvas,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .icon-card .icon svg{ width: 72px !important; height: 72px !important; display: block; }

  /* Contenido textual */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .icon-card .content{ display:flex; flex-direction: column; gap: 6px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .kpi-title{ font-weight:700; font-size:.875rem; color:#f8fafc; margin: 0; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .kpi-value{ font-weight:800; font-size: clamp(1.05rem, 2.8vw, 1.55rem); line-height: 1.1; margin: 0; color: #f8fafc; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .kpi-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .kpi-sub{ font-size: .82rem; color:#94a3b8; margin: 0; }

  /* Mini-gauges (SVG) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .kpi-gauge,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .kpi-donut{
    width: 72px; height: 72px; display:block;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .kpi-donut circle{
    transform: rotate(-90deg);
    transform-origin: 40px 40px; 
  }

  /* Barras promedio */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .progress{ background:#334155; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .progress-bar.bg-success{ background: var(--tj-green) !important; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .progress-bar.bg-danger{ background: var(--tj-red) !important; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .card-style canvas{ width: 100% !important; height: 300px !important; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .fc-daygrid-day div.pnl-badge{ font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .wb-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .wb-header .page-label{ font-weight:600; font-size:.9rem; color:#f8fafc; }

  /* =========================================================
     CALENDARIO — grilla unificada RESPONSIVE (DARK MODE)
     ========================================================= */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-card .calendar-grid{
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid var(--cal-border);
    border-radius: 12px;
    background: var(--cal-bg);
    padding: 10px;
  }
  @media (max-width: 768px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-card .calendar-grid{
      gap: 8px;
      padding: 8px;
    }
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-head{
    text-align:center;
    font-size: 12px;
    font-weight:700;
    color:#94a3b8;
    background:#0f172a;
    border:1px solid var(--cal-border);
    border-radius:10px;
    padding:8px 6px;
    line-height: 1.1;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-head.head-week{ white-space:nowrap; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-weekbox{
    position: relative;
    min-height: clamp(76px, 12vw, 108px);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day .day-box{
    position: absolute;
    inset: 0;
    border: 1px solid var(--cal-border);
    border-radius: 12px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px;
    overflow: hidden;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day.out .day-box{
    background: var(--cal-bg-out);
    border-color: var(--cal-border);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day.pos .day-box{ background: var(--cal-pos); border-color: rgba(33,150,83,0.3); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day.neg .day-box{ background: var(--cal-neg); border-color: rgba(213,1,0,0.3); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day.zero .day-box{ background: var(--cal-zero); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day.zero.no-trades .day-box{
    background: #0f172a;
    border-color: #334155;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day{ cursor: default; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day.has-trades{ cursor: pointer; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day .dnum{
    position:absolute;
    top:8px; left:8px;
    font-size: clamp(10px, 1.8vw, 12px);
    color:#64748b; font-weight:600;
    z-index: 1;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day .val{
    position: static;
    text-align:center;
    font-size: clamp(14px, 2.6vw, 18px);
    font-weight:800; line-height:1.1;
    margin-top:auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Ajuste de colores de texto para fondo oscuro */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day.pos .val{ color: #2ecc71 !important; text-shadow: 0 0 10px rgba(46, 204, 113, 0.25); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day.neg .val{ color: #ff5252 !important; text-shadow: 0 0 10px rgba(255, 82, 82, 0.25); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day.zero .val{ color: #94a3b8; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-day .trades{
    text-align:center;
    margin-top: 3px;
    font-size: clamp(10px, 2vw, 12px);
    font-weight: 600;
    color:#64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .day-box .note-badge{
    position: absolute; right: 6px; top: 6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(245, 158, 11, 0.2); border: 1px solid #f59e0b;
    display:flex; align-items:center; justify-content:center;
    font-size: 12px; line-height: 1; font-weight: 800; color:#fbbf24;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-weekbox{ display:flex; align-items:stretch; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-weekbox-inner{
    border:1px solid var(--cal-weekbox-border);
    border-radius:10px;
    padding:10px;
    background: #1e293b;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center; justify-content:center;
    gap:6px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .wk-title{ font-size:12px; color:#94a3b8; font-weight:700; margin-bottom:2px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .wk-amount{ font-size:18px; font-weight:800; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .wk-days{ font-size:12px; color:#64748b; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .wk-pos .wk-amount{ color: #4ade80; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .wk-neg .wk-amount{ color: #f87171; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .wk-zero .wk-amount{ color: #94a3b8; }

  @media (max-width: 992px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-card .calendar-grid{
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-head.head-week,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .cal-weekbox{ display:none !important; }
  }

  /* =========================================================
     CALENDARIO — vista mensual/anual moderna y responsive
     ========================================================= */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-title-bar{
    gap: 14px !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-title-copy{
    min-width: 0;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-kicker{
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #calendarTitle{
    color: #f8fafc;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-view-toggle,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-nav-group{
    border: 1px solid #334155;
    border-radius: 999px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.18);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-view-toggle .btn,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-nav-group .btn{
    border-radius: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    min-height: 34px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-view-toggle .btn:first-child,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-nav-group .btn:first-child{ border-left: 0 !important; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-view-toggle .btn:last-child,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-nav-group .btn:last-child{ border-right: 0 !important; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-view-toggle .btn.active{
    background-color: #365CF5 !important;
    border-color: #365CF5 !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-year-shell{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-year-summary{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    padding: 14px;
    border: 1px solid #334155;
    border-radius: 18px;
    background:
      radial-gradient(circle at top left, rgba(54, 92, 245, 0.18), transparent 34%),
      linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.22);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-main,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-stat{
    border: 1px solid rgba(51, 65, 85, 0.88);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.62);
    padding: 13px 14px;
    min-width: 0;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-main{
    grid-column: span 2;
    min-height: 112px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-stat{
    min-height: 112px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-label{
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-value{
    color: #f8fafc;
    font-size: clamp(1.05rem, 2.4vw, 1.65rem);
    font-weight: 850;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-sub{
    margin-top: 5px;
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.25;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-value.pos,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-pnl.pos{ color: #2ecc71; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-value.neg,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-pnl.neg{ color: #ff5252; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-value.zero,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-pnl.zero{ color: #f8fafc; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-months-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 13px;
    border: 1px solid #334155;
    border-radius: 18px;
    background: #1e293b;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.18);
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
    overflow: hidden;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card::before{
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: #475569;
    opacity: 0.9;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card.pos::before{ background: #2ecc71; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card.neg::before{ background: #ff5252; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card.zero::before{ background: #475569; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card:hover{
    transform: translateY(-2px);
    border-color: #5f83ff;
    background: #243044;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.28);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-title{
    color: #f8fafc;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.15;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-meta{
    color: #94a3b8;
    font-size: 0.76rem;
    line-height: 1.25;
    margin-top: 3px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-pnl{
    flex: 0 0 auto;
    color: #f8fafc;
    font-size: 0.96rem;
    font-weight: 850;
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-bar{
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #0f172a;
    border: 1px solid #334155;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-bar span{
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #64748b;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card.pos .year-month-bar span{ background: #2ecc71; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card.neg .year-month-bar span{ background: #ff5252; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-stats{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-stat{
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #334155;
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.72);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-stat span{
    display: block;
    color: #64748b;
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-stat strong{
    display: block;
    margin-top: 5px;
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-stat.pos strong{ color: #4ade80; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-stat.neg strong{ color: #f87171; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-stat.zero strong{ color: #cbd5e1; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-head{
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #0f172a;
    color: #64748b;
    font-size: clamp(0.56rem, 1.4vw, 0.72rem);
    font-weight: 750;
    line-height: 1;
    overflow: hidden;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day.blank{
    border-color: transparent;
    background: transparent;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day.has-trades{
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.28);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day.pos{ background: rgba(33, 150, 83, 0.18); border-color: rgba(33, 150, 83, 0.35); color: #4ade80; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day.neg{ background: rgba(213, 1, 0, 0.18); border-color: rgba(213, 1, 0, 0.35); color: #f87171; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day.zero{ background: rgba(51, 65, 85, 0.65); color: #cbd5e1; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day.today{
    box-shadow: inset 0 0 0 2px rgba(95, 131, 255, 0.95);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day.has-note::after{
    content: "";
    position: absolute;
    right: 3px;
    top: 3px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.16);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day.has-trades:hover{
    border-color: #5f83ff;
    filter: brightness(1.08);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-empty-state{
    padding: 24px;
    border: 1px dashed #475569;
    border-radius: 16px;
    background: #0f172a;
    color: #94a3b8;
    text-align: center;
  }

  @media (max-width: 1199.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-year-summary{
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-main{
      grid-column: 1 / -1;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-months-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 767.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-title-bar{
      align-items: stretch !important;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-title-copy,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-actions,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-view-toggle,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-nav-group{
      width: 100%;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-actions{
      justify-content: stretch;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-view-toggle .btn,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-nav-group .btn{
      flex: 1 1 0;
      padding-left: 8px !important;
      padding-right: 8px !important;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-year-summary{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-main{
      grid-column: 1 / -1;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-months-grid{
      grid-template-columns: 1fr;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-main,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-stat,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card{
      border-radius: 15px;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-grid{ gap: 3px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day{ border-radius: 7px; }
  }
  @media (max-width: 420px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-card{ padding-left: 12px !important; padding-right: 12px !important; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .calendar-year-summary{ grid-template-columns: 1fr; padding: 10px; gap: 10px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-summary-main{ grid-column: 1 / -1; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-card{ padding: 10px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-head{ gap: 8px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-title{ font-size: 0.92rem; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-pnl{ font-size: 0.86rem; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-stats{ gap: 4px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-month-stat{ padding: 6px 5px; border-radius: 9px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .year-mini-day{ font-size: 0.56rem; }
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modal-backdrop.show{ background-color: rgba(0,0,0,.7); }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .day-trades-scroll{
    max-height: 55vh; overflow:auto; border:1px solid #334155; border-radius:10px; padding: 8px; background:#1e293b;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .day-trades-table{ border-collapse: separate; border-spacing: 0; width: 100%; color: #94a3b8; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .day-trades-table thead th{
    position: sticky; top: 0; z-index: 1; background:#0f172a; color: #f8fafc; border-bottom:1px solid #334155; padding: .55rem .85rem !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .day-trades-table tbody td{ padding: .55rem .85rem !important; vertical-align: middle; border-bottom: 1px solid #334155; }

  /* ↓↓↓ Ajustes SOLO para el cuadro "Day details" ↓↓↓ */

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .modal-content{ font-size: 0.92rem; background: #1e293b; color: #94a3b8; border: 1px solid #334155; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .day-trades-table thead th,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .day-trades-table tbody td{ font-size: 0.92rem; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .ticker-col{ width: 7.5ch; max-width: 7.5ch; white-space: nowrap; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .ticker-cell{
    width: 7.5ch; max-width: 7.5ch;
    white-space: nowrap; overflow: hidden; text-overflow: clip;
    font-variant-numeric: tabular-nums;
  }

  /* Botón/ícono de nota por trade */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .trade-note-btn{
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 4px 8px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .trade-note-btn.has-note{ background: rgba(245, 158, 11, 0.15); border-color: #f59e0b; color: #fbbf24; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .trade-note-btn .note-icon{ font-style: normal; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .note-toolbar{
    display:flex; flex-wrap:wrap; gap:6px; border:1px solid #334155; border-radius:10px 10px 0 0; padding:8px; background:#0f172a;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .note-toolbar .btn-sm{ color: #f8fafc; border-color: #334155; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .note-toolbar .btn-sm:hover{ background: #334155; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .note-editor{
    border:1px solid #334155; border-top:0; border-radius:0 0 10px 10px;
    min-height: 200px; padding:12px; background:#1e293b; color: #f8fafc; overflow:auto;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .note-editor:focus{ outline:none; }

  /* Tipo/plan en tablas */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .trade-type-select{ min-width: 160px; background-color: #0f172a; color: #f8fafc; border-color: #334155; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-rule-check{
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 4px 10px;
    background:#0f172a;
    color: #f8fafc;
    line-height:1;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-rule-check:disabled{ opacity: 0.5; }

  /* Badges del Plan */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .badge-plan{
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: .5rem;
    font-weight:700;
    line-height: 1.1;
    font-size: .78rem;
    border: 1px solid transparent;
    min-width: 2.25rem;
    text-align: center;
    white-space: nowrap;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .badge-plan.yes{ background:rgba(16, 185, 129, 0.2); color:#4ade80; border-color:#10b981; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .badge-plan.no{ background:rgba(239, 68, 68, 0.2); color:#f87171; border-color:#ef4444; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .badge-plan.na{ background:#334155; color:#94a3b8; border-color:#475569; }

  /* Modal Trade Types Manager */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-list{
    max-height: 60vh;
    overflow:auto;
    border:1px solid #334155;
    border-radius:10px;
    padding:8px;
    background:#1e293b;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-item{
    padding:10px 12px;
    border-bottom:1px solid #334155;
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    color: #f8fafc;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-item.active{ background:#0f172a; border-left: 3px solid #365CF5; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-item:hover{ background:#334155; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-rules{
    max-height: 50vh;
    overflow:auto;
    border:1px solid #334155;
    border-radius:10px;
    padding:8px;
    background:#1e293b;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-rule-row{
    display:flex;
    gap:8px;
    align-items:center;
    padding:6px 0;
    border-bottom:1px dashed #475569;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-rule-row:last-child{ border-bottom:0; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-rule-row input.form-control{
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    background: #0f172a; border-color: #334155; color: #f8fafc;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-rule-row .btn-delete-rule{
    padding: .25rem .5rem;
    line-height: 1;
    height: 32px;
    white-space: nowrap;
    color: #94a3b8; border-color: #475569;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-rule-row .btn-delete-rule:hover{ color: #f87171; border-color: #ef4444; background: transparent; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-form-header{
    border-bottom: 1px dashed #334155;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    background:#0f172a;
    border-radius:8px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #ttFormCard{
    background:#1e293b;
    border:1px solid #334155;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-form-title{ font-weight: 700; font-size: .95rem; color: #f8fafc; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-form-subtitle{ color:#94a3b8; font-size:.85rem; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 200px;
    padding: 16px;
    background:#1e293b;
    border:1px dashed #475569;
    border-radius:10px;
    text-align:center;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-empty .icon{ font-size:28px; margin-bottom:6px; color: #365CF5; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-empty h6{ margin:6px 0; color: #f8fafc; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-empty p{ margin:0; color:#94a3b8; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .mode-badge{
    display:inline-block; font-weight:700; line-height:1; font-size:.75rem;
    border:1px solid; border-radius:999px; padding:.35rem .6rem; white-space:nowrap;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .mode-badge.create{ background:rgba(54, 92, 245, 0.1); color:#365CF5; border-color:rgba(54, 92, 245, 0.4); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .mode-badge.edit{ background:rgba(6, 182, 212, 0.1); color:#06b6d4; border-color:rgba(6, 182, 212, 0.4); }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .twinkle-active{ animation: bm-d235c7c89a-twinkle 800ms ease; }
  @keyframes bm-d235c7c89a-twinkle{
    0%{ box-shadow: 0 0 0 0 rgba(54,92,245,0.35); }
    50%{ box-shadow: 0 0 0 6px rgba(54,92,245,0.15); }
    100%{ box-shadow: 0 0 0 0 rgba(54,92,245,0.0); }
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-hint{ font-size:.8rem; color:#64748b; margin-top:.25rem; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-ghost{ background:transparent; border:1px dashed #475569; color: #94a3b8; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-ghost:hover{ background:#334155; border-color:#94a3b8; color: #f8fafc; }
  /* ==========================================================================
     PARCHE DE CURACIÓN DARK MODE (Sustituye estilos blancos de Bootstrap)
     ========================================================================== */

  /* 1. MODALES GLOBALES (Settings, New Trade, Types, Commissions, Delete, Rules)
     Esto fuerza el color oscuro en TODAS las ventanas emergentes que ahora ves blancas */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modal-content{
      background-color: #1e293b !important; /* Slate 800 */
      border: 1px solid #334155 !important;
      color: #94a3b8 !important;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modal-header,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modal-footer{
      border-color: #334155 !important;
      background-color: #1e293b !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modal-title{
      color: #f8fafc !important; /* Títulos blanco brillante */
  }
  /* Invertir color del botón X de cerrar para que sea blanco */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-close{
      filter: invert(1) grayscale(100%) brightness(200%);
  }

  /* 2. FORMULARIOS (Inputs de filtros, New Trade, Settings, Check Rules)
     Arregla los campos blancos y textos invisibles */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-control,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-select,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) input[type="text"],
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) input[type="number"],
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) input[type="date"],
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) textarea{
      background-color: #0f172a !important; /* Slate 900 (fondo input) */
      border: 1px solid #334155 !important;
      color: #f8fafc !important; /* Texto blanco al escribir */
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-control:focus,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-select:focus{
      background-color: #0f172a !important;
      border-color: #365CF5 !important;
      color: #f8fafc !important;
      box-shadow: 0 0 0 0.25rem rgba(54, 92, 245, 0.25) !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-control::placeholder{
      color: #64748b !important;
  }
  /* Input deshabilitado (ej. en Commissions) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-control:disabled,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-control[readonly]{
      background-color: #1e293b !important;
      color: #94a3b8 !important;
      opacity: 1;
  }
  /* Arregla el texto "Yes/No" debajo del Plan que no se ve */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-text,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .text-muted,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) small{
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-label{
      color: #f8fafc !important;
  }

  /* 3. TABLAS INTERNAS (Dentro de Commissions, Delete Accounts, Day Details) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .table{
      color: #94a3b8 !important;
      border-color: #334155 !important;
      --bs-table-bg: transparent !important;
      --bs-table-striped-bg: rgba(255, 255, 255, 0.03) !important;
      --bs-table-border-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .table thead th{
      background-color: #0f172a !important;
      color: #f8fafc !important;
      border-bottom: 2px solid #334155 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .table td,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .table th{
      border-bottom: 1px solid #334155 !important;
      background-color: transparent !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .table-hover tbody tr:hover td{
      background-color: rgba(54, 92, 245, 0.1) !important;
      color: #f8fafc !important;
  }

  /* 4. DATE RANGE (Flechas adelante/atrás en Filtros) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .input-group-text{
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #94a3b8 !important;
  }
  /* Botones de flecha dentro de input-group */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .input-group .btn-outline-secondary{
      border-color: #334155 !important;
      color: #94a3b8 !important;
      background-color: #1e293b !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .input-group .btn-outline-secondary:hover{
      background-color: #334155 !important;
      color: #f8fafc !important;
  }

  /* 5. CALENDARIO: Botones Adelante/Atrás/Hoy y Títulos */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .fc-button{
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #f8fafc !important;
      text-transform: capitalize !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .fc-button:hover{
      background-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .fc-button-active{
      background-color: #365CF5 !important;
      border-color: #365CF5 !important;
      color: #fff !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .fc-button:disabled{
      opacity: 0.6;
      background-color: #0f172a !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .fc-toolbar-title{
      color: #f8fafc !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .fc-col-header-cell-cushion{
      color: #94a3b8 !important; /* Días de la semana (Sun, Mon...) */
      text-decoration: none !important;
  }

  /* 6. MODAL DAY DETAILS (Específico para bordes y botones internos) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .day-trades-scroll{
      background: #0f172a !important;
      border: 1px solid #334155 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .trade-note-btn{
      background-color: #1e293b !important;
      border: 1px solid #334155 !important;
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .trade-note-btn:hover{
      border-color: #365CF5 !important;
      color: #f8fafc !important;
  }
  /* Botón con nota activa */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .trade-note-btn.has-note{
      background-color: rgba(245, 158, 11, 0.15) !important;
      border-color: #f59e0b !important;
      color: #fbbf24 !important;
  }
  /* Selectores internos de tipo */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dayDetailModal .trade-type-select{
      background-color: #0f172a !important;
      color: #f8fafc !important;
      border: 1px solid #334155 !important;
  }
  /* Editor de Notas dentro del modal */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .note-toolbar{
      background-color: #334155 !important;
      border-color: #475569 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .note-editor{
      background-color: #0f172a !important;
      color: #f8fafc !important;
      border: 1px solid #334155 !important;
  }

  /* 7. CHECK RULES (Lista de reglas) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-list,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-rules{
      background-color: #0f172a !important;
      border-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-item{
      color: #f8fafc !important;
      border-bottom-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-item:hover{
      background-color: #1e293b !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tt-rule-row{
      border-bottom-color: #334155 !important;
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-delete-rule{
      border-color: #475569 !important;
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-delete-rule:hover{
      border-color: #ef4444 !important;
      color: #ef4444 !important;
  }

  /* 8. LISTAS GENERALES (List group en Delete Account, etc.) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .list-group-item{
      background-color: #0f172a !important;
      border-color: #334155 !important;
      color: #f8fafc !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .list-group-item.active{
      background-color: #365CF5 !important;
      border-color: #365CF5 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .list-group-item-action:hover{
      background-color: #1e293b !important;
      color: #f8fafc !important;
  }

  /* 9. PESTAÑAS (Nav Tabs en Settings/Types) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .nav-tabs{
      border-bottom-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .nav-tabs .nav-link{
      color: #94a3b8 !important;
      background: transparent !important;
      border: 1px solid transparent !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .nav-tabs .nav-link:hover{
      color: #f8fafc !important;
      background: #334155 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .nav-tabs .nav-link.active{
      background-color: #1e293b !important;
      border-color: #334155 #334155 #1e293b !important;
      color: #365CF5 !important;
      font-weight: 600;
  }

  /* 10. REEMPLAZO DE BOTÓN LIGHT (Para integrar btn-light en Dark Mode)
     Esto arregla los botones del Calendario, Modales y Rango de fechas */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-light{
      background-color: #0f172a !important;
      border: 1px solid #334155 !important;
      color: #94a3b8 !important;
      transition: all 0.2s ease;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-light:hover,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-light:focus,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-light:active,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-light.active{
      background-color: #334155 !important;
      border-color: #475569 !important;
      color: #f8fafc !important;
  }

  /* 11. REEMPLAZO DE BOTÓN PRIMARY (Azul corporativo mejorado para Dark Mode)
     Unifica el color con tu marca y agrega un efecto de brillo sutil */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-primary{
      background-color: #365CF5 !important; /* Tu azul exacto (var --tj-blue) */
      border-color: #365CF5 !important;
      color: #ffffff !important;
      font-weight: 500 !important;
      box-shadow: 0 4px 6px -1px rgba(54, 92, 245, 0.3) !important; /* Sombra azulada */
      transition: all 0.2s ease;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-primary:hover,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-primary:focus,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-primary:active{
      background-color: #2b4bca !important; /* Un tono ligeramente más profundo al hover */
      border-color: #2b4bca !important;
      box-shadow: 0 6px 12px -2px rgba(54, 92, 245, 0.5) !important; /* Más brillo al tocar */
      transform: translateY(-1px); /* Efecto sutil de elevación */
  }
  
  /* Extra: Arregla también los botones 'outline' para que se lean bien sobre fondo oscuro */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-outline-primary{
      color: #365CF5 !important;
      border-color: #365CF5 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-outline-primary:hover{
      background-color: #365CF5 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 6px -1px rgba(54, 92, 245, 0.3) !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .alert-warning{
      background-color: rgba(245, 158, 11, 0.1) !important;
      border-color: rgba(245, 158, 11, 0.25) !important;
      color: #fbbf24 !important; /* Texto dorado/ámbar brillante */
  }
  
  /* Botones Secundarios (Gris oscuro en lugar de gris claro) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-secondary{
      background-color: #334155 !important; /* Slate 700 */
      border-color: #475569 !important;
      color: #e2e8f0 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-secondary:hover,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-secondary:focus{
      background-color: #475569 !important; /* Slate 600 al hover */
      border-color: #64748b !important;
      color: #fff !important;
  }

  /* Botones Outline Secondary (Selectores Long/Short, Filtros de fecha) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-outline-secondary{
      color: #94a3b8 !important;
      border-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-outline-secondary:hover,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-check:checked + .btn-outline-secondary{ 
      /* Estado activo/seleccionado: se ilumina en tu azul o gris brillante */
      background-color: #334155 !important; 
      color: #f8fafc !important;
      border-color: #64748b !important;
  }

  /* Offcanvas (Paneles laterales deslizzantes) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .offcanvas,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .offcanvas-header,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .offcanvas-body{
      background-color: #1e293b !important; /* Slate 800 (Igual que las tarjetas) */
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .offcanvas-title{
      color: #f8fafc !important;
  }
  /* Corrige el botón de cerrar (X) dentro del offcanvas */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .offcanvas-header .btn-close{
      filter: invert(1) grayscale(100%) brightness(200%);
  }

  /* Etiquetas de Formularios y Checkboxes */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .form-check-label{
      color: #cbd5e1 !important; /* Slate 300 (Gris claro) */
  }
  
  /* Fondos sutiles (bg-light-subtle) -> Transformar a Fondo Oscuro Profundo
     Esto arregla las cajas de "Attach image" o áreas secundarias */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .bg-light-subtle{
      background-color: #0f172a !important; /* Slate 900 */
      color: #94a3b8 !important;
      border: 1px solid #334155 !important; /* Asegura que el borde también se oscurezca */
  }
  /* Forzar que el borde genérico (.border) sea oscuro cuando está en estos contextos */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .border{
      border-color: #334155 !important;
  }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboard.php:3087, dashboardAnt.php:2958, dashboardAntV1.php:1718 */
/* ====== Modal responsiva genérica (aplícalo con la clase .modal-resp en cada modal) ====== */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp{
  /* Ocupa el ancho disponible con un tope de 1000px y respeta los márgenes de Bootstrap */
  --bs-modal-width: min(1000px, 100vw - var(--bs-modal-margin) * 2);
}

/* Ajuste de márgenes (espacio con los bordes de pantalla) según punto de corte */
@media (max-width: 575.98px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp{ --bs-modal-margin: 1rem; }
}
@media (min-width: 576px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp{ --bs-modal-margin: 1.25rem; }
}

/* Padding consistente dentro de la modal */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .modal-header,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .modal-footer{ padding: .75rem 1rem; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .modal-body{ padding: 1rem; }

/* Evitar desbordes horizontales en contenido ancho (tablas/listas) dentro de la modal */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .table-responsive,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .day-trades-scroll{
  overflow-x: auto;
}

/* En pantallas medianas/pequeñas, asegúrate de que la tabla de trades no “rompa” el layout */
@media (max-width: 992px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .day-trades-table{
    display: block;
    width: 100%;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .day-trades-table thead,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .day-trades-table tbody,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .day-trades-table tr,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .day-trades-table th,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .modal.modal-resp .day-trades-table td{
    white-space: nowrap;
  }
}

/* Dialog que se adapta al contenido pero sin pasarse de la pantalla */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .auto-width-modal{
  width: auto;
  max-width: 98vw;        /* tope superior por seguridad */
  margin-left: auto;
  margin-right: auto;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .text-success{ color: #4ade80 !important; } /* Tailwind Green-400 */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .text-danger{ color: #f87171 !important; } /* Tailwind Red-400 */
  
  /* Arreglo de barras de progreso en KPIs */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .progress-bar.bg-success{ background-color: #2ecc71 !important; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .progress-bar.bg-danger{ background-color: #ff5252 !important; }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboard.php:3143, dashboardAnt.php:3014, dashboardAntV1.php:1774 */
/* ===== Commissions per trade & instrument search modals (Dark Mode) ===== */

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .modal-dialog{
  --bs-modal-width: min(1080px, 100vw - 2rem);
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .modal-body{
  padding-top: 1rem;
}

/* Left column (accounts) */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .accounts-card{
  border-right: 1px solid #334155;
}

@media (max-width: 991.98px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .accounts-card{
    border-right: none;
    border-bottom: 1px solid #334155;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
}

/* Scroll for accounts list */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .accounts-list{
  max-height: 320px;
  overflow-y: auto;
}

/* Estilo de cada cuenta en la lista */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .accounts-list .list-group-item{
  border-radius: .5rem;
  border: 1px solid #334155;
  margin-bottom: .25rem;
  padding: .45rem .65rem;
  background-color: #1e293b;
  color: #94a3b8;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;
}

/* Hover en cuentas */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .accounts-list .list-group-item:hover{
  background-color: #0f172a;
  border-color: #475569;
  color: #f8fafc;
}

/* Selección activa */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .accounts-list .list-group-item.active,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .accounts-list .list-group-item.active:hover{
  background-color: #334155;
  border-color: #475569;
  color: #f8fafc;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .account-badge-count{
  font-size: 0.7rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: rgba(54, 92, 245, 0.2);
  color: #818cf8;
}

/* Tabla Instrument / Commission */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal #cptTable thead th,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal #cptTable tbody td{
  padding: .55rem .9rem;
  border-color: #334155;
  color: #94a3b8;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal #cptTable thead th{
  background-color: #0f172a;
  color: #f8fafc;
  border-bottom-color: #334155;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .account-detail-header .fs-6{
  font-weight: 600;
  color: #f8fafc;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .commissions-add-row .form-label-sm{
  font-size: 0.8rem;
  color: #94a3b8;
}

/* Read-only instrument field */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal #cptNewInstrument[readonly]{
  background-color: #0f172a;
  color: #94a3b8;
  border-color: #334155;
  cursor: default;
  pointer-events: none;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .commissions-add-row .input-group .btn{
  flex-shrink: 0;
  border-color: #334155;
  color: #94a3b8;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .commissions-modal .commissions-add-row .input-group .btn:hover{
  background: #334155;
  color: #f8fafc;
}

/* Instrument search modal */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .modal-dialog{
  --bs-modal-width: min(900px, 100vw - 2rem);
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .modal-body{
  padding: 1rem 1.25rem;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .instrument-results{
  margin-top: .75rem;
  border-radius: .5rem;
  border: 1px solid #334155;
  background: #0f172a;
  padding: .75rem;
  max-height: 320px;
  overflow-y: auto;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .instrument-suggestions .list-group-item{
  padding: .35rem .5rem;
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .instrument-suggestions .list-group-item:hover{
  background: #334155;
  color: #f8fafc;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .instrument-suggestions .instrument-name{
  font-weight: 500;
  font-size: 0.86rem;
  color: #f8fafc;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .instrument-suggestions .instrument-desc{
  font-size: 0.78rem;
  color: #64748b;
}

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .instrument-suggestions .list-group-item + .list-group-item{
  border-top: 1px solid #334155;
}

/* Interaction fixes */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal{ pointer-events: auto !important; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .modal-dialog,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal .modal-content{ pointer-events: auto; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .instrument-search-modal *{ user-select: text; }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboard.php:3305, dashboardAnt.php:3176, dashboardAntV1.php:1936 */
/* === Global Dark Mode Overrides for Bootstrap Components === */
  
  /* Inputs y Selects */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-control,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-select,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .input-group-text{
    background-color: #0f172a;
    border-color: #334155;
    color: #f8fafc;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-control:focus,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-select:focus{
    background-color: #0f172a;
    border-color: #365CF5;
    color: #f8fafc;
    box-shadow: 0 0 0 0.25rem rgba(54, 92, 245, 0.25);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-control::placeholder{ color: #64748b; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-control:disabled,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-control[readonly]{
    background-color: #1e293b;
    color: #94a3b8;
    border-color: #334155;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .input-group-text{
    background-color: #1e293b;
    border-color: #334155;
    color: #94a3b8;
  }

  /* Pestañas (Tabs) - Recent Trades */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .nav-tabs{ border-bottom-color: #334155; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .nav-tabs .nav-link{
    color: #94a3b8;
    border-color: transparent;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .nav-tabs .nav-link:hover{
    color: #f8fafc;
    border-color: transparent;
    background: #334155;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .nav-tabs .nav-link.active{
    color: #f8fafc;
    background-color: #1e293b;
    border-color: #334155 #334155 #1e293b;
  }

  /* Sliders (Switches) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-switch .form-check-input{
    background-color: #334155;
    border-color: #475569;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e");
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-switch .form-check-input:checked{
    background-color: #365CF5;
    border-color: #365CF5;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  }
  
  /* Controles de los charts (estética compacta y responsive) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .chart-controls .input-group-text{ font-weight:600; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-switch.form-switch-sm .form-check-input{ width:2.25rem; height:1.125rem; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-switch.form-switch-sm .form-check-input:focus{ box-shadow:none; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-switch.form-switch-sm .form-check-label{ margin-left:.25rem; color: #94a3b8; }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"] ==================== */
/* Origen: dashboard.php:3368, dashboardAnt.php:3239 */
/* Override grid de filtros */
@media (min-width: 768px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid{
    grid-template-columns:
      minmax(180px, 240px)
      minmax(250px, 1fr)
      minmax(190px, 240px);
    column-gap: 12px;
  }
}

@media (min-width: 1200px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid{
    grid-template-columns:
      minmax(190px, 240px)
      minmax(270px, 1fr)
      minmax(200px, 240px);
  }
}

/* ===== Date Range (popover) ===== */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-field{ position: relative; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dateRangeBtn{
  cursor: pointer;
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #drLabel{
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dateRangeBtn:after{
  content: "▼";
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: .65rem;
  opacity: .6;
  line-height: 1;
}

/* Popover contenedor */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-popover{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1200;
  width: min(760px, calc(100vw - 2rem));
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  padding: 10px;
  display: none;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-popover[aria-hidden="false"]{ display: block; }

/* Header */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-header{
  display: grid;
  grid-template-columns: 1fr 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 8px 6px;
  border-bottom: 1px dashed #334155;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-title{ font-weight: 700; font-size: .95rem; color: #f8fafc; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-sep{ text-align:center; color:#94a3b8; font-weight:700; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-actions-top .btn{ padding: 2px 8px; color: #94a3b8; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-actions-top .btn:hover{ color: #f8fafc; background: #334155; }

/* Body */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-body{
  display: grid;
  grid-template-columns: 1fr 1fr 220px;
  gap: 12px;
  padding: 10px 4px 8px 4px;
}
@media (max-width: 992px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-body{ grid-template-columns: 1fr; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-presets{ order: -1; }
}

/* Calendario interno */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-cal{ border: 1px solid #334155; border-radius: 10px; padding: 8px; background: #0f172a; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 6px;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-cal-head .btn{ color:#94a3b8; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-month-title{ font-weight:700; color:#f8fafc; }

:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-grid .dr-dow{ text-align:center; font-weight:700; font-size:.75rem; color:#64748b; padding:4px 0; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day{
  text-align:center; padding:6px 0; border-radius:8px; cursor:pointer;
  font-weight:600; color:#94a3b8;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day:hover{ background:#334155; color: #fff; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day.muted{ color:#475569; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day.selected{ background:#365CF5; color:#fff; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day.in-range{ background:rgba(54, 92, 245, 0.2); color: #e2e8f0; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day.range-edge{ background:#365CF5; color:#fff; }

/* Presets */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-presets{ border: 1px dashed #334155; border-radius: 10px; padding: 8px; background:#1e293b; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-presets-title{ font-weight:700; font-size:.9rem; color:#f8fafc; margin-bottom:6px; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-presets-list{ display:flex; flex-direction:column; gap:6px; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-presets-list .btn{ color: #94a3b8; border-color: #334155; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-presets-list .btn:hover{ background: #334155; color: #fff; }

/* Footer */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-footer{
  display:flex; align-items:center; gap:12px;
  padding: 8px 6px 4px 6px; border-top:1px dashed #334155;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #drPreview{ white-space: nowrap; color: #94a3b8; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #drCancelBtn{ background: transparent; border: 1px solid #334155; color: #94a3b8; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #drCancelBtn:hover{ background: #334155; color: #fff; }

/* Backdrop */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-backdrop{
  position: fixed; inset: 0;
  z-index: 1049;
  display:none;
}
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-backdrop.show{ display:block; }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboard.php:3510, dashboardAnt.php:3381, dashboardAntV1.php:2110 */
/* Botón compacto unificado (igual que los inputs/btn-cred: 36px y .95rem) */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .btn-compact{
    height: 36px;
    padding: .35rem .7rem;
    font-size: .95rem;
    line-height: 1.1;
    border-radius: .5rem;
  }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboard.php:3520, dashboardAnt.php:3391, dashboardAntV1.php:2120 */
/* ——— Ajustes generales para pantallas tipo laptop 14" (1366–1440 px) ——— */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .icon-card .content{ min-width: 0; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .kpi-sub,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .kpi-meta{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* KPI más compactos: evita "salirse" en 1366 px */
@media (max-width: 1440px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .icon-card{
    grid-template-columns: 56px 1fr;
    padding: 12px;
    min-height: 132px;
  }
  /* CORREGIDO: Específico para .icon-card */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .icon-card .icon{ width:56px; height:56px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .icon-card .icon svg,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .icon-card .icon canvas{ width:56px !important; height:56px !important; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .kpi-title{ font-size: .82rem; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .kpi-value{ font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.1; }
}

/* Tablas más legibles sin romper layout */
@media (max-width: 1366px){
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .day-trades-table thead th,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .day-trades-table tbody td{ font-size: .875rem; }
}

/* Calendario: reduce tamaños máximos/flex y evita overflow del valor/trades */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .calendar-card .calendar-grid{ gap: 8px; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .cal-day,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .cal-weekbox{ min-height: clamp(68px, 10.5vw, 96px); }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .cal-day .dnum{ font-size: clamp(10px, 1.1vw, 12px); }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .cal-day .val{ font-size: clamp(12px, 1.6vw, 16px); line-height: 1.1; 
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .cal-day .trades{ font-size: clamp(10px, 1.3vw, 12px);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Botones del banner y globales a misma altura/tamaño visual que inputs */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .btn-cred,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .btn-compact,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .input-group .btn{ height: 36px; font-size: .95rem; line-height: 1.1; }

/* Evita que textos largos rompan tarjetas/títulos */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .title .breadcrumb-wrapper,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .title h2{ min-width: 0; }

/* === PARCHE DE SEGURIDAD (FIX MENU Y HEADER) === */
/* 1. Forzamos a los iconos del menú lateral a ignorar el tamaño de 72px */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .sidebar-nav .icon{
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    display: inline-flex !important; /* Restaura display original */
}

/* 2. Elevamos el Header por encima de cualquier capa fantasma del dashboard */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .header{
    position: relative;
    z-index: 1030 !important; /* Superior a tooltips y overlays estándar */
}

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboard.php:3576, dashboardAnt.php:3447, dashboardAntV1.php:2176 */
/* ===== Selector multi-cuenta (Account) ===== */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-wrapper{
    position: relative;
    width: 100%;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) #accountMultiBtn.account-multi-btn{
    cursor: pointer;
    background-color: #0f172a; /* Slate 900 */
    border: 1px solid #334155;
    color: #f8fafc;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) #accountMultiBtn.account-multi-btn::after{
    content: "▼";
    float: right;
    font-size: .65rem;
    opacity: .6;
    line-height: 1.2;
    margin-left: 4px;
    flex: 0 0 auto;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) #accountMultiLabel{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover{
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1200;
    min-width: 260px;
    max-width: 360px;
    max-height: 260px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #334155;
    background: #1e293b; /* Slate 800 */
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
    display: none;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover[aria-hidden="false"]{
    display: block;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .am-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .am-title{
    font-weight: 600;
    font-size: .9rem;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .am-header-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .am-header-actions .btn{
    font-size: .85rem;
    padding-left: 0;
    padding-right: 0;
    color: #365CF5;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .am-header-actions .btn:hover{ color: #fff; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .am-body{
    max-height: 200px;
    overflow-y: auto;
    padding-top: 2px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .am-item{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 2px;
    cursor: pointer;
    font-size: .9rem;
    border-radius: 6px;
    color: #94a3b8;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .am-item:hover{
    background-color: #334155;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .form-check-input{
    margin-top: 0;
    background-color: #0f172a;
    border-color: #334155;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .account-multi-popover .form-check-input:checked{
    background-color: #365CF5;
    border-color: #365CF5;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-control.form-control-sm{
      background-color: #0f172a !important;
      border-color: #334155 !important;
      color: #94a3b8 !important;
  }
  /* Arregla el botón "Seleccionar archivo" dentro de los inputs tipo file */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-control::file-selector-button{
      background-color: #1e293b !important;
      color: #f8fafc !important;
      border: 0 !important;
      border-right: 1px solid #334155 !important;
      margin-right: 10px;
      padding: 0.25rem 0.5rem; /* Ajuste para tamaño sm */
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"], html[data-bm-page="dashboardAntV1"]) .form-control:hover::file-selector-button{
      background-color: #334155 !important;
      cursor: pointer;
  }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"] ==================== */
/* Origen: dashboard.php:3714, dashboardAnt.php:3585 */
/* ===== Modernización visual: Date range, Account y Delete accounts ===== */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-toolbar{
    --control-bg-a: rgba(15, 23, 42, 0.96);
    --control-bg-b: rgba(30, 41, 59, 0.92);
    --control-border: rgba(71, 85, 105, 0.82);
    --control-border-hover: rgba(148, 163, 184, 0.7);
    --control-ring: rgba(54, 92, 245, 0.28);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid .form-label{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #cbd5e1 !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-btn{
    min-height: 46px !important;
    height: 46px !important;
    width: 100%;
    padding: 6px 10px !important;
    border-radius: 15px !important;
    border: 1px solid var(--control-border) !important;
    background:
      radial-gradient(circle at top left, rgba(54, 92, 245, 0.18), transparent 34%),
      linear-gradient(135deg, var(--control-bg-a), var(--control-bg-b)) !important;
    color: #f8fafc !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 10px 22px rgba(2, 6, 23, .18) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-btn:hover,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-btn:focus{
    border-color: var(--control-border-hover) !important;
    box-shadow:
      0 0 0 4px var(--control-ring),
      0 14px 28px rgba(2, 6, 23, .26) !important;
    transform: translateY(-1px);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-btn:focus{ outline: none !important; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #dateRangeBtn::after,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #accountMultiBtn.account-multi-btn::after{ content: none !important; display: none !important; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-icon{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #bfdbfe;
    background: rgba(54, 92, 245, .14);
    border: 1px solid rgba(96, 165, 250, .20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-content{
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    text-align: left;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-kicker{
    font-size: .66rem;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 800;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-value{
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f8fafc;
    font-weight: 800;
    font-size: .9rem;
    line-height: 1.15;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-helper{
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #94a3b8;
    font-size: .72rem;
    line-height: 1.05;
    margin-top: 1px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-chevron{
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: rgba(15, 23, 42, .65);
    border: 1px solid rgba(71, 85, 105, .55);
    transition: transform .18s ease, color .18s ease, background .18s ease;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-btn:hover .modern-control-chevron,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .modern-control-btn:focus .modern-control-chevron{
    color: #fff;
    background: rgba(54, 92, 245, .24);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-field{ position: relative; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-field:has(.dr-popover[aria-hidden="false"]) .modern-control-chevron,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-wrapper:has(.account-multi-popover[aria-hidden="false"]) .modern-control-chevron{
    transform: rotate(180deg);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-popover{
    top: calc(100% + 12px) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(71,85,105,.95) !important;
    background:
      linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.98)) !important;
    box-shadow: 0 24px 70px rgba(2,6,23,.66), inset 0 1px 0 rgba(255,255,255,.04) !important;
    padding: 12px !important;
    overflow: hidden;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-header{
    padding: 8px 10px 12px !important;
    border-bottom: 1px solid rgba(71,85,105,.55) !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-title{
    font-size: .78rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #cbd5e1 !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-cal,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-presets{
    border-radius: 16px !important;
    border-color: rgba(71,85,105,.78) !important;
    background: rgba(15,23,42,.78) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day{
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day:hover{
    border-color: rgba(148,163,184,.42);
    transform: translateY(-1px);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day.in-range{
    background: rgba(54, 92, 245, 0.18) !important;
    border-color: rgba(96, 165, 250, 0.18);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day.selected,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-day.range-edge{
    background: linear-gradient(135deg, #365CF5, #2563eb) !important;
    color: #fff !important;
    box-shadow: 0 8px 16px rgba(54,92,245,.30);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-presets-list .btn{
    min-height: 34px;
    border-radius: 11px !important;
    text-align: left;
    padding-left: 12px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-footer{
    border-top: 1px solid rgba(71,85,105,.55) !important;
    padding-top: 12px !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-control-row{
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
    width: 100%;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #accountMultiBtn.account-multi-btn{
    text-align: left !important;
    justify-content: flex-start !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-modern-danger{
    min-height: 46px;
    height: 46px;
    border-radius: 15px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800 !important;
    letter-spacing: .01em;
    color: #fecaca !important;
    background:
      radial-gradient(circle at top left, rgba(239,68,68,.20), transparent 36%),
      rgba(127,29,29,.18) !important;
    border: 1px solid rgba(248,113,113,.35) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 18px rgba(127,29,29,.12) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-modern-danger:hover:not(:disabled),
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-modern-danger:focus:not(:disabled){
    transform: translateY(-1px);
    color: #fff !important;
    background:
      radial-gradient(circle at top left, rgba(239,68,68,.28), transparent 36%),
      rgba(153,27,27,.38) !important;
    border-color: rgba(252,165,165,.62) !important;
    box-shadow: 0 0 0 4px rgba(239,68,68,.16), 0 14px 30px rgba(127,29,29,.22) !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-modern-danger:disabled{
    opacity: .46;
    cursor: not-allowed;
    filter: grayscale(.25);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover{
    top: calc(100% + 12px) !important;
    min-width: min(390px, calc(100vw - 2rem)) !important;
    max-width: min(430px, calc(100vw - 2rem)) !important;
    max-height: 360px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    border-color: rgba(71,85,105,.95) !important;
    background:
      linear-gradient(180deg, rgba(30,41,59,.99), rgba(15,23,42,.99)) !important;
    box-shadow: 0 24px 70px rgba(2,6,23,.66), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .am-header{
    gap: 12px !important;
    padding: 2px 2px 10px;
    border-bottom: 1px solid rgba(71,85,105,.55);
    margin-bottom: 8px !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .am-heading-text{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .am-title{
    font-size: .98rem !important;
    line-height: 1.1;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .am-subtitle{
    color: #94a3b8;
    font-size: .76rem;
    line-height: 1.15;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .am-header-actions{
    flex: 0 0 auto;
    gap: 10px !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .am-header-actions .btn{
    font-size: .76rem !important;
    font-weight: 800;
    text-decoration: none;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .am-body{
    max-height: 265px !important;
    padding: 2px 2px 0;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .am-item{
    padding: 9px 10px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    color: #cbd5e1 !important;
    transition: background .14s ease, transform .14s ease, color .14s ease;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .am-item:hover{
    background: rgba(54,92,245,.13) !important;
    color: #fff !important;
    transform: translateX(2px);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover .form-check-input{
    width: 1.05rem;
    height: 1.05rem;
    border-radius: .35rem;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-modern .modal-content{
    border-radius: 22px !important;
    overflow: hidden;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-header{
    background:
      radial-gradient(circle at top left, rgba(239,68,68,.15), transparent 38%),
      #1e293b !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-header-icon{
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fecaca;
    background: rgba(127,29,29,.28);
    border: 1px solid rgba(248,113,113,.28);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-warning-card{
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 13px;
    padding: 14px;
    border-radius: 18px;
    background:
      radial-gradient(circle at top left, rgba(245,158,11,.18), transparent 34%),
      rgba(15,23,42,.78);
    border: 1px solid rgba(245,158,11,.28);
    margin-bottom: 14px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-warning-icon{
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.26);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-warning-title{
    color: #f8fafc;
    font-weight: 900;
    margin-bottom: 3px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-warning-content p{
    color: #cbd5e1;
    font-size: .9rem;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-target-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(2,6,23,.34);
    border: 1px solid rgba(71,85,105,.72);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-target-label{
    color: #94a3b8;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-target-badge{
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .78rem;
    font-weight: 900;
    color: #fff;
    background: rgba(220,38,38,.92);
    box-shadow: 0 8px 18px rgba(127,29,29,.24);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-check-card{
    padding: 12px 13px !important;
    border-radius: 16px;
    background: rgba(15,23,42,.64);
    border: 1px solid rgba(71,85,105,.72);
    position: relative;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: flex-start;
    column-gap: 10px;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-check-card.muted{
    background: rgba(15,23,42,.38);
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-check-card .form-check-input{
    position: static !important;
    float: none !important;
    margin: 2px 0 0 0 !important;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-check-card .form-check-label{
    min-width: 0;
    width: 100%;
    margin: 0 !important;
    line-height: 1.35;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-note{
    padding: 0 2px;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-footer{
    background: #0f172a !important;
  }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-danger-modern{
    border-radius: 999px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-weight: 800 !important;
  }

  @media (max-width: 767.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .filters-grid{
      gap: 14px !important;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-control-row{
      grid-template-columns: 1fr;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .btn-delete-accounts{
      width: 100%;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-popover,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .account-multi-popover{
      position: fixed !important;
      left: 1rem !important;
      right: 1rem !important;
      top: auto !important;
      bottom: 1rem !important;
      width: auto !important;
      max-width: none !important;
      max-height: min(76vh, 640px) !important;
      overflow-y: auto;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .dr-footer{
      flex-direction: column;
      align-items: stretch !important;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) #drPreview{
      white-space: normal !important;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-warning-card{
      grid-template-columns: 1fr;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-target-box{
      align-items: flex-start;
      flex-direction: column;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .delete-account-target-badge{
      max-width: 100%;
    }
  }

/* ==================== VISTA: html[data-bm-page="dashboard"] ==================== */
/* Origen: dashboard.php:4232 */
/* === Barra de Acciones y Botones (Dark Mode) ===
     Menú propio, sin depender del dropdown JS de Bootstrap.
     Esto evita que el selector quede estático si Popper/Bootstrap no inicializa ese dropdown. */

  :where(html[data-bm-page="dashboard"]) .actions-toolbar-grid{
    width: 100%;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .journal-actions-wrapper{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  :where(html[data-bm-page="dashboard"]) .btn-new-trade-toolbar{
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #365CF5;
    background: linear-gradient(180deg, #4568ff 0%, #365CF5 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    font-size: .9rem;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(54, 92, 245, .28);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
    cursor: pointer;
    overflow: hidden;
  }

  :where(html[data-bm-page="dashboard"]) .btn-new-trade-toolbar:hover,
:where(html[data-bm-page="dashboard"]) .btn-new-trade-toolbar:focus{
    border-color: #6f8cff;
    background: linear-gradient(180deg, #5575ff 0%, #365CF5 100%);
    color: #ffffff;
    box-shadow: 0 0 0 .2rem rgba(54, 92, 245, .18), 0 10px 22px rgba(54, 92, 245, .32);
    transform: translateY(-1px);
    outline: none;
  }

  :where(html[data-bm-page="dashboard"]) .btn-new-trade-toolbar:active{
    transform: translateY(0);
  }

  :where(html[data-bm-page="dashboard"]) .btn-new-trade-toolbar i{
    flex: 0 0 auto;
    font-size: 1rem;
  }

  :where(html[data-bm-page="dashboard"]) .journal-actions-dropdown{
    position: relative;
    width: 100%;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .btn-actions-toggle{
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #334155;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.22);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
    cursor: pointer;
    overflow: hidden;
  }

  :where(html[data-bm-page="dashboard"]) .btn-actions-toggle:hover,
:where(html[data-bm-page="dashboard"]) .btn-actions-toggle:focus{
    border-color: #365CF5;
    box-shadow: 0 0 0 0.2rem rgba(54, 92, 245, 0.18), 0 8px 18px rgba(0,0,0,0.28);
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
  }

  :where(html[data-bm-page="dashboard"]) .btn-actions-toggle:active{
    transform: translateY(0);
  }

  :where(html[data-bm-page="dashboard"]) .btn-actions-toggle.dropdown-toggle::after{
    flex: 0 0 auto;
    margin-left: auto;
    opacity: .75;
  }

  :where(html[data-bm-page="dashboard"]) .actions-toggle-main{
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboard"]) .actions-toggle-main i{
    flex: 0 0 auto;
    font-size: 1.05rem;
    color: #93c5fd;
  }

  /* Se elimina visualmente el texto secundario para evitar superposición. */
  :where(html[data-bm-page="dashboard"]) .actions-toggle-hint{
    display: none !important;
  }

  :where(html[data-bm-page="dashboard"]) .journal-actions-menu{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(320px, calc(100vw - 2rem));
    min-width: 260px;
    max-width: calc(100vw - 2rem);
    padding: 8px;
    margin: 0;
    border: 1px solid #334155;
    border-radius: 14px;
    background: #1e293b;
    box-shadow: 0 18px 42px rgba(0,0,0,0.55);
    z-index: 2050;
    list-style: none;
  }

  :where(html[data-bm-page="dashboard"]) .journal-actions-dropdown.is-open .journal-actions-menu,
:where(html[data-bm-page="dashboard"]) .journal-actions-menu.show{
    display: block !important;
  }

  :where(html[data-bm-page="dashboard"]) .journal-actions-menu-title{
    padding: 5px 8px 8px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  :where(html[data-bm-page="dashboard"]) .journal-actions-divider{
    border-top: 1px dashed #334155;
    margin: 6px 4px;
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-item.dropdown-item{
    width: 100%;
    border: 0;
    border-radius: 10px;
    color: #cbd5e1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: transparent;
    white-space: normal;
    text-align: left;
    cursor: pointer;
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-item.dropdown-item:hover,
:where(html[data-bm-page="dashboard"]) .journal-action-item.dropdown-item:focus{
    background: #0f172a;
    color: #f8fafc;
    outline: none;
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-icon{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #334155;
    color: #93c5fd;
    border: 1px solid #475569;
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-item:hover .journal-action-icon,
:where(html[data-bm-page="dashboard"]) .journal-action-item:focus .journal-action-icon{
    background: rgba(54, 92, 245, 0.18);
    border-color: rgba(54, 92, 245, 0.5);
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-text{
    min-width: 0;
    display: block;
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-text strong{
    display: block;
    color: #f8fafc !important;
    font-size: .9rem;
    line-height: 1.15;
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-text small{
    display: block;
    color: #94a3b8 !important;
    font-size: .74rem;
    line-height: 1.2;
    margin-top: 2px;
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-item.primary-action{
    background: rgba(54, 92, 245, 0.13);
    border: 1px solid rgba(54, 92, 245, 0.36);
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-item.primary-action:hover,
:where(html[data-bm-page="dashboard"]) .journal-action-item.primary-action:focus{
    background: rgba(54, 92, 245, 0.24);
  }

  :where(html[data-bm-page="dashboard"]) .journal-action-item.primary-action .journal-action-icon{
    background: #365CF5;
    border-color: #365CF5;
    color: #ffffff;
  }

  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboard"]) .journal-actions-menu{
      right: 0;
      width: min(300px, calc(100vw - 2rem));
      min-width: min(260px, calc(100vw - 2rem));
    }
  }

  @media (max-width: 420px){
    :where(html[data-bm-page="dashboard"]) .journal-actions-wrapper{
      grid-template-columns: 1fr;
    }
  }

/* ==================== VISTA: html[data-bm-page="dashboard"] ==================== */
/* Origen: dashboard.php:4490 */
/* ===== Two-row dashboard toolbar ===== */
  :where(html[data-bm-page="dashboard"]) .filters-primary-date{ grid-column: 1; }
  :where(html[data-bm-page="dashboard"]) .filters-primary-account{ grid-column: 2; min-width: 0; }
  :where(html[data-bm-page="dashboard"]) .filters-primary-delete{ grid-column: 3; min-width: 0; }
  :where(html[data-bm-page="dashboard"]) .filters-actions-row{ grid-column: 1 / -1; min-width: 0; padding-top: 2px; }
  :where(html[data-bm-page="dashboard"]) .filters-primary-account .account-control-row{ grid-template-columns: minmax(0, 1fr); }
  :where(html[data-bm-page="dashboard"]) .filters-primary-delete .btn-delete-accounts{ width: 100%; }

  @media (min-width: 768px){
    :where(html[data-bm-page="dashboard"]) .filters-grid{
      grid-template-columns: minmax(180px, 240px) minmax(250px, 1fr) minmax(108px, 132px) !important;
      row-gap: 10px;
      column-gap: 12px;
    }
    :where(html[data-bm-page="dashboard"]) .filters-actions-row .journal-actions-wrapper{
      width: min(100%, 520px);
      margin-left: auto;
    }
  }

  @media (max-width: 767.98px){
    :where(html[data-bm-page="dashboard"]) .filters-primary-date,
:where(html[data-bm-page="dashboard"]) .filters-primary-account,
:where(html[data-bm-page="dashboard"]) .filters-primary-delete,
:where(html[data-bm-page="dashboard"]) .filters-actions-row{
      grid-column: 1 !important;
    }
    :where(html[data-bm-page="dashboard"]) .filters-actions-row{ padding-top: 0; }
  }

  @media (max-width: 420px){
    :where(html[data-bm-page="dashboard"]) .filters-actions-row .journal-actions-wrapper{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 7px;
    }
    :where(html[data-bm-page="dashboard"]) .filters-actions-row .btn-new-trade-toolbar,
:where(html[data-bm-page="dashboard"]) .filters-actions-row .btn-actions-toggle{
      padding-left: 8px;
      padding-right: 8px;
    }
    :where(html[data-bm-page="dashboard"]) .filters-actions-row .btn-new-trade-toolbar,
:where(html[data-bm-page="dashboard"]) .filters-actions-row .actions-toggle-main{
      font-size: .79rem;
    }
    :where(html[data-bm-page="dashboard"]) .filters-actions-row .actions-toggle-main{ gap: 6px; }
  }

  /* Los modales y su backdrop siempre deben quedar por encima de widgets flotantes (por ejemplo, “Habla con BRUNO MEZA”). */
  :where(html[data-bm-page="dashboard"]) .modal{
    z-index: 2147483600 !important;
  }

  :where(html[data-bm-page="dashboard"]) .modal-backdrop{
    z-index: 2147483500 !important;
  }

  /* ===== New Trade modal: modern, organized, responsive ===== */
  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-dialog{
    width: min(760px, calc(100vw - 24px));
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-content{
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: #0b1220;
    color: #e2e8f0;
    box-shadow: 0 28px 80px rgba(2, 6, 23, .62);
  }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .manual-trade-modal-header{
    padding: 18px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    background:
      radial-gradient(circle at top left, rgba(54, 92, 245, .18), transparent 38%),
      linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(10, 18, 33, .98));
  }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .btn-close{
    filter: invert(1) grayscale(100%) brightness(190%);
    opacity: .72;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-heading{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-heading-icon{
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(54, 92, 245, .18);
    border: 1px solid rgba(99, 125, 255, .36);
    color: #a9baff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-kicker{
    margin-bottom: 2px;
    color: #8ea8ff;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-title{
    color: #f8fafc;
    font-weight: 850;
    letter-spacing: -.015em;
  }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-body{
    padding: 16px 18px 8px;
    background: #0b1220;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-section{
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 17px;
    border: 1px solid rgba(71, 85, 105, .62);
    background: rgba(15, 23, 42, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-section-heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-section-heading > div{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-section-heading strong{
    display: block;
    color: #f8fafc;
    font-size: .88rem;
    line-height: 1.2;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-section-heading small{
    display: block;
    margin-top: 2px;
    color: #7f8da3;
    font-size: .72rem;
    line-height: 1.25;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-step{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c7d2fe;
    background: rgba(54, 92, 245, .16);
    border: 1px solid rgba(99, 125, 255, .26);
    font-size: .75rem;
    font-weight: 900;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-selector-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    align-items: stretch;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-existing{ min-width: 0; }

  :where(html[data-bm-page="dashboard"]) .manual-account-quick-action{
    min-width: 0;
    min-height: 46px;
    padding: 8px 11px;
    border: 1px dashed rgba(99, 125, 255, .48);
    border-radius: 13px;
    background: rgba(54, 92, 245, .07);
    color: #e2e8f0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    text-align: left;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-quick-action:hover,
:where(html[data-bm-page="dashboard"]) .manual-account-quick-action:focus,
:where(html[data-bm-page="dashboard"]) .manual-account-quick-action.is-active{
    border-color: rgba(113, 137, 255, .88);
    background: rgba(54, 92, 245, .14);
    box-shadow: 0 0 0 3px rgba(54, 92, 245, .10);
    color: #fff;
    outline: none;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-quick-action:hover{ transform: translateY(-1px); }

  :where(html[data-bm-page="dashboard"]) .manual-account-quick-icon{
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #365CF5;
    box-shadow: 0 7px 16px rgba(54, 92, 245, .24);
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-quick-copy{ min-width: 0; }
  :where(html[data-bm-page="dashboard"]) .manual-account-quick-copy strong{
    display: block;
    color: #f8fafc;
    font-size: .81rem;
    line-height: 1.15;
  }
  :where(html[data-bm-page="dashboard"]) .manual-account-quick-copy small{
    display: block;
    margin-top: 2px;
    color: #8fa0b7;
    font-size: .69rem;
    line-height: 1.18;
  }
  :where(html[data-bm-page="dashboard"]) .manual-account-quick-chevron{
    color: #8291aa;
    font-size: .8rem;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-entry{
    margin-top: 12px;
    padding: 13px;
    border: 1px solid rgba(99, 125, 255, .35);
    border-radius: 14px;
    background:
      radial-gradient(circle at top left, rgba(54, 92, 245, .10), transparent 42%),
      rgba(9, 16, 29, .92);
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-entry-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-entry-head strong{
    display: block;
    color: #f8fafc;
    font-size: .8rem;
    line-height: 1.25;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-entry-kicker{
    display: block;
    margin-bottom: 2px;
    color: #93a9ff;
    font-size: .64rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-use-existing{
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #a9baff;
    font-size: .7rem;
    font-weight: 800;
    padding: 3px 0;
    cursor: pointer;
  }
  :where(html[data-bm-page="dashboard"]) .manual-account-use-existing:hover,
:where(html[data-bm-page="dashboard"]) .manual-account-use-existing:focus{ color: #fff; outline: none; }

  :where(html[data-bm-page="dashboard"]) .manual-account-input-wrap{
    position: relative;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-input-icon{
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #7c8ca5;
    pointer-events: none;
    z-index: 2;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-input-wrap .form-control{
    padding-left: 34px;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-exact-note{
    margin-top: 9px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 9px 10px;
    border: 1px solid rgba(245, 158, 11, .24);
    border-radius: 11px;
    background: rgba(245, 158, 11, .065);
    color: #aebbd0;
    font-size: .73rem;
    line-height: 1.38;
  }

  :where(html[data-bm-page="dashboard"]) .manual-account-exact-note i{
    color: #fbbf24;
    font-size: .95rem;
    margin-top: 1px;
  }
  :where(html[data-bm-page="dashboard"]) .manual-account-exact-note strong{ color: #f8fafc; }

  /* Flujo vertical: cada dato ocupa su propio renglón para reducir omisiones al completar el trade. */
  :where(html[data-bm-page="dashboard"]) .manual-trade-vertical-stack{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-vertical-field{
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-vertical-field + .manual-trade-vertical-field{
    padding-top: 2px;
  }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .form-label{
    color: #cbd5e1;
    font-weight: 750;
  }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .form-control,
:where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .form-select{
    min-height: 38px;
    border-color: #334155;
    background-color: #0f172a;
    color: #f8fafc;
    border-radius: 10px;
  }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .form-control:focus,
:where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .form-select:focus{
    border-color: #5e7aff;
    box-shadow: 0 0 0 .18rem rgba(54, 92, 245, .14);
  }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .form-text{
    margin-top: 5px;
    color: #718096;
    font-size: .7rem;
    line-height: 1.3;
  }

  :where(html[data-bm-page="dashboard"]) .manual-trade-commission-note{
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(14, 165, 233, .065);
    border: 1px solid rgba(56, 189, 248, .17);
    color: #9eb0c8;
    font-size: .72rem;
    line-height: 1.35;
  }
  :where(html[data-bm-page="dashboard"]) .manual-trade-commission-note i{ color: #7dd3fc; margin-top: 1px; }

  :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-footer{
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(148, 163, 184, .14);
    background: #0b1220;
  }

  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-dialog{
      width: calc(100vw - 14px);
      margin: 7px auto;
      min-height: calc(100% - 14px);
    }
    :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-content{ border-radius: 18px; }
    :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .manual-trade-modal-header{ padding: 14px; }
    :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-body{ padding: 12px 10px 4px; }
    :where(html[data-bm-page="dashboard"]) .manual-trade-section{ padding: 12px; border-radius: 14px; margin-bottom: 10px; }
    :where(html[data-bm-page="dashboard"]) .manual-account-selector-grid{ grid-template-columns: 1fr; gap: 9px; }
    :where(html[data-bm-page="dashboard"]) .manual-account-quick-action{ min-height: 46px; }
    :where(html[data-bm-page="dashboard"]) .manual-account-entry-head{ flex-direction: column; gap: 6px; }
    :where(html[data-bm-page="dashboard"]) .manual-account-use-existing{ align-self: flex-start; }
    :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .input-group{ flex-wrap: nowrap; }
    :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-footer{
      padding: 10px;
      gap: 8px;
    }
    :where(html[data-bm-page="dashboard"]) .tj-manual-trade-modal .modal-footer .btn{ flex: 1 1 0; }
    :where(html[data-bm-page="dashboard"]) #manualTradeError{ flex: 1 0 100%; margin-bottom: 2px; }
  }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"] ==================== */
/* Origen: dashboard.php:4916, dashboardAnt.php:4309 */
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-content{
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(2, 6, 23, .58);
    overflow: hidden;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-header,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-footer{
    border-color: rgba(148, 163, 184, .18);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); }

  /* V9: keep the share modal inside the viewport and scroll only the content area */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-dialog{
    max-height: calc(100dvh - 24px);
    margin-top: 12px;
    margin-bottom: 12px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-content{
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-header,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-footer{
    flex: 0 0 auto;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(2, 6, 23, .98));
    box-shadow: 0 -14px 35px rgba(2, 6, 23, .26);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-footer-save-copy{
    min-width: 0;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-footer-save-copy strong{
    display: block;
    color: #f8fafc;
    font-size: .9rem;
    font-weight: 950;
    line-height: 1.2;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-footer-save-copy span{
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: .76rem;
    line-height: 1.25;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-footer-actions{
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-body::-webkit-scrollbar{ width: 10px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-body::-webkit-scrollbar-track{ background: rgba(2, 6, 23, .28); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-body::-webkit-scrollbar-thumb{ background: rgba(148, 163, 184, .32); border-radius: 999px; border: 2px solid rgba(15, 23, 42, .88); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-body::-webkit-scrollbar-thumb:hover{ background: rgba(148, 163, 184, .48); }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-hero{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 18px;
    background: radial-gradient(circle at 0% 0%, rgba(54, 92, 245, .28), transparent 38%), linear-gradient(135deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .96));
    border: 1px solid rgba(96, 165, 250, .22);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-icon{
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #365CF5, #6d86ff);
    color: #fff;
    box-shadow: 0 14px 28px rgba(54, 92, 245, .28);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-hero h5,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-hero p{ margin: 0; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-hero h5{ color: #fff; font-weight: 900; letter-spacing: -.02em; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-hero p{ margin-top: 6px; color: #a7b4c8; line-height: 1.5; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-url-box{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 18px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-url-box input{
    min-height: 46px;
    background: #020617;
    border: 1px solid rgba(148, 163, 184, .25);
    color: #f8fafc;
    border-radius: 12px;
    padding: 0 14px;
    font-size: .92rem;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-copy-btn{
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    padding: 0 18px;
    background: #365CF5;
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 12px 28px rgba(54, 92, 245, .28);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-copy-btn:hover{ filter: brightness(1.06); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-card{
    padding: 14px;
    border-radius: 16px;
    background: rgba(15, 23, 42, .62);
    border: 1px solid rgba(148, 163, 184, .18);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-card strong{
    display: flex;
    gap: 8px;
    align-items: center;
    color: #f8fafc;
    font-size: .92rem;
    margin-bottom: 7px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-card ul{
    margin: 0;
    padding-left: 18px;
    color: #a7b4c8;
    font-size: .87rem;
    line-height: 1.55;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-card.can strong i{ color: #86efac; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-card.cannot strong i{ color: #fca5a5; }


  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-panel{
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(15, 23, 42, .82), rgba(30, 41, 59, .72));
    border: 1px solid rgba(148, 163, 184, .22);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-title{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 900;
    letter-spacing: -.015em;
    margin-bottom: 6px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-title i{ color: #93c5fd; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-help{
    color: #a7b4c8;
    font-size: .88rem;
    line-height: 1.45;
    margin-bottom: 14px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-options{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-option{
    position: relative;
    display: block;
    min-height: 108px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, .66);
    border: 1px solid rgba(148, 163, 184, .20);
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-option:hover{
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, .42);
    background: rgba(30, 41, 59, .74);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-option input{ position: absolute; opacity: 0; pointer-events: none; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-option span{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 900;
    margin-bottom: 6px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-option small{
    display: block;
    color: #94a3b8;
    line-height: 1.35;
    font-size: .78rem;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-option:has(input:checked){
    border-color: rgba(54, 92, 245, .72);
    box-shadow: 0 0 0 3px rgba(54, 92, 245, .18);
    background: rgba(54, 92, 245, .14);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-display-name-row{
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(2, 6, 23, .38);
    border: 1px solid rgba(96, 165, 250, .22);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-display-name-row[hidden]{ display: none !important; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-display-name-row label{
    display: block;
    margin-bottom: 8px;
    color: #f8fafc;
    font-size: .86rem;
    font-weight: 900;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-display-name-row small{
    display: block;
    margin-top: 8px;
    color: #94a3b8;
    font-size: .78rem;
    line-height: 1.4;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-display-name-input{
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: rgba(2, 6, 23, .62);
    color: #e2e8f0;
    padding: 0 13px;
    outline: none;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-display-name-input:focus{
    border-color: rgba(96, 165, 250, .70);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .16);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-actions{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(54, 92, 245, .10);
    border: 1px solid rgba(96, 165, 250, .22);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-save-explain strong{
    display: block;
    color: #f8fafc;
    font-size: .9rem;
    font-weight: 900;
    margin-bottom: 3px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-save-explain span{
    display: block;
    color: #a7b4c8;
    font-size: .8rem;
    line-height: 1.35;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-save-identity-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(135deg, #365CF5, #6d86ff);
    color: #fff;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(54, 92, 245, .28);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-save-identity-btn:hover{ filter: brightness(1.06); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-current-display{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .12);
    color: #bbf7d0;
    border: 1px solid rgba(34, 197, 94, .24);
    font-size: .82rem;
    font-weight: 800;
  }


  /* V8: compact, modern public sharing settings */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-compact-head{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(54, 92, 245, .16), rgba(15, 23, 42, .82));
    border: 1px solid rgba(96, 165, 250, .22);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-compact-head h5{ margin: 0; color: #fff; font-weight: 950; letter-spacing: -.02em; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-compact-head p{ margin: 4px 0 0; color: #a7b4c8; font-size: .9rem; line-height: 1.35; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-settings-panel{ margin-top: 16px; display: grid; gap: 14px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-settings-section{
    padding: 15px;
    border-radius: 18px;
    background: rgba(15, 23, 42, .62);
    border: 1px solid rgba(148, 163, 184, .18);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-settings-heading{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-settings-heading strong{ display: flex; align-items: center; gap: 8px; color: #f8fafc; font-size: .94rem; font-weight: 950; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-settings-heading strong i{ color: #93c5fd; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-settings-heading span{ display: block; margin-top: 3px; color: #94a3b8; font-size: .8rem; line-height: 1.35; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-options.compact .tj-public-identity-option{ min-height: 86px; padding: 12px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-options.compact .tj-public-identity-option small{ font-size: .75rem; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-permission-list{ display: grid; gap: 10px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-permission-row{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 15px;
    background: rgba(2, 6, 23, .34);
    border: 1px solid rgba(148, 163, 184, .16);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-permission-row:hover{ transform: translateY(-1px); background: rgba(30, 41, 59, .62); border-color: rgba(96, 165, 250, .35); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-permission-row input{ position: absolute; opacity: 0; pointer-events: none; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-permission-switch{ position: relative; width: 44px; height: 24px; border-radius: 999px; background: #334155; border: 1px solid rgba(148, 163, 184, .22); transition: background .18s ease, border-color .18s ease; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-permission-switch::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #cbd5e1; transition: transform .18s ease, background .18s ease; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-permission-row input:checked + .tj-permission-switch{ background: #365CF5; border-color: #6d86ff; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-permission-row input:checked + .tj-permission-switch::after{ transform: translateX(20px); background: #fff; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-permission-text strong{ display: block; color: #f8fafc; font-size: .88rem; font-weight: 900; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-permission-text small{ display: block; margin-top: 2px; color: #94a3b8; font-size: .76rem; line-height: 1.32; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-save-bar{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-radius: 17px; background: rgba(54, 92, 245, .12); border: 1px solid rgba(96, 165, 250, .22); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-save-bar strong{ display: block; color: #f8fafc; font-weight: 950; font-size: .92rem; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-save-bar span{ display: block; color: #a7b4c8; font-size: .78rem; line-height: 1.3; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-note-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-note-row span{ display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; background: rgba(15, 23, 42, .62); border: 1px solid rgba(148, 163, 184, .16); color: #a7b4c8; font-size: .78rem; line-height: 1.2; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-note-row span:first-child i{ color: #86efac; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-note-row span:last-child i{ color: #fca5a5; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-access-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid rgba(148, 163, 184, .14); border-radius: 16px; background: rgba(15, 23, 42, .46); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-access-copy strong{ display: block; color: #f8fafc; font-size: .92rem; font-weight: 900; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-access-copy small{ display: block; margin-top: 3px; color: #94a3b8; font-size: .78rem; line-height: 1.35; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-panel{ margin-top: 12px; padding: 12px; border-radius: 16px; border: 1px solid rgba(96, 165, 250, .18); background: rgba(2, 6, 23, .28); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-panel[hidden]{ display: none !important; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-tools{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #cbd5e1; font-size: .82rem; font-weight: 850; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-actions{ display: inline-flex; gap: 6px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-actions button{ border: 1px solid rgba(148, 163, 184, .20); background: rgba(15, 23, 42, .72); color: #bfdbfe; border-radius: 999px; padding: 5px 9px; font-size: .74rem; font-weight: 850; line-height: 1; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-actions button:hover{ background: rgba(54, 92, 245, .20); color: #fff; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: 190px; overflow: auto; padding-right: 4px; align-items: stretch; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-item{ min-width: 0; width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, .14); background: rgba(15, 23, 42, .62); color: #e2e8f0; font-size: .82rem; font-weight: 750; cursor: pointer; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-item:hover{ border-color: rgba(96, 165, 250, .34); background: rgba(30, 41, 59, .72); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-item input[type="checkbox"]{ appearance: none; -webkit-appearance: none; flex: 0 0 18px; width: 18px !important; height: 18px !important; min-width: 18px; max-width: 18px; min-height: 18px; max-height: 18px; margin: 0; border-radius: 5px; border: 1.5px solid rgba(148, 163, 184, .55); background: rgba(15, 23, 42, .90); display: inline-grid; place-content: center; cursor: pointer; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-item input[type="checkbox"]::after{ content: ''; width: 5px; height: 9px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transform-origin: center; transition: transform .14s ease; margin-top: -1px; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-item input[type="checkbox"]:checked{ background: #365CF5; border-color: #8ea2ff; box-shadow: 0 0 0 3px rgba(54, 92, 245, .18); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-item input[type="checkbox"]:checked::after{ transform: rotate(45deg) scale(1); }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-item span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-empty{ padding: 12px; border-radius: 12px; color: #94a3b8; background: rgba(15, 23, 42, .52); font-size: .82rem; line-height: 1.4; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-notes-restricted .trade-note-btn,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-rules-restricted .btn-rule-check.tj-public-restricted{ opacity: .72; border-style: dashed; cursor: pointer; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-accounts-masked .tj-account-masked{ letter-spacing: .01em; }

  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-dialog{
      max-height: calc(100dvh - 12px);
      margin: 6px;
    }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-modal .modal-content{ max-height: calc(100dvh - 12px); border-radius: 18px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-footer{ align-items: stretch; flex-direction: column; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-account-access-head{ align-items: stretch; flex-direction: column; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-tools{ align-items: flex-start; flex-direction: column; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-accounts-list{ grid-template-columns: 1fr; max-height: 170px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-footer-actions{ width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-footer-actions .main-btn,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-footer-actions .tj-public-save-identity-btn{ width: 100%; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-options{ grid-template-columns: 1fr; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-url-box{ grid-template-columns: 1fr; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-share-grid{ grid-template-columns: 1fr; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-identity-actions{ flex-direction: column; align-items: stretch; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .tj-public-save-identity-btn{ width: 100%; }
  }

/* ==================== VISTA: html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"] ==================== */
/* Origen: dashboard.php:5330, dashboardAnt.php:4723 */
/* En modo público se conserva exactamente el layout base de openView:
     menu.php + <main class="main-wrapper"> + header.php + secciones internas.
     No se altera .main-wrapper para no invadir el menú ni el header. */
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-banner{
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 8% 0%, rgba(54, 92, 245, .32), transparent 36%),
      radial-gradient(circle at 94% 12%, rgba(34, 197, 94, .18), transparent 30%),
      linear-gradient(135deg, #0f172a 0%, #111c31 52%, #17233a 100%);
    border: 1px solid rgba(148, 163, 184, .22);
    color: #e2e8f0;
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 20px 55px rgba(2, 6, 23, .38);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-banner::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 72%);
    pointer-events: none;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-content{
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-icon{
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #365CF5, #6d86ff);
    color: #fff;
    box-shadow: 0 14px 30px rgba(54, 92, 245, .30);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .13);
    color: #bbf7d0;
    border: 1px solid rgba(34,197,94,.30);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-banner h5{
    color:#ffffff;
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -.02em;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-banner p{
    color:#a7b4c8;
    max-width: 820px;
    line-height: 1.52;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-pill{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .76);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, .22);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-pill i{ color: #86efac; }

  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-owner-card{
    position: relative;
    min-width: 245px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 13px;
    border-radius: 18px;
    background: rgba(15, 23, 42, .78);
    border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-owner-avatar{
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(59,130,246,.92));
    color: #fff;
    font-weight: 1000;
    letter-spacing: -.03em;
    box-shadow: 0 12px 24px rgba(34,197,94,.15);
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-owner-meta{ min-width: 0; }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-owner-kicker{
    display: block;
    color: #94a3b8;
    font-size: .70rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-owner-name{
    display: block;
    color: #fff;
    font-size: .98rem;
    line-height: 1.15;
    font-weight: 950;
    max-width: 175px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-owner-caption{
    display: block;
    margin-top: 4px;
    color: #a7b4c8;
    font-size: .76rem;
    line-height: 1.25;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly .owner-only,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly [data-owner-only="1"]{
    display: none !important;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly .trade-type-select,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly .btn-include-toggle{
    pointer-events: none !important;
    opacity: .70;
  }
  :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly .note-toolbar,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly #dayNoteImageInput,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly #dayNoteImageRemoveBtn,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly #tradeNoteImageInput,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly #tradeNoteImageRemoveBtn,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly #saveNoteBtn,
:where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) body.tj-public-readonly #saveTradeNoteBtn{
    display: none !important;
  }
  @media (max-width: 767.98px){
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-content{ grid-template-columns: 1fr; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-icon{ width: 48px; height: 48px; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-pill{ width: fit-content; white-space: normal; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-dashboard-owner-card{ width: 100%; min-width: 0; }
    :where(html[data-bm-page="dashboard"], html[data-bm-page="dashboardAnt"]) .public-owner-name{ max-width: none; white-space: normal; }
  }

/* ==================== VISTA: html[data-bm-page="dashboard"] ==================== */
/* Origen: dashboard.php:5829 */
:where(html[data-bm-page="dashboard"]) .journal-addon-section{
    margin-bottom: 8px;
  }

  /* Acceso rápido: siempre descubrible, pero deliberadamente compacto para no añadir ruido diario. */
  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(71, 85, 105, .72);
    border-radius: 14px;
    background: rgba(15, 23, 42, .78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-copy{
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-icon{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(90, 116, 255, .22);
    background: rgba(54, 92, 245, .10);
    color: #8ea3ff;
    font-size: .95rem;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-text{
    min-width: 0;
    line-height: 1.2;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-text strong{
    display: block;
    margin-bottom: 2px;
    color: #f8fafc;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: -.01em;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-text small{
    display: block;
    color: #94a3b8;
    font-size: .71rem;
    line-height: 1.3;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-btn{
    height: 32px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid #334155;
    border-radius: 9px;
    background: rgba(30, 41, 59, .82);
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-btn:hover,
:where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-btn:focus-visible{
    border-color: rgba(111, 140, 255, .72);
    background: rgba(54, 92, 245, .13);
    color: #f8fafc;
    box-shadow: 0 0 0 3px rgba(54, 92, 245, .10);
    outline: none;
    transform: translateY(-1px);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-btn:active{
    transform: translateY(0);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-btn.is-active{
    border-color: rgba(111, 140, 255, .82);
    background: rgba(54, 92, 245, .18);
    color: #ffffff;
  }

  @media (max-width: 767.98px){
    :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar{
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-actions{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: 100%;
      gap: 6px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-btn{
      width: 100%;
      padding-left: 7px;
      padding-right: 7px;
    }
  }

  @media (max-width: 420px){
    :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar{
      padding: 8px;
      border-radius: 12px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-text strong{
      font-size: .79rem;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-text small{
      font-size: .68rem;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-quickbar-btn{
      height: 31px;
      gap: 5px;
      font-size: .69rem;
    }
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-panel{
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 18px;
    background:
      radial-gradient(circle at top left, rgba(54, 92, 245, 0.16), transparent 34%),
      linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-panel::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent 28%, transparent 72%, rgba(255,255,255,0.025));
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-toggle{
    position: relative;
    z-index: 1;
    width: 100%;
    border: 0;
    background: transparent;
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-toggle:hover,
:where(html[data-bm-page="dashboard"]) .journal-addon-reveal-toggle:focus{
    background: rgba(255,255,255,0.035);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-toggle:focus{
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(54, 92, 245, 0.42);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-left,
:where(html[data-bm-page="dashboard"]) .journal-addon-reveal-right,
:where(html[data-bm-page="dashboard"]) .journal-addon-reveal-pills,
:where(html[data-bm-page="dashboard"]) .journal-addon-reveal-cta{
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-left{
    gap: 12px;
    flex: 1 1 auto;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-icon{
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    box-shadow: 0 12px 26px rgba(54, 92, 245, 0.22), inset 0 1px 0 rgba(255,255,255,.08);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-copy{
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-title{
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-subtitle{
    margin-top: 4px;
    color: #94a3b8;
    font-size: .82rem;
    line-height: 1.35;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-right{
    flex: 0 0 auto;
    gap: 12px;
    justify-content: flex-end;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-pills{
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-pill{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.64);
    border: 1px solid rgba(51, 65, 85, 0.86);
    color: #cbd5e1;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-pill i{
    color: #7da0ff;
    font-size: .82rem;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-cta{
    gap: 8px;
    border-radius: 999px;
    padding: 7px 10px 7px 13px;
    background: rgba(54, 92, 245, 0.14);
    border: 1px solid rgba(54, 92, 245, 0.36);
    color: #f8fafc;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-chevron{
    width: 23px;
    height: 23px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(54, 92, 245, 0.18);
    color: #9db5ff;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-chevron i{
    transition: transform .2s ease, color .2s ease;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-toggle[aria-expanded="true"] .journal-addon-reveal-chevron i{
    transform: rotate(180deg);
    color: #ffffff;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-body{
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(51, 65, 85, 0.72);
  }

  :where(html[data-bm-page="dashboard"]) #credBanner .journal-addon-reveal-body:not(.show){
    display: none;
  }

  :where(html[data-bm-page="dashboard"]) #credBanner .journal-addon-reveal-body.show{
    display: block;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-main{
    position: relative;
    display: grid;
    grid-template-columns: minmax(230px, 0.95fr) minmax(360px, 1.35fr) minmax(250px, 0.85fr);
    gap: 14px;
    align-items: stretch;
    padding: 14px;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-intro,
:where(html[data-bm-page="dashboard"]) .journal-addon-credentials,
:where(html[data-bm-page="dashboard"]) .journal-addon-actions{
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-intro{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 15px;
    background: rgba(15, 23, 42, 0.36);
    border: 1px solid rgba(51, 65, 85, 0.55);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-icon{
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(54, 92, 245, 0.14);
    color: #7da0ff;
    border: 1px solid rgba(54, 92, 245, 0.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-icon i{
    font-size: 18px;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-heading{
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-eyebrow{
    color: #7da0ff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 3px;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-title{
    color: #f8fafc;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.15;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-subtitle{
    color: #94a3b8;
    font-size: .78rem;
    line-height: 1.25;
    margin-top: 3px;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-credentials{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-content: center;
  }

  :where(html[data-bm-page="dashboard"]) .journal-credential-card{
    display: grid;
    grid-template-columns: minmax(110px, 132px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 15px;
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(51, 65, 85, 0.86);
  }

  :where(html[data-bm-page="dashboard"]) .journal-credential-label{
    margin-bottom: 0;
    color: #94a3b8 !important;
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.2;
    display: flex;
    align-items: center;
    min-height: 34px;
  }

  :where(html[data-bm-page="dashboard"]) #credBanner .cred-input,
:where(html[data-bm-page="dashboard"]) #credBanner .journal-credential-input{
    height: 38px;
    font-size: .90rem;
    border-radius: 11px;
  }

  :where(html[data-bm-page="dashboard"]) #credBanner .journal-credential-group .form-control{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
  }

  :where(html[data-bm-page="dashboard"]) #credBanner .btn-icon{
    height: 34px;
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-color: #334155;
    color: #94a3b8;
    background: #0f172a;
  }

  :where(html[data-bm-page="dashboard"]) #credBanner .btn-icon:hover,
:where(html[data-bm-page="dashboard"]) #credBanner .btn-icon:focus{
    background-color: #334155;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboard"]) #credBanner .journal-credential-group .btn-icon{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  :where(html[data-bm-page="dashboard"]) #credBanner .journal-credential-group .btn-icon + .btn-icon{
    border-left: 0;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-btn{
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    text-align: left;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-btn:hover,
:where(html[data-bm-page="dashboard"]) .journal-addon-action-btn:focus{
    transform: translateY(-1px);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-primary{
    background: #365CF5;
    border: 1px solid #365CF5;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(54, 92, 245, 0.28);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-primary:hover,
:where(html[data-bm-page="dashboard"]) .journal-addon-action-primary:focus{
    background: #2b4bca;
    border-color: #2b4bca;
    box-shadow: 0 14px 30px rgba(54, 92, 245, 0.38);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-secondary{
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(54, 92, 245, 0.42);
    color: #f8fafc !important;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-secondary:hover,
:where(html[data-bm-page="dashboard"]) .journal-addon-action-secondary:focus{
    background: rgba(54, 92, 245, 0.14);
    border-color: rgba(125, 160, 255, 0.72);
    color: #ffffff !important;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-icon{
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    color: inherit;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-secondary .journal-addon-action-icon{
    background: rgba(54, 92, 245, 0.13);
    color: #7da0ff;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-copy{
    min-width: 0;
    display: block;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-copy strong,
:where(html[data-bm-page="dashboard"]) .journal-addon-action-copy small{
    display: block;
    line-height: 1.1;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-copy strong{
    color: inherit !important;
    font-size: .88rem;
    font-weight: 800;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-copy small{
    margin-top: 3px;
    color: rgba(248,250,252,.76) !important;
    font-size: .72rem;
    font-weight: 600;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-action-secondary .journal-addon-action-copy small{
    color: #94a3b8 !important;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help{
    position: relative;
    border-top: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.55);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-toggle{
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    color: #f8fafc;
    text-align: left;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-toggle:hover{
    background: rgba(255,255,255,0.025);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-toggle:focus{
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(54, 92, 245, 0.42);
    border-radius: 0 0 16px 16px;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-left,
:where(html[data-bm-page="dashboard"]) .journal-addon-help-right{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-left{
    flex: 1 1 auto;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-icon{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(54, 92, 245, 0.12);
    color: #7da0ff;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-text{
    min-width: 0;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-text strong{
    display: block;
    color: #e2e8f0 !important;
    font-size: .84rem;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-text small{
    display: block;
    margin-top: 2px;
    color: #64748b !important;
    font-size: .74rem;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-right{
    flex: 0 0 auto;
  }

  :where(html[data-bm-page="dashboard"]) #credDataWarning .cred-alert-pill{
    background: rgba(54, 92, 245, 0.10);
    color: #7da0ff;
    border: 1px solid rgba(54, 92, 245, 0.30);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .25rem .55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboard"]) #credDataWarning .cred-alert-chevron{
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
  }

  :where(html[data-bm-page="dashboard"]) #credDataWarning .cred-alert-chevron i{
    transition: transform .2s ease, color .2s ease;
  }

  :where(html[data-bm-page="dashboard"]) #credDataWarning .cred-alert-toggle[aria-expanded="true"] .cred-alert-chevron i{
    transform: rotate(180deg);
    color: #7da0ff;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-body{
    border-top: 1px solid rgba(51, 65, 85, 0.55);
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px 14px;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-message{
    color: #94a3b8;
    font-size: .82rem;
    line-height: 1.45;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-message b{
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-btn{
    flex: 0 0 auto;
    background-color: rgba(54, 92, 245, 0.13);
    color: #f8fafc !important;
    border: 1px solid rgba(54, 92, 245, 0.42);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
    padding: 7px 14px;
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboard"]) .journal-addon-help-btn:hover,
:where(html[data-bm-page="dashboard"]) .journal-addon-help-btn:focus{
    background-color: #365CF5;
    border-color: #365CF5;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(54, 92, 245, 0.32);
  }

  @media (max-width: 1199.98px){
    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-toggle{
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 12px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-left{
      width: 100%;
      max-width: 100%;
      align-items: flex-start;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-copy{
      width: 100%;
      max-width: 100%;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-title,
:where(html[data-bm-page="dashboard"]) .journal-addon-reveal-subtitle{
      max-width: 100%;
      overflow-wrap: normal;
      word-break: normal;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-right{
      width: 100%;
      max-width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-pills{
      flex: 1 1 auto;
      max-width: 100%;
      justify-content: flex-start;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-main{
      grid-template-columns: 1fr;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-intro{
      align-items: flex-start;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-actions{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 767.98px){
    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-toggle{
      padding: 14px;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-left{
      align-items: flex-start;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-right,
:where(html[data-bm-page="dashboard"]) .journal-addon-reveal-pills{
      width: 100%;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-pills{
      justify-content: flex-start;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-cta{
      margin-left: auto;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-main{
      padding: 12px;
      gap: 10px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-credential-card{
      grid-template-columns: 1fr;
      gap: 6px;
      align-items: stretch;
    }

    :where(html[data-bm-page="dashboard"]) .journal-credential-label{
      min-height: 0;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-credentials,
:where(html[data-bm-page="dashboard"]) .journal-addon-actions{
      grid-template-columns: 1fr;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-help-toggle,
:where(html[data-bm-page="dashboard"]) .journal-addon-help-content{
      align-items: stretch;
      flex-direction: column;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-help-right{
      width: 100%;
      justify-content: space-between;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-help-text strong,
:where(html[data-bm-page="dashboard"]) .journal-addon-help-text small{
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-help-btn{
      width: 100%;
      text-align: center;
    }
  }

  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-left{
      gap: 10px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-icon{
      width: 38px;
      height: 38px;
      flex-basis: 38px;
      border-radius: 12px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-title{
      font-size: .95rem;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-subtitle{
      font-size: .77rem;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-pill{
      padding: 5px 8px;
      font-size: .68rem;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-intro{
      padding: 10px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-icon{
      width: 38px;
      height: 38px;
      flex-basis: 38px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-subtitle{
      font-size: .75rem;
    }
  }


  @media (max-width: 420px){
    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-right{
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-pills{
      width: 100%;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-reveal-cta{
      width: 100%;
      margin-left: 0;
      justify-content: space-between;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-intro{
      flex-direction: column;
    }

    :where(html[data-bm-page="dashboard"]) .journal-addon-action-btn{
      grid-template-columns: 34px minmax(0, 1fr);
    }
  }

/* ==================== VISTA: html[data-bm-page="dashboardAnt"] ==================== */
/* Origen: dashboardAnt.php:4103 */
/* === Barra de Acciones y Botones (Dark Mode) ===
     Menú propio, sin depender del dropdown JS de Bootstrap.
     Esto evita que el selector quede estático si Popper/Bootstrap no inicializa ese dropdown. */

  :where(html[data-bm-page="dashboardAnt"]) .actions-toolbar-grid{
    width: 100%;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-actions-wrapper{
    display: block;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-actions-dropdown{
    position: relative;
    width: 100%;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) .btn-actions-toggle{
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #334155;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.22);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
    cursor: pointer;
    overflow: hidden;
  }

  :where(html[data-bm-page="dashboardAnt"]) .btn-actions-toggle:hover,
:where(html[data-bm-page="dashboardAnt"]) .btn-actions-toggle:focus{
    border-color: #365CF5;
    box-shadow: 0 0 0 0.2rem rgba(54, 92, 245, 0.18), 0 8px 18px rgba(0,0,0,0.28);
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
  }

  :where(html[data-bm-page="dashboardAnt"]) .btn-actions-toggle:active{
    transform: translateY(0);
  }

  :where(html[data-bm-page="dashboardAnt"]) .btn-actions-toggle.dropdown-toggle::after{
    flex: 0 0 auto;
    margin-left: auto;
    opacity: .75;
  }

  :where(html[data-bm-page="dashboardAnt"]) .actions-toggle-main{
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboardAnt"]) .actions-toggle-main i{
    flex: 0 0 auto;
    font-size: 1.05rem;
    color: #93c5fd;
  }

  /* Se elimina visualmente el texto secundario para evitar superposición. */
  :where(html[data-bm-page="dashboardAnt"]) .actions-toggle-hint{
    display: none !important;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-actions-menu{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(320px, calc(100vw - 2rem));
    min-width: 260px;
    max-width: calc(100vw - 2rem);
    padding: 8px;
    margin: 0;
    border: 1px solid #334155;
    border-radius: 14px;
    background: #1e293b;
    box-shadow: 0 18px 42px rgba(0,0,0,0.55);
    z-index: 2050;
    list-style: none;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-actions-dropdown.is-open .journal-actions-menu,
:where(html[data-bm-page="dashboardAnt"]) .journal-actions-menu.show{
    display: block !important;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-actions-menu-title{
    padding: 5px 8px 8px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-actions-divider{
    border-top: 1px dashed #334155;
    margin: 6px 4px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-item.dropdown-item{
    width: 100%;
    border: 0;
    border-radius: 10px;
    color: #cbd5e1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: transparent;
    white-space: normal;
    text-align: left;
    cursor: pointer;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-item.dropdown-item:hover,
:where(html[data-bm-page="dashboardAnt"]) .journal-action-item.dropdown-item:focus{
    background: #0f172a;
    color: #f8fafc;
    outline: none;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-icon{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #334155;
    color: #93c5fd;
    border: 1px solid #475569;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-item:hover .journal-action-icon,
:where(html[data-bm-page="dashboardAnt"]) .journal-action-item:focus .journal-action-icon{
    background: rgba(54, 92, 245, 0.18);
    border-color: rgba(54, 92, 245, 0.5);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-text{
    min-width: 0;
    display: block;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-text strong{
    display: block;
    color: #f8fafc !important;
    font-size: .9rem;
    line-height: 1.15;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-text small{
    display: block;
    color: #94a3b8 !important;
    font-size: .74rem;
    line-height: 1.2;
    margin-top: 2px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-item.primary-action{
    background: rgba(54, 92, 245, 0.13);
    border: 1px solid rgba(54, 92, 245, 0.36);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-item.primary-action:hover,
:where(html[data-bm-page="dashboardAnt"]) .journal-action-item.primary-action:focus{
    background: rgba(54, 92, 245, 0.24);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-action-item.primary-action .journal-action-icon{
    background: #365CF5;
    border-color: #365CF5;
    color: #ffffff;
  }

  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboardAnt"]) .journal-actions-menu{
      right: 0;
      width: min(300px, calc(100vw - 2rem));
      min-width: min(260px, calc(100vw - 2rem));
    }
  }

/* ==================== VISTA: html[data-bm-page="dashboardAnt"] ==================== */
/* Origen: dashboardAnt.php:4895 */
/* ===== Dashboard interno: selector de vistas Trading Journal / Gestor Emocional ===== */
:where(html[data-bm-page="dashboardAnt"]) .dashboard-view-switcher{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 4px 0 24px;
}
:where(html[data-bm-page="dashboardAnt"]) .dashboard-view-tab{
  border: 1px solid rgba(148, 163, 184, .22);
  background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .92));
  color: #cbd5e1;
  border-radius: 18px;
  padding: 13px 16px;
  min-width: 230px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .18);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
:where(html[data-bm-page="dashboardAnt"]) .dashboard-view-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, .45);
  color: #f8fafc;
}
:where(html[data-bm-page="dashboardAnt"]) .dashboard-view-tab.is-active{
  border-color: rgba(99, 102, 241, .75);
  background: linear-gradient(135deg, rgba(79, 70, 229, .98), rgba(37, 99, 235, .92));
  color: #ffffff;
  box-shadow: 0 18px 36px rgba(79, 70, 229, .28);
}
:where(html[data-bm-page="dashboardAnt"]) .dashboard-view-tab-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.10);
  flex: 0 0 auto;
}
:where(html[data-bm-page="dashboardAnt"]) .dashboard-view-tab-copy strong{
  display: block;
  font-size: .94rem;
  line-height: 1.15;
}
:where(html[data-bm-page="dashboardAnt"]) .dashboard-view-tab-copy small{
  display: block;
  margin-top: 4px;
  font-size: .76rem;
  line-height: 1.2;
  color: inherit;
  opacity: .78;
}
:where(html[data-bm-page="dashboardAnt"]) .dashboard-view-tab-badge{
  margin-left: auto;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(255,255,255,.14);
  color: inherit;
  white-space: nowrap;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-locked{
  overflow: hidden;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-locked-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 24px;
  align-items: center;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-locked-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(251, 191, 36, .12);
  color: #fde68a;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-locked-title{
  margin: 16px 0 10px;
  color: #f8fafc;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 900;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-locked-text{
  color: #cbd5e1;
  max-width: 760px;
  line-height: 1.65;
  margin-bottom: 18px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-locked-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-locked-preview{
  display: grid;
  gap: 12px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-preview-card{
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 18px;
  padding: 16px;
  background: rgba(15, 23, 42, .54);
  color: #e2e8f0;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-preview-card strong{
  display: block;
  color: #f8fafc;
  margin-bottom: 4px;
  font-size: .92rem;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-preview-card span{
  display: block;
  color: #94a3b8;
  font-size: .78rem;
  line-height: 1.35;
}
@media (max-width: 991.98px){
  :where(html[data-bm-page="dashboardAnt"]) .dashboard-view-tab{ flex: 1 1 100%; min-width: 0; }
  :where(html[data-bm-page="dashboardAnt"]) .emotional-locked-layout{ grid-template-columns: 1fr; }
}

/* ===== Gestor Emocional + Trading Journal: Rule Compliance Coach ===== */
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, .14);
  background: linear-gradient(135deg, rgba(15,23,42,.98), rgba(30,41,59,.96));
  color: #e5e7eb;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-card::before{
  content: "";
  position: absolute;
  inset: -140px auto auto -120px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: rgba(99,102,241,.18);
  filter: blur(8px);
  pointer-events: none;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-header,
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-grid,
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-body{ position: relative; z-index: 1; }
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-kicker{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin-bottom: 5px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-title{
  margin: 0;
  color: #fff;
  font-weight: 900;
  letter-spacing: -.02em;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-subtitle{
  margin: 4px 0 0;
  color: #cbd5e1;
  font-size: 13px;
  max-width: 880px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,.08);
  color: #dbeafe;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-stat-card{
  min-width: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-stat-card.emotional-stat-card-strong{
  background: linear-gradient(135deg, rgba(99,102,241,.24), rgba(14,165,233,.13));
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-stat-label{
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 7px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-stat-value{
  color: #fff;
  font-size: 23px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -.03em;
  word-break: break-word;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-stat-helper{
  margin-top: 7px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.35;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-panel{
  border-radius: 18px;
  background: rgba(15,23,42,.58);
  border: 1px solid rgba(148,163,184,.16);
  padding: 14px;
  min-width: 0;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-panel-wide{ grid-column: 1 / -1; }
:where(html[data-bm-page="dashboardAnt"]) .emotional-panel-title{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 10px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-insight-text{
  color: #dbeafe;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-chart-wrap{
  position: relative;
  height: 240px;
  min-height: 240px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-list-item{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  padding: 10px;
  color: #e2e8f0;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-list-main{ min-width: 0; }
:where(html[data-bm-page="dashboardAnt"]) .emotional-list-title{
  font-weight: 850;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-list-meta{
  color: #94a3b8;
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.35;
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-list-badge{
  flex: 0 0 auto;
  align-self: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  color: #c7d2fe;
  background: rgba(99,102,241,.16);
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-rule-pill{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  color: #bfdbfe;
  background: rgba(37,99,235,.18);
}
:where(html[data-bm-page="dashboardAnt"]) .emotional-empty{
  color: #94a3b8;
  font-size: 13px;
  margin: 0;
}
@media (max-width: 1399px){
  :where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px){
  :where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-body{ grid-template-columns: 1fr; }
  :where(html[data-bm-page="dashboardAnt"]) .emotional-panel-wide{ grid-column: auto; }
}
@media (max-width: 575px){
  :where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-header{ flex-direction: column; }
  :where(html[data-bm-page="dashboardAnt"]) .emotional-dashboard-grid{ grid-template-columns: 1fr; }
  :where(html[data-bm-page="dashboardAnt"]) .emotional-chart-wrap{ height: 220px; min-height: 220px; }
}

/* ==================== VISTA: html[data-bm-page="dashboardAnt"] ==================== */
/* Origen: dashboardAnt.php:5522 */
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-section{
    margin-bottom: 8px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-panel{
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 18px;
    background:
      radial-gradient(circle at top left, rgba(54, 92, 245, 0.16), transparent 34%),
      linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-panel::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent 28%, transparent 72%, rgba(255,255,255,0.025));
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-toggle{
    position: relative;
    z-index: 1;
    width: 100%;
    border: 0;
    background: transparent;
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-toggle:hover,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-toggle:focus{
    background: rgba(255,255,255,0.035);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-toggle:focus{
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(54, 92, 245, 0.42);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-left,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-right,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-pills,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-cta{
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-left{
    gap: 12px;
    flex: 1 1 auto;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-icon{
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    box-shadow: 0 12px 26px rgba(54, 92, 245, 0.22), inset 0 1px 0 rgba(255,255,255,.08);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-copy{
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-title{
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-subtitle{
    margin-top: 4px;
    color: #94a3b8;
    font-size: .82rem;
    line-height: 1.35;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-right{
    flex: 0 0 auto;
    gap: 12px;
    justify-content: flex-end;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-pills{
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-pill{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.64);
    border: 1px solid rgba(51, 65, 85, 0.86);
    color: #cbd5e1;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-pill i{
    color: #7da0ff;
    font-size: .82rem;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-cta{
    gap: 8px;
    border-radius: 999px;
    padding: 7px 10px 7px 13px;
    background: rgba(54, 92, 245, 0.14);
    border: 1px solid rgba(54, 92, 245, 0.36);
    color: #f8fafc;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-chevron{
    width: 23px;
    height: 23px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(54, 92, 245, 0.18);
    color: #9db5ff;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-chevron i{
    transition: transform .2s ease, color .2s ease;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-toggle[aria-expanded="true"] .journal-addon-reveal-chevron i{
    transform: rotate(180deg);
    color: #ffffff;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-body{
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(51, 65, 85, 0.72);
  }

  :where(html[data-bm-page="dashboardAnt"]) #credBanner .journal-addon-reveal-body:not(.show){
    display: none;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credBanner .journal-addon-reveal-body.show{
    display: block;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-main{
    position: relative;
    display: grid;
    grid-template-columns: minmax(230px, 0.95fr) minmax(360px, 1.35fr) minmax(250px, 0.85fr);
    gap: 14px;
    align-items: stretch;
    padding: 14px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-intro,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-credentials,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-actions{
    min-width: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-intro{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 15px;
    background: rgba(15, 23, 42, 0.36);
    border: 1px solid rgba(51, 65, 85, 0.55);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-icon{
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(54, 92, 245, 0.14);
    color: #7da0ff;
    border: 1px solid rgba(54, 92, 245, 0.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-icon i{
    font-size: 18px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-heading{
    min-width: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-eyebrow{
    color: #7da0ff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 3px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-title{
    color: #f8fafc;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.15;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-subtitle{
    color: #94a3b8;
    font-size: .78rem;
    line-height: 1.25;
    margin-top: 3px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-credentials{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-content: center;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-credential-card{
    display: grid;
    grid-template-columns: minmax(110px, 132px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 15px;
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(51, 65, 85, 0.86);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-credential-label{
    margin-bottom: 0;
    color: #94a3b8 !important;
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.2;
    display: flex;
    align-items: center;
    min-height: 34px;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credBanner .cred-input,
:where(html[data-bm-page="dashboardAnt"]) #credBanner .journal-credential-input{
    height: 38px;
    font-size: .90rem;
    border-radius: 11px;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credBanner .journal-credential-group .form-control{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credBanner .btn-icon{
    height: 34px;
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-color: #334155;
    color: #94a3b8;
    background: #0f172a;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credBanner .btn-icon:hover,
:where(html[data-bm-page="dashboardAnt"]) #credBanner .btn-icon:focus{
    background-color: #334155;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credBanner .journal-credential-group .btn-icon{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credBanner .journal-credential-group .btn-icon + .btn-icon{
    border-left: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-btn{
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    text-align: left;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-btn:hover,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-btn:focus{
    transform: translateY(-1px);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-primary{
    background: #365CF5;
    border: 1px solid #365CF5;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(54, 92, 245, 0.28);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-primary:hover,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-primary:focus{
    background: #2b4bca;
    border-color: #2b4bca;
    box-shadow: 0 14px 30px rgba(54, 92, 245, 0.38);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-secondary{
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(54, 92, 245, 0.42);
    color: #f8fafc !important;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-secondary:hover,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-secondary:focus{
    background: rgba(54, 92, 245, 0.14);
    border-color: rgba(125, 160, 255, 0.72);
    color: #ffffff !important;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-icon{
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    color: inherit;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-secondary .journal-addon-action-icon{
    background: rgba(54, 92, 245, 0.13);
    color: #7da0ff;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-copy{
    min-width: 0;
    display: block;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-copy strong,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-copy small{
    display: block;
    line-height: 1.1;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-copy strong{
    color: inherit !important;
    font-size: .88rem;
    font-weight: 800;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-copy small{
    margin-top: 3px;
    color: rgba(248,250,252,.76) !important;
    font-size: .72rem;
    font-weight: 600;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-secondary .journal-addon-action-copy small{
    color: #94a3b8 !important;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help{
    position: relative;
    border-top: 1px solid rgba(51, 65, 85, 0.72);
    background: rgba(15, 23, 42, 0.55);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-toggle{
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    color: #f8fafc;
    text-align: left;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-toggle:hover{
    background: rgba(255,255,255,0.025);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-toggle:focus{
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(54, 92, 245, 0.42);
    border-radius: 0 0 16px 16px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-left,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-right{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-left{
    flex: 1 1 auto;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-icon{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(54, 92, 245, 0.12);
    color: #7da0ff;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-text{
    min-width: 0;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-text strong{
    display: block;
    color: #e2e8f0 !important;
    font-size: .84rem;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-text small{
    display: block;
    margin-top: 2px;
    color: #64748b !important;
    font-size: .74rem;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-right{
    flex: 0 0 auto;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credDataWarning .cred-alert-pill{
    background: rgba(54, 92, 245, 0.10);
    color: #7da0ff;
    border: 1px solid rgba(54, 92, 245, 0.30);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .25rem .55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credDataWarning .cred-alert-chevron{
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credDataWarning .cred-alert-chevron i{
    transition: transform .2s ease, color .2s ease;
  }

  :where(html[data-bm-page="dashboardAnt"]) #credDataWarning .cred-alert-toggle[aria-expanded="true"] .cred-alert-chevron i{
    transform: rotate(180deg);
    color: #7da0ff;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-body{
    border-top: 1px solid rgba(51, 65, 85, 0.55);
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px 14px;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-message{
    color: #94a3b8;
    font-size: .82rem;
    line-height: 1.45;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-message b{
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-btn{
    flex: 0 0 auto;
    background-color: rgba(54, 92, 245, 0.13);
    color: #f8fafc !important;
    border: 1px solid rgba(54, 92, 245, 0.42);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
    padding: 7px 14px;
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-btn:hover,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-btn:focus{
    background-color: #365CF5;
    border-color: #365CF5;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(54, 92, 245, 0.32);
  }

  @media (max-width: 1199.98px){
    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-toggle{
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 12px;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-left{
      width: 100%;
      max-width: 100%;
      align-items: flex-start;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-copy{
      width: 100%;
      max-width: 100%;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-title,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-subtitle{
      max-width: 100%;
      overflow-wrap: normal;
      word-break: normal;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-right{
      width: 100%;
      max-width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-pills{
      flex: 1 1 auto;
      max-width: 100%;
      justify-content: flex-start;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-main{
      grid-template-columns: 1fr;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-intro{
      align-items: flex-start;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-actions{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 767.98px){
    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-toggle{
      padding: 14px;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-left{
      align-items: flex-start;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-right,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-pills{
      width: 100%;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-pills{
      justify-content: flex-start;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-cta{
      margin-left: auto;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-main{
      padding: 12px;
      gap: 10px;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-credential-card{
      grid-template-columns: 1fr;
      gap: 6px;
      align-items: stretch;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-credential-label{
      min-height: 0;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-credentials,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-actions{
      grid-template-columns: 1fr;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-toggle,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-content{
      align-items: stretch;
      flex-direction: column;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-right{
      width: 100%;
      justify-content: space-between;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-text strong,
:where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-text small{
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-help-btn{
      width: 100%;
      text-align: center;
    }
  }

  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-left{
      gap: 10px;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-icon{
      width: 38px;
      height: 38px;
      flex-basis: 38px;
      border-radius: 12px;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-title{
      font-size: .95rem;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-subtitle{
      font-size: .77rem;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-pill{
      padding: 5px 8px;
      font-size: .68rem;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-intro{
      padding: 10px;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-icon{
      width: 38px;
      height: 38px;
      flex-basis: 38px;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-subtitle{
      font-size: .75rem;
    }
  }


  @media (max-width: 420px){
    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-right{
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-pills{
      width: 100%;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-reveal-cta{
      width: 100%;
      margin-left: 0;
      justify-content: space-between;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-intro{
      flex-direction: column;
    }

    :where(html[data-bm-page="dashboardAnt"]) .journal-addon-action-btn{
      grid-template-columns: 34px minmax(0, 1fr);
    }
  }

/* ==================== VISTA: html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboardAntV1.php:666 */
:where(html[data-bm-page="dashboardAntV1"]) .top-system-alert{
  /* Degradado sutil rojizo/anaranjado oscuro para alerta */
  background: linear-gradient(90deg, #451a03 0%, #7c2d12 100%);
  border-bottom: 1px solid #9a3412;
  color: #ffedd5; /* Texto claro (naranja muy suave) */
  padding: 12px 0;
  position: relative;
  z-index: 2000; /* Por encima del header */
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  /* Animación para cerrar */
  transition: margin-top 0.4s ease, opacity 0.4s ease;
  overflow: hidden;
}

:where(html[data-bm-page="dashboardAntV1"]) .top-system-alert.alert-hidden{
  margin-top: -100px; /* Desliza hacia arriba para ocultarse */
  opacity: 0;
  pointer-events: none;
}

:where(html[data-bm-page="dashboardAntV1"]) .top-system-alert .alert-icon-wrapper{
  background: rgba(255, 255, 255, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

:where(html[data-bm-page="dashboardAntV1"]) .top-system-alert .btn-close-custom{
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  transition: color 0.2s;
}

:where(html[data-bm-page="dashboardAntV1"]) .top-system-alert .btn-close-custom:hover{
  color: #fff;
}




:where(html[data-bm-page="dashboardAntV1"]) .tooltip-wrapper{
  position: relative;
  display: inline-block;
}
:where(html[data-bm-page="dashboardAntV1"]) .tooltip-custom{
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translate(-.5rem, -50%);
  background: #343a40;
  color: #fff;
  padding: .5rem .75rem;
  border-radius: .5rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1200;
  font-size: 0.85rem;
}
:where(html[data-bm-page="dashboardAntV1"]) .tooltip-custom::after{
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: .4rem;
  border-style: solid;
  border-color: transparent transparent transparent #343a40;
}
:where(html[data-bm-page="dashboardAntV1"]) .tooltip-wrapper:hover .tooltip-custom{
  opacity: 1;
  visibility: visible;
}

/* Grid para botones uniformes y responsive */
:where(html[data-bm-page="dashboardAntV1"]) .btn-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

/* ==================== VISTA: html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboardAntV1.php:759 */
:where(html[data-bm-page="dashboardAntV1"]):root{
    --tj-green: #2ecc71;  /* Verde Esmeralda Brillante */
    --tj-red: #ff5252;    /* Rojo Coral Luminoso */
    --tj-gray: #94a3b8;   /* Gris más claro para mejor contraste */
    --tj-blue: #3b82f6;   /* Azul brillante (Tailwind Blue 500) */

    /* Calendario Dark Mode */
    --cal-border: #334155;
    --cal-bg: #1e293b;       /* Slate 800 */
    --cal-bg-out: #0f172a;   /* Slate 900 */
    
    /* Colores pastel transparentes para días P/L */
    --cal-pos: rgba(33, 150, 83, 0.15);
    --cal-neg: rgba(213, 1, 0, 0.15);
    --cal-zero: #334155;
    
    --cal-weekbox-bg: #1e293b;
    --cal-weekbox-border: #334155;
  }

  @media (min-width: 1200px){
    :where(html[data-bm-page="dashboardAntV1"]) .col-xl-fifth{ flex: 0 0 20%; max-width: 20%; }
  }

  :where(html[data-bm-page="dashboardAntV1"]) .filters-toolbar{ width: 100%; }
  :where(html[data-bm-page="dashboardAntV1"]) .filters-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: end;
  }
  @media (min-width: 768px){
    :where(html[data-bm-page="dashboardAntV1"]) .filters-grid{
      grid-template-columns:
        minmax(220px, 1fr)
        minmax(160px, 220px)
        minmax(160px, 220px)
        minmax(120px, 140px)
        auto;
      column-gap: 14px;
    }
  }
  :where(html[data-bm-page="dashboardAntV1"]) .filters-grid .form-label{ margin-bottom: 6px; font-weight: 600; font-size: 0.875rem; color: #f8fafc; }
  :where(html[data-bm-page="dashboardAntV1"]) .filters-grid .form-control-sm,
:where(html[data-bm-page="dashboardAntV1"]) .filters-grid .form-select-sm{ height: 38px; background-color: #0f172a; border-color: #334155; color: #f8fafc; }
  :where(html[data-bm-page="dashboardAntV1"]) .filters-grid .btn{ height: 38px; }

  :where(html[data-bm-page="dashboardAntV1"]) .title-wrapper{ padding-top: 30px; margin-bottom: 18px; }
  @media (min-width: 992px){ :where(html[data-bm-page="dashboardAntV1"]) .title-wrapper{ margin-bottom: 26px; } }

  /* =============================
     Widgets de descuentos (afiliados)
     ============================= */
  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-widgets-row{
    margin-top: 10px;
    margin-bottom: 26px;
    row-gap: 20px;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-card{
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 18px;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-card-title{
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-card-subtitle{
    font-size: 0.80rem;
    color: #94a3b8;
    margin: 2px 0 0;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-badge{
    font-size: 0.72rem;
    padding: 4px 9px;
    border-radius: 999px;
    background-color: rgba(54, 92, 245, 0.1);
    color: var(--tj-blue);
    border: 1px solid rgba(54, 92, 245, 0.3);
    white-space: nowrap;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-card-list{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
    padding: 7px 9px;
    border-radius: 12px;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
    border: 1px solid transparent;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item:hover{
    background-color: #0f172a;
    border-color: #334155;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item-icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f8fafc;
    background: #334155;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item-main{
    min-width: 0;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item-title{
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item-meta{
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item-meta strong{
    font-weight: 600;
    color: #cbd5e1;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* Pill tipo "SYNC" */
  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px dashed #475569;
    background-color: #0f172a;
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
    cursor: pointer;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-pill-label{
    text-transform: uppercase;
    font-size: 0.70rem;
    letter-spacing: 0.06em;
    color: #64748b;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-pill-code{
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f8fafc;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-pill-icon{
    font-size: 0.9rem;
    line-height: 1;
  }

  /* Estado visual cuando el cupón se ha copiado */
  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-pill-copied{
    background-color: rgba(33, 150, 83, 0.15);
    border-color: rgba(33, 150, 83, 0.5);
    color: #219653;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-pill-copied .affiliate-pill-label{
    color: #219653;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-discount-text{
    color: var(--tj-green);
    font-weight: 600;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-card-footer{
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #334155;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-footer-btn.btn{
    width: 100%;
    justify-content: center;
    padding: 6px 14px;
    font-size: 0.84rem;
    border-radius: 999px;
    font-weight: 600;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .affiliate-empty{
    font-size: 0.82rem;
    color: #64748b;
    padding-top: 4px;
  }

  @media (max-width: 767.98px){
    :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      row-gap: 6px;
    }
    :where(html[data-bm-page="dashboardAntV1"]) .affiliate-item-actions{
      grid-column: 1 / -1;
      justify-content: flex-start;
    }
  }

  @media (max-width: 991.98px){
    :where(html[data-bm-page="dashboardAntV1"]) .affiliate-widgets-row{
      margin-bottom: 20px;
    }
  }

  /* =============================
     KPI (métricas superiores)
     ============================= */
  :where(html[data-bm-page="dashboardAntV1"]) .metrics-row{ row-gap: 20px; }
  :where(html[data-bm-page="dashboardAntV1"]) .metrics-row > [class*="col-"]{ display: flex; }

  /* Tarjeta base */
  :where(html[data-bm-page="dashboardAntV1"]) .icon-card{
    width: 100%;
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #334155;
    border-radius: 14px;
    background: #1e293b;
    min-height: 156px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }
  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboardAntV1"]) .icon-card{
      grid-template-columns: 1fr;
      text-align: center;
      min-height: 0;
    }
    :where(html[data-bm-page="dashboardAntV1"]) .icon-card .icon{ margin: 0 auto 6px; }
    :where(html[data-bm-page="dashboardAntV1"]) .kpi-meta{ justify-content: center; }
  }

  /* Área de icono / mini-gráfico */
  :where(html[data-bm-page="dashboardAntV1"]) .icon{
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    border-radius: 12px;
    background: #0f172a;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .icon.no-bg{ background-color: transparent !important; box-shadow: none !important; }
  :where(html[data-bm-page="dashboardAntV1"]) .icon-card .icon canvas,
:where(html[data-bm-page="dashboardAntV1"]) .icon-card .icon svg{ width: 72px !important; height: 72px !important; display: block; }

  /* Contenido textual */
  :where(html[data-bm-page="dashboardAntV1"]) .icon-card .content{ display:flex; flex-direction: column; gap: 6px; }
  :where(html[data-bm-page="dashboardAntV1"]) .kpi-title{ font-weight:700; font-size:.875rem; color:#f8fafc; margin: 0; }
  :where(html[data-bm-page="dashboardAntV1"]) .kpi-value{ font-weight:800; font-size: clamp(1.05rem, 2.8vw, 1.55rem); line-height: 1.1; margin: 0; color: #f8fafc; }
  :where(html[data-bm-page="dashboardAntV1"]) .kpi-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  :where(html[data-bm-page="dashboardAntV1"]) .kpi-sub{ font-size: .82rem; color:#94a3b8; margin: 0; }

  /* Mini-gauges (SVG) */
  :where(html[data-bm-page="dashboardAntV1"]) .kpi-gauge,
:where(html[data-bm-page="dashboardAntV1"]) .kpi-donut{
    width: 72px; height: 72px; display:block;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .kpi-donut circle{
    transform: rotate(-90deg);
    transform-origin: 40px 40px; 
  }

  /* Barras promedio */
  :where(html[data-bm-page="dashboardAntV1"]) .progress{ background:#334155; }
  :where(html[data-bm-page="dashboardAntV1"]) .progress-bar.bg-success{ background: var(--tj-green) !important; }
  :where(html[data-bm-page="dashboardAntV1"]) .progress-bar.bg-danger{ background: var(--tj-red) !important; }

  :where(html[data-bm-page="dashboardAntV1"]) .card-style canvas{ width: 100% !important; height: 300px !important; }

  :where(html[data-bm-page="dashboardAntV1"]) .fc-daygrid-day div.pnl-badge{ font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
  :where(html[data-bm-page="dashboardAntV1"]) .wb-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
  :where(html[data-bm-page="dashboardAntV1"]) .wb-header .page-label{ font-weight:600; font-size:.9rem; color:#f8fafc; }

  /* =========================================================
     CALENDARIO — grilla unificada RESPONSIVE (DARK MODE)
     ========================================================= */
  :where(html[data-bm-page="dashboardAntV1"]) .calendar-card .calendar-grid{
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid var(--cal-border);
    border-radius: 12px;
    background: var(--cal-bg);
    padding: 10px;
  }
  @media (max-width: 768px){
    :where(html[data-bm-page="dashboardAntV1"]) .calendar-card .calendar-grid{
      gap: 8px;
      padding: 8px;
    }
  }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-head{
    text-align:center;
    font-size: 12px;
    font-weight:700;
    color:#94a3b8;
    background:#0f172a;
    border:1px solid var(--cal-border);
    border-radius:10px;
    padding:8px 6px;
    line-height: 1.1;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .cal-head.head-week{ white-space:nowrap; }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-day,
:where(html[data-bm-page="dashboardAntV1"]) .cal-weekbox{
    position: relative;
    min-height: clamp(76px, 12vw, 108px);
  }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-day .day-box{
    position: absolute;
    inset: 0;
    border: 1px solid var(--cal-border);
    border-radius: 12px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px;
    overflow: hidden;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-day.out .day-box{
    background: var(--cal-bg-out);
    border-color: var(--cal-border);
  }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-day.pos .day-box{ background: var(--cal-pos); border-color: rgba(33,150,83,0.3); }
  :where(html[data-bm-page="dashboardAntV1"]) .cal-day.neg .day-box{ background: var(--cal-neg); border-color: rgba(213,1,0,0.3); }
  :where(html[data-bm-page="dashboardAntV1"]) .cal-day.zero .day-box{ background: var(--cal-zero); }
  :where(html[data-bm-page="dashboardAntV1"]) .cal-day.zero.no-trades .day-box{
    background: #0f172a;
    border-color: #334155;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-day{ cursor: default; }
  :where(html[data-bm-page="dashboardAntV1"]) .cal-day.has-trades{ cursor: pointer; }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-day .dnum{
    position:absolute;
    top:8px; left:8px;
    font-size: clamp(10px, 1.8vw, 12px);
    color:#64748b; font-weight:600;
    z-index: 1;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-day .val{
    position: static;
    text-align:center;
    font-size: clamp(14px, 2.6vw, 18px);
    font-weight:800; line-height:1.1;
    margin-top:auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Ajuste de colores de texto para fondo oscuro */
  :where(html[data-bm-page="dashboardAntV1"]) .cal-day.pos .val{ color: #2ecc71 !important; text-shadow: 0 0 10px rgba(46, 204, 113, 0.25); }
  :where(html[data-bm-page="dashboardAntV1"]) .cal-day.neg .val{ color: #ff5252 !important; text-shadow: 0 0 10px rgba(255, 82, 82, 0.25); }
  :where(html[data-bm-page="dashboardAntV1"]) .cal-day.zero .val{ color: #94a3b8; }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-day .trades{
    text-align:center;
    margin-top: 3px;
    font-size: clamp(10px, 2vw, 12px);
    font-weight: 600;
    color:#64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .day-box .note-badge{
    position: absolute; right: 6px; top: 6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(245, 158, 11, 0.2); border: 1px solid #f59e0b;
    display:flex; align-items:center; justify-content:center;
    font-size: 12px; line-height: 1; font-weight: 800; color:#fbbf24;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .cal-weekbox{ display:flex; align-items:stretch; }
  :where(html[data-bm-page="dashboardAntV1"]) .cal-weekbox-inner{
    border:1px solid var(--cal-weekbox-border);
    border-radius:10px;
    padding:10px;
    background: #1e293b;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center; justify-content:center;
    gap:6px;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .wk-title{ font-size:12px; color:#94a3b8; font-weight:700; margin-bottom:2px; }
  :where(html[data-bm-page="dashboardAntV1"]) .wk-amount{ font-size:18px; font-weight:800; }
  :where(html[data-bm-page="dashboardAntV1"]) .wk-days{ font-size:12px; color:#64748b; }
  :where(html[data-bm-page="dashboardAntV1"]) .wk-pos .wk-amount{ color: #4ade80; }
  :where(html[data-bm-page="dashboardAntV1"]) .wk-neg .wk-amount{ color: #f87171; }
  :where(html[data-bm-page="dashboardAntV1"]) .wk-zero .wk-amount{ color: #94a3b8; }

  @media (max-width: 992px){
    :where(html[data-bm-page="dashboardAntV1"]) .calendar-card .calendar-grid{
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    :where(html[data-bm-page="dashboardAntV1"]) .cal-head.head-week,
:where(html[data-bm-page="dashboardAntV1"]) .cal-weekbox{ display:none !important; }
  }

  :where(html[data-bm-page="dashboardAntV1"]) .modal-backdrop.show{ background-color: rgba(0,0,0,.7); }

  :where(html[data-bm-page="dashboardAntV1"]) .day-trades-scroll{
    max-height: 55vh; overflow:auto; border:1px solid #334155; border-radius:10px; padding: 8px; background:#1e293b;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .day-trades-table{ border-collapse: separate; border-spacing: 0; width: 100%; color: #94a3b8; }
  :where(html[data-bm-page="dashboardAntV1"]) .day-trades-table thead th{
    position: sticky; top: 0; z-index: 1; background:#0f172a; color: #f8fafc; border-bottom:1px solid #334155; padding: .55rem .85rem !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .day-trades-table tbody td{ padding: .55rem .85rem !important; vertical-align: middle; border-bottom: 1px solid #334155; }

  /* ↓↓↓ Ajustes SOLO para el cuadro "Day details" ↓↓↓ */

  :where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .modal-content{ font-size: 0.92rem; background: #1e293b; color: #94a3b8; border: 1px solid #334155; }
  :where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .day-trades-table thead th,
:where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .day-trades-table tbody td{ font-size: 0.92rem; }

  :where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .ticker-col{ width: 7.5ch; max-width: 7.5ch; white-space: nowrap; }
  :where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .ticker-cell{
    width: 7.5ch; max-width: 7.5ch;
    white-space: nowrap; overflow: hidden; text-overflow: clip;
    font-variant-numeric: tabular-nums;
  }

  /* Botón/ícono de nota por trade */
  :where(html[data-bm-page="dashboardAntV1"]) .trade-note-btn{
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 4px 8px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .trade-note-btn.has-note{ background: rgba(245, 158, 11, 0.15); border-color: #f59e0b; color: #fbbf24; }
  :where(html[data-bm-page="dashboardAntV1"]) .trade-note-btn .note-icon{ font-style: normal; }

  :where(html[data-bm-page="dashboardAntV1"]) .note-toolbar{
    display:flex; flex-wrap:wrap; gap:6px; border:1px solid #334155; border-radius:10px 10px 0 0; padding:8px; background:#0f172a;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .note-toolbar .btn-sm{ color: #f8fafc; border-color: #334155; }
  :where(html[data-bm-page="dashboardAntV1"]) .note-toolbar .btn-sm:hover{ background: #334155; }
  :where(html[data-bm-page="dashboardAntV1"]) .note-editor{
    border:1px solid #334155; border-top:0; border-radius:0 0 10px 10px;
    min-height: 200px; padding:12px; background:#1e293b; color: #f8fafc; overflow:auto;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .note-editor:focus{ outline:none; }

  /* Tipo/plan en tablas */
  :where(html[data-bm-page="dashboardAntV1"]) .trade-type-select{ min-width: 160px; background-color: #0f172a; color: #f8fafc; border-color: #334155; }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-rule-check{
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 4px 10px;
    background:#0f172a;
    color: #f8fafc;
    line-height:1;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-rule-check:disabled{ opacity: 0.5; }

  /* Badges del Plan */
  :where(html[data-bm-page="dashboardAntV1"]) .badge-plan{
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: .5rem;
    font-weight:700;
    line-height: 1.1;
    font-size: .78rem;
    border: 1px solid transparent;
    min-width: 2.25rem;
    text-align: center;
    white-space: nowrap;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .badge-plan.yes{ background:rgba(16, 185, 129, 0.2); color:#4ade80; border-color:#10b981; }
  :where(html[data-bm-page="dashboardAntV1"]) .badge-plan.no{ background:rgba(239, 68, 68, 0.2); color:#f87171; border-color:#ef4444; }
  :where(html[data-bm-page="dashboardAntV1"]) .badge-plan.na{ background:#334155; color:#94a3b8; border-color:#475569; }

  /* Modal Trade Types Manager */
  :where(html[data-bm-page="dashboardAntV1"]) .tt-list{
    max-height: 60vh;
    overflow:auto;
    border:1px solid #334155;
    border-radius:10px;
    padding:8px;
    background:#1e293b;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-item{
    padding:10px 12px;
    border-bottom:1px solid #334155;
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    color: #f8fafc;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-item.active{ background:#0f172a; border-left: 3px solid #365CF5; }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-item:hover{ background:#334155; }

  :where(html[data-bm-page="dashboardAntV1"]) .tt-rules{
    max-height: 50vh;
    overflow:auto;
    border:1px solid #334155;
    border-radius:10px;
    padding:8px;
    background:#1e293b;
  }

  :where(html[data-bm-page="dashboardAntV1"]) .tt-rule-row{
    display:flex;
    gap:8px;
    align-items:center;
    padding:6px 0;
    border-bottom:1px dashed #475569;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-rule-row:last-child{ border-bottom:0; }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-rule-row input.form-control{
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    background: #0f172a; border-color: #334155; color: #f8fafc;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-rule-row .btn-delete-rule{
    padding: .25rem .5rem;
    line-height: 1;
    height: 32px;
    white-space: nowrap;
    color: #94a3b8; border-color: #475569;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-rule-row .btn-delete-rule:hover{ color: #f87171; border-color: #ef4444; background: transparent; }

  :where(html[data-bm-page="dashboardAntV1"]) .tt-form-header{
    border-bottom: 1px dashed #334155;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    background:#0f172a;
    border-radius:8px;
  }
  :where(html[data-bm-page="dashboardAntV1"]) #ttFormCard{
    background:#1e293b;
    border:1px solid #334155;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-form-title{ font-weight: 700; font-size: .95rem; color: #f8fafc; }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-form-subtitle{ color:#94a3b8; font-size:.85rem; }

  :where(html[data-bm-page="dashboardAntV1"]) .tt-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 200px;
    padding: 16px;
    background:#1e293b;
    border:1px dashed #475569;
    border-radius:10px;
    text-align:center;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-empty .icon{ font-size:28px; margin-bottom:6px; color: #365CF5; }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-empty h6{ margin:6px 0; color: #f8fafc; }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-empty p{ margin:0; color:#94a3b8; }

  :where(html[data-bm-page="dashboardAntV1"]) .mode-badge{
    display:inline-block; font-weight:700; line-height:1; font-size:.75rem;
    border:1px solid; border-radius:999px; padding:.35rem .6rem; white-space:nowrap;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .mode-badge.create{ background:rgba(54, 92, 245, 0.1); color:#365CF5; border-color:rgba(54, 92, 245, 0.4); }
  :where(html[data-bm-page="dashboardAntV1"]) .mode-badge.edit{ background:rgba(6, 182, 212, 0.1); color:#06b6d4; border-color:rgba(6, 182, 212, 0.4); }

  :where(html[data-bm-page="dashboardAntV1"]) .twinkle-active{ animation: bm-ec774b1a8e-twinkle 800ms ease; }
  @keyframes bm-ec774b1a8e-twinkle{
    0%{ box-shadow: 0 0 0 0 rgba(54,92,245,0.35); }
    50%{ box-shadow: 0 0 0 6px rgba(54,92,245,0.15); }
    100%{ box-shadow: 0 0 0 0 rgba(54,92,245,0.0); }
  }

  :where(html[data-bm-page="dashboardAntV1"]) .form-hint{ font-size:.8rem; color:#64748b; margin-top:.25rem; }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-ghost{ background:transparent; border:1px dashed #475569; color: #94a3b8; }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-ghost:hover{ background:#334155; border-color:#94a3b8; color: #f8fafc; }
  /* ==========================================================================
     PARCHE DE CURACIÓN DARK MODE (Sustituye estilos blancos de Bootstrap)
     ========================================================================== */

  /* 1. MODALES GLOBALES (Settings, New Trade, Types, Commissions, Delete, Rules)
     Esto fuerza el color oscuro en TODAS las ventanas emergentes que ahora ves blancas */
  :where(html[data-bm-page="dashboardAntV1"]) .modal-content{
      background-color: #1e293b !important; /* Slate 800 */
      border: 1px solid #334155 !important;
      color: #94a3b8 !important;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .modal-header,
:where(html[data-bm-page="dashboardAntV1"]) .modal-footer{
      border-color: #334155 !important;
      background-color: #1e293b !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .modal-title{
      color: #f8fafc !important; /* Títulos blanco brillante */
  }
  /* Invertir color del botón X de cerrar para que sea blanco */
  :where(html[data-bm-page="dashboardAntV1"]) .btn-close{
      filter: invert(1) grayscale(100%) brightness(200%);
  }

  /* 2. FORMULARIOS (Inputs de filtros, New Trade, Settings, Check Rules)
     Arregla los campos blancos y textos invisibles */
  :where(html[data-bm-page="dashboardAntV1"]) .form-control,
:where(html[data-bm-page="dashboardAntV1"]) .form-select,
:where(html[data-bm-page="dashboardAntV1"]) input[type="text"],
:where(html[data-bm-page="dashboardAntV1"]) input[type="number"],
:where(html[data-bm-page="dashboardAntV1"]) input[type="date"],
:where(html[data-bm-page="dashboardAntV1"]) textarea{
      background-color: #0f172a !important; /* Slate 900 (fondo input) */
      border: 1px solid #334155 !important;
      color: #f8fafc !important; /* Texto blanco al escribir */
  }
  :where(html[data-bm-page="dashboardAntV1"]) .form-control:focus,
:where(html[data-bm-page="dashboardAntV1"]) .form-select:focus{
      background-color: #0f172a !important;
      border-color: #365CF5 !important;
      color: #f8fafc !important;
      box-shadow: 0 0 0 0.25rem rgba(54, 92, 245, 0.25) !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .form-control::placeholder{
      color: #64748b !important;
  }
  /* Input deshabilitado (ej. en Commissions) */
  :where(html[data-bm-page="dashboardAntV1"]) .form-control:disabled,
:where(html[data-bm-page="dashboardAntV1"]) .form-control[readonly]{
      background-color: #1e293b !important;
      color: #94a3b8 !important;
      opacity: 1;
  }
  /* Arregla el texto "Yes/No" debajo del Plan que no se ve */
  :where(html[data-bm-page="dashboardAntV1"]) .form-text,
:where(html[data-bm-page="dashboardAntV1"]) .text-muted,
:where(html[data-bm-page="dashboardAntV1"]) small{
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .form-label{
      color: #f8fafc !important;
  }

  /* 3. TABLAS INTERNAS (Dentro de Commissions, Delete Accounts, Day Details) */
  :where(html[data-bm-page="dashboardAntV1"]) .table{
      color: #94a3b8 !important;
      border-color: #334155 !important;
      --bs-table-bg: transparent !important;
      --bs-table-striped-bg: rgba(255, 255, 255, 0.03) !important;
      --bs-table-border-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .table thead th{
      background-color: #0f172a !important;
      color: #f8fafc !important;
      border-bottom: 2px solid #334155 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .table td,
:where(html[data-bm-page="dashboardAntV1"]) .table th{
      border-bottom: 1px solid #334155 !important;
      background-color: transparent !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .table-hover tbody tr:hover td{
      background-color: rgba(54, 92, 245, 0.1) !important;
      color: #f8fafc !important;
  }

  /* 4. DATE RANGE (Flechas adelante/atrás en Filtros) */
  :where(html[data-bm-page="dashboardAntV1"]) .input-group-text{
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #94a3b8 !important;
  }
  /* Botones de flecha dentro de input-group */
  :where(html[data-bm-page="dashboardAntV1"]) .input-group .btn-outline-secondary{
      border-color: #334155 !important;
      color: #94a3b8 !important;
      background-color: #1e293b !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .input-group .btn-outline-secondary:hover{
      background-color: #334155 !important;
      color: #f8fafc !important;
  }

  /* 5. CALENDARIO: Botones Adelante/Atrás/Hoy y Títulos */
  :where(html[data-bm-page="dashboardAntV1"]) .fc-button{
      background-color: #1e293b !important;
      border-color: #334155 !important;
      color: #f8fafc !important;
      text-transform: capitalize !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .fc-button:hover{
      background-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .fc-button-active{
      background-color: #365CF5 !important;
      border-color: #365CF5 !important;
      color: #fff !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .fc-button:disabled{
      opacity: 0.6;
      background-color: #0f172a !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .fc-toolbar-title{
      color: #f8fafc !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .fc-col-header-cell-cushion{
      color: #94a3b8 !important; /* Días de la semana (Sun, Mon...) */
      text-decoration: none !important;
  }

  /* 6. MODAL DAY DETAILS (Específico para bordes y botones internos) */
  :where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .day-trades-scroll{
      background: #0f172a !important;
      border: 1px solid #334155 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .trade-note-btn{
      background-color: #1e293b !important;
      border: 1px solid #334155 !important;
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .trade-note-btn:hover{
      border-color: #365CF5 !important;
      color: #f8fafc !important;
  }
  /* Botón con nota activa */
  :where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .trade-note-btn.has-note{
      background-color: rgba(245, 158, 11, 0.15) !important;
      border-color: #f59e0b !important;
      color: #fbbf24 !important;
  }
  /* Selectores internos de tipo */
  :where(html[data-bm-page="dashboardAntV1"]) #dayDetailModal .trade-type-select{
      background-color: #0f172a !important;
      color: #f8fafc !important;
      border: 1px solid #334155 !important;
  }
  /* Editor de Notas dentro del modal */
  :where(html[data-bm-page="dashboardAntV1"]) .note-toolbar{
      background-color: #334155 !important;
      border-color: #475569 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .note-editor{
      background-color: #0f172a !important;
      color: #f8fafc !important;
      border: 1px solid #334155 !important;
  }

  /* 7. CHECK RULES (Lista de reglas) */
  :where(html[data-bm-page="dashboardAntV1"]) .tt-list,
:where(html[data-bm-page="dashboardAntV1"]) .tt-rules{
      background-color: #0f172a !important;
      border-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-item{
      color: #f8fafc !important;
      border-bottom-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-item:hover{
      background-color: #1e293b !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .tt-rule-row{
      border-bottom-color: #334155 !important;
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-delete-rule{
      border-color: #475569 !important;
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-delete-rule:hover{
      border-color: #ef4444 !important;
      color: #ef4444 !important;
  }

  /* 8. LISTAS GENERALES (List group en Delete Account, etc.) */
  :where(html[data-bm-page="dashboardAntV1"]) .list-group-item{
      background-color: #0f172a !important;
      border-color: #334155 !important;
      color: #f8fafc !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .list-group-item.active{
      background-color: #365CF5 !important;
      border-color: #365CF5 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .list-group-item-action:hover{
      background-color: #1e293b !important;
      color: #f8fafc !important;
  }

  /* 9. PESTAÑAS (Nav Tabs en Settings/Types) */
  :where(html[data-bm-page="dashboardAntV1"]) .nav-tabs{
      border-bottom-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .nav-tabs .nav-link{
      color: #94a3b8 !important;
      background: transparent !important;
      border: 1px solid transparent !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .nav-tabs .nav-link:hover{
      color: #f8fafc !important;
      background: #334155 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .nav-tabs .nav-link.active{
      background-color: #1e293b !important;
      border-color: #334155 #334155 #1e293b !important;
      color: #365CF5 !important;
      font-weight: 600;
  }

  /* 10. REEMPLAZO DE BOTÓN LIGHT (Para integrar btn-light en Dark Mode)
     Esto arregla los botones del Calendario, Modales y Rango de fechas */
  :where(html[data-bm-page="dashboardAntV1"]) .btn-light{
      background-color: #0f172a !important;
      border: 1px solid #334155 !important;
      color: #94a3b8 !important;
      transition: all 0.2s ease;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-light:hover,
:where(html[data-bm-page="dashboardAntV1"]) .btn-light:focus,
:where(html[data-bm-page="dashboardAntV1"]) .btn-light:active,
:where(html[data-bm-page="dashboardAntV1"]) .btn-light.active{
      background-color: #334155 !important;
      border-color: #475569 !important;
      color: #f8fafc !important;
  }

  /* 11. REEMPLAZO DE BOTÓN PRIMARY (Azul corporativo mejorado para Dark Mode)
     Unifica el color con tu marca y agrega un efecto de brillo sutil */
  :where(html[data-bm-page="dashboardAntV1"]) .btn-primary{
      background-color: #365CF5 !important; /* Tu azul exacto (var --tj-blue) */
      border-color: #365CF5 !important;
      color: #ffffff !important;
      font-weight: 500 !important;
      box-shadow: 0 4px 6px -1px rgba(54, 92, 245, 0.3) !important; /* Sombra azulada */
      transition: all 0.2s ease;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-primary:hover,
:where(html[data-bm-page="dashboardAntV1"]) .btn-primary:focus,
:where(html[data-bm-page="dashboardAntV1"]) .btn-primary:active{
      background-color: #2b4bca !important; /* Un tono ligeramente más profundo al hover */
      border-color: #2b4bca !important;
      box-shadow: 0 6px 12px -2px rgba(54, 92, 245, 0.5) !important; /* Más brillo al tocar */
      transform: translateY(-1px); /* Efecto sutil de elevación */
  }
  
  /* Extra: Arregla también los botones 'outline' para que se lean bien sobre fondo oscuro */
  :where(html[data-bm-page="dashboardAntV1"]) .btn-outline-primary{
      color: #365CF5 !important;
      border-color: #365CF5 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-outline-primary:hover{
      background-color: #365CF5 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 6px -1px rgba(54, 92, 245, 0.3) !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .alert-warning{
      background-color: rgba(245, 158, 11, 0.1) !important;
      border-color: rgba(245, 158, 11, 0.25) !important;
      color: #fbbf24 !important; /* Texto dorado/ámbar brillante */
  }
  
  /* Botones Secundarios (Gris oscuro en lugar de gris claro) */
  :where(html[data-bm-page="dashboardAntV1"]) .btn-secondary{
      background-color: #334155 !important; /* Slate 700 */
      border-color: #475569 !important;
      color: #e2e8f0 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-secondary:hover,
:where(html[data-bm-page="dashboardAntV1"]) .btn-secondary:focus{
      background-color: #475569 !important; /* Slate 600 al hover */
      border-color: #64748b !important;
      color: #fff !important;
  }

  /* Botones Outline Secondary (Selectores Long/Short, Filtros de fecha) */
  :where(html[data-bm-page="dashboardAntV1"]) .btn-outline-secondary{
      color: #94a3b8 !important;
      border-color: #334155 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-outline-secondary:hover,
:where(html[data-bm-page="dashboardAntV1"]) .btn-check:checked + .btn-outline-secondary{ 
      /* Estado activo/seleccionado: se ilumina en tu azul o gris brillante */
      background-color: #334155 !important; 
      color: #f8fafc !important;
      border-color: #64748b !important;
  }

  /* Offcanvas (Paneles laterales deslizzantes) */
  :where(html[data-bm-page="dashboardAntV1"]) .offcanvas,
:where(html[data-bm-page="dashboardAntV1"]) .offcanvas-header,
:where(html[data-bm-page="dashboardAntV1"]) .offcanvas-body{
      background-color: #1e293b !important; /* Slate 800 (Igual que las tarjetas) */
      color: #94a3b8 !important;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .offcanvas-title{
      color: #f8fafc !important;
  }
  /* Corrige el botón de cerrar (X) dentro del offcanvas */
  :where(html[data-bm-page="dashboardAntV1"]) .offcanvas-header .btn-close{
      filter: invert(1) grayscale(100%) brightness(200%);
  }

  /* Etiquetas de Formularios y Checkboxes */
  :where(html[data-bm-page="dashboardAntV1"]) .form-check-label{
      color: #cbd5e1 !important; /* Slate 300 (Gris claro) */
  }
  
  /* Fondos sutiles (bg-light-subtle) -> Transformar a Fondo Oscuro Profundo
     Esto arregla las cajas de "Attach image" o áreas secundarias */
  :where(html[data-bm-page="dashboardAntV1"]) .bg-light-subtle{
      background-color: #0f172a !important; /* Slate 900 */
      color: #94a3b8 !important;
      border: 1px solid #334155 !important; /* Asegura que el borde también se oscurezca */
  }
  /* Forzar que el borde genérico (.border) sea oscuro cuando está en estos contextos */
  :where(html[data-bm-page="dashboardAntV1"]) .border{
      border-color: #334155 !important;
  }

/* ==================== VISTA: html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboardAntV1.php:1999 */
/* Override grid de filtros */
@media (min-width: 768px){
  :where(html[data-bm-page="dashboardAntV1"]) .filters-grid{
    grid-template-columns:
      minmax(220px, 1fr)
      minmax(260px, 380px)
      auto;
    column-gap: 14px;
  }
}

/* ===== Date Range (popover) ===== */
:where(html[data-bm-page="dashboardAntV1"]) .dr-field{ position: relative; }
:where(html[data-bm-page="dashboardAntV1"]) #dateRangeBtn{ cursor: pointer; background: #0f172a; border-color: #334155; color: #f8fafc; }
:where(html[data-bm-page="dashboardAntV1"]) #dateRangeBtn:after{
  content: "▼"; float: right; font-size: .65rem; opacity: .6; line-height: 22px;
}

/* Popover contenedor */
:where(html[data-bm-page="dashboardAntV1"]) .dr-popover{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1200;
  width: min(820px, 95vw);
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  padding: 10px;
  display: none;
}
:where(html[data-bm-page="dashboardAntV1"]) .dr-popover[aria-hidden="false"]{ display: block; }

/* Header */
:where(html[data-bm-page="dashboardAntV1"]) .dr-header{
  display: grid;
  grid-template-columns: 1fr 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 8px 6px;
  border-bottom: 1px dashed #334155;
}
:where(html[data-bm-page="dashboardAntV1"]) .dr-title{ font-weight: 700; font-size: .95rem; color: #f8fafc; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-sep{ text-align:center; color:#94a3b8; font-weight:700; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-actions-top .btn{ padding: 2px 8px; color: #94a3b8; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-actions-top .btn:hover{ color: #f8fafc; background: #334155; }

/* Body */
:where(html[data-bm-page="dashboardAntV1"]) .dr-body{
  display: grid;
  grid-template-columns: 1fr 1fr 220px;
  gap: 12px;
  padding: 10px 4px 8px 4px;
}
@media (max-width: 992px){
  :where(html[data-bm-page="dashboardAntV1"]) .dr-body{ grid-template-columns: 1fr; }
  :where(html[data-bm-page="dashboardAntV1"]) .dr-presets{ order: -1; }
}

/* Calendario interno */
:where(html[data-bm-page="dashboardAntV1"]) .dr-cal{ border: 1px solid #334155; border-radius: 10px; padding: 8px; background: #0f172a; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 6px;
}
:where(html[data-bm-page="dashboardAntV1"]) .dr-cal-head .btn{ color:#94a3b8; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-month-title{ font-weight:700; color:#f8fafc; }

:where(html[data-bm-page="dashboardAntV1"]) .dr-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
:where(html[data-bm-page="dashboardAntV1"]) .dr-grid .dr-dow{ text-align:center; font-weight:700; font-size:.75rem; color:#64748b; padding:4px 0; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-day{
  text-align:center; padding:6px 0; border-radius:8px; cursor:pointer;
  font-weight:600; color:#94a3b8;
}
:where(html[data-bm-page="dashboardAntV1"]) .dr-day:hover{ background:#334155; color: #fff; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-day.muted{ color:#475569; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-day.selected{ background:#365CF5; color:#fff; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-day.in-range{ background:rgba(54, 92, 245, 0.2); color: #e2e8f0; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-day.range-edge{ background:#365CF5; color:#fff; }

/* Presets */
:where(html[data-bm-page="dashboardAntV1"]) .dr-presets{ border: 1px dashed #334155; border-radius: 10px; padding: 8px; background:#1e293b; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-presets-title{ font-weight:700; font-size:.9rem; color:#f8fafc; margin-bottom:6px; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-presets-list{ display:flex; flex-direction:column; gap:6px; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-presets-list .btn{ color: #94a3b8; border-color: #334155; }
:where(html[data-bm-page="dashboardAntV1"]) .dr-presets-list .btn:hover{ background: #334155; color: #fff; }

/* Footer */
:where(html[data-bm-page="dashboardAntV1"]) .dr-footer{
  display:flex; align-items:center; gap:12px;
  padding: 8px 6px 4px 6px; border-top:1px dashed #334155;
}
:where(html[data-bm-page="dashboardAntV1"]) #drPreview{ white-space: nowrap; color: #94a3b8; }
:where(html[data-bm-page="dashboardAntV1"]) #drCancelBtn{ background: transparent; border: 1px solid #334155; color: #94a3b8; }
:where(html[data-bm-page="dashboardAntV1"]) #drCancelBtn:hover{ background: #334155; color: #fff; }

/* Backdrop */
:where(html[data-bm-page="dashboardAntV1"]) .dr-backdrop{
  position: fixed; inset: 0;
  z-index: 1049;
  display:none;
}
:where(html[data-bm-page="dashboardAntV1"]) .dr-backdrop.show{ display:block; }

/* ==================== VISTA: html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboardAntV1.php:2313 */
/* === Barra de Acciones y Botones (Dark Mode) === */
  
  :where(html[data-bm-page="dashboardAntV1"]) .actions-toolbar-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  @media (min-width: 1200px){
    :where(html[data-bm-page="dashboardAntV1"]) .actions-toolbar-grid{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }
  }

  :where(html[data-bm-page="dashboardAntV1"]) .btn-action-tool{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid #334155;
    background-color: #1e293b;
    color: #94a3b8;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }

  :where(html[data-bm-page="dashboardAntV1"]) .btn-action-tool:hover{
    background-color: #334155;
    border-color: #475569;
    color: #f8fafc;
    transform: translateY(-1px);
  }

  :where(html[data-bm-page="dashboardAntV1"]) .btn-action-tool:active{
    background-color: #0f172a;
    transform: translateY(0);
  }

  :where(html[data-bm-page="dashboardAntV1"]) .btn-action-tool i{
    font-size: 1.1rem;
    color: #64748b;
  }
  :where(html[data-bm-page="dashboardAntV1"]) .btn-action-tool:hover i{ color: #f8fafc; }

  /* Botón primario (+ Create new trade) */
  :where(html[data-bm-page="dashboardAntV1"]) .btn-action-tool.primary{
    background-color: #365CF5;
    border-color: #365CF5;
    color: #ffffff;
  }
  
  :where(html[data-bm-page="dashboardAntV1"]) .btn-action-tool.primary:hover{
    background-color: #2b4bca;
    border-color: #2b4bca;
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(54, 92, 245, 0.25);
  }
  
  :where(html[data-bm-page="dashboardAntV1"]) .btn-action-tool.primary i{
    color: #ffffff;
  }

  @media (max-width: 380px){
    :where(html[data-bm-page="dashboardAntV1"]) .actions-toolbar-grid{
      grid-template-columns: 1fr;
    }
    :where(html[data-bm-page="dashboardAntV1"]) .btn-action-tool{
      justify-content: flex-start;
      padding-left: 16px;
    }
  }

/* ==================== VISTA: html[data-bm-page="dashboardAntV1"] ==================== */
/* Origen: dashboardAntV1.php:2598 */
/* Altura y tipografía coherentes entre inputs y botones */
  :where(html[data-bm-page="dashboardAntV1"]) #credBanner .cred-input{ height: 36px; font-size: .95rem; }
  :where(html[data-bm-page="dashboardAntV1"]) #credBanner .btn-cred{
    height: 36px;
    padding: .35rem .7rem;
    font-size: .95rem;
    line-height: 1.1;
    border-radius: .5rem;
  }
  :where(html[data-bm-page="dashboardAntV1"]) #credBanner .btn-icon{
    height: 36px;
    width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-color: #334155;
    color: #94a3b8;
  }
  :where(html[data-bm-page="dashboardAntV1"]) #credBanner .btn-icon:hover{
    background-color: #334155;
    color: #f8fafc;
  }

  /* Grupo de contraseña */
  :where(html[data-bm-page="dashboardAntV1"]) #credBanner .cred-group .form-control{ border-right: 0; }
  :where(html[data-bm-page="dashboardAntV1"]) #credBanner .cred-group .btn-icon{ 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
  }
  :where(html[data-bm-page="dashboardAntV1"]) #credBanner .cred-group .btn-icon + .btn-icon{ border-left: 0; }
  :where(html[data-bm-page="dashboardAntV1"]) #credBanner .cred-group .btn-icon:first-of-type{ border-left-width: 1px !important; }

  :where(html[data-bm-page="dashboardAntV1"]) #credBanner .btn{ white-space: nowrap; }

  /* Alert de datos incorrectos DARK MODE */
  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning{
    /* Fondo oscuro profundo (igual que los inputs) para integrarse, no resaltar agresivamente */
    background-color: #0f172a !important; 
    /* Borde sutil, quizás punteado para indicar que es información "técnica" o extra */
    border: 1px dashed #334155 !important;
    /* Texto gris suave */
    color: #94a3b8 !important;
    border-radius: 12px;
    padding: .75rem 1rem;
    transition: all 0.2s ease;
  }
  
  /* Efecto hover suave en todo el contenedor */
  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning:hover{
    border-color: #475569 !important;
    background-color: #0b1120 !important;
  }

  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-toggle{
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    color: #f8fafc; /* Título en blanco brillante */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-toggle:focus{
    outline: none;
    box-shadow: none;
  }
  
  /* El subtítulo pequeño */
  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-toggle .small{
    color: #64748b; /* Gris más oscuro */
  }

  /* La píldora "Importante" ahora es AZUL (Tu marca) en lugar de Amarilla */
  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-pill{
    background: rgba(54, 92, 245, 0.1); /* Fondo azul muy suave */
    color: #365CF5; /* Tu azul principal */
    border: 1px solid rgba(54, 92, 245, 0.3);
    font-size: .70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: .25rem .65rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-pill i{ 
      font-size: 1rem; 
  }

  /* Flecha de colapso */
  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-chevron i{ 
      transition: transform .2s ease; 
      color: #64748b;
  }

  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-toggle[aria-expanded="true"] .cred-alert-chevron i{
    transform: rotate(180deg);
    color: #365CF5; /* Se ilumina azul al abrir */
  }

  /* El botón de acción dentro de la alerta */
  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-btn{
    background-color: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
    border-radius: .5rem;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 16px;
    transition: all 0.2s;
  }
  
  :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-btn:hover{
    background-color: #365CF5; /* Hover azul */
    color: #ffffff;
    border-color: #365CF5;
    box-shadow: 0 4px 12px rgba(54, 92, 245, 0.3);
  }

  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboardAntV1"]) #credBanner .btn-cred{ width: 100%; }
    :where(html[data-bm-page="dashboardAntV1"]) #credDataWarning .cred-alert-toggle{
      flex-direction: column;
      align-items: flex-start;
    }
  }

/* ==================== VISTA: html[data-bm-page="dashboardConstruccion"], html[data-bm-page="dashboardTest"], html[data-bm-page="guia-csv-journal"] ==================== */
/* Origen: dashboardConstruccion.php:48, dashboardTest.php:48, guia-csv-journal.php:25 */
:where(html[data-bm-page="dashboardConstruccion"], html[data-bm-page="dashboardTest"], html[data-bm-page="guia-csv-journal"]) .tooltip-wrapper{
  position: relative;
  display: inline-block;
}
:where(html[data-bm-page="dashboardConstruccion"], html[data-bm-page="dashboardTest"], html[data-bm-page="guia-csv-journal"]) .tooltip-custom{
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translate(-.5rem, -50%);
  background: #343a40;
  color: #fff;
  padding: .5rem .75rem;
  border-radius: .5rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1200;
  font-size: 0.85rem;
}
:where(html[data-bm-page="dashboardConstruccion"], html[data-bm-page="dashboardTest"], html[data-bm-page="guia-csv-journal"]) .tooltip-custom::after{
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: .4rem;
  border-style: solid;
  border-color: transparent transparent transparent #343a40;
}
:where(html[data-bm-page="dashboardConstruccion"], html[data-bm-page="dashboardTest"], html[data-bm-page="guia-csv-journal"]) .tooltip-wrapper:hover .tooltip-custom{
  opacity: 1;
  visibility: visible;
}

/* Grid para botones uniformes y responsive */
:where(html[data-bm-page="dashboardConstruccion"], html[data-bm-page="dashboardTest"], html[data-bm-page="guia-csv-journal"]) .btn-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

/* ==================== VISTA: html[data-bm-page="dashboardTest"] ==================== */
/* Origen: dashboardTest.php:91 */
:where(html[data-bm-page="dashboardTest"]):root{
    --tj-green: #198754;
    --tj-red:   #dc3545;
    --tj-gray:  #adb5bd;
    --tj-blue:  #4A6CF7;

    /* Calendario */
    --cal-border: #e9ecef;
    --cal-bg: #ffffff;
    --cal-bg-out: #f8f9fa;
    --cal-pos: #d4edda;
    --cal-neg: #f8d7da;
    --cal-zero: #e2e3e5;
    --cal-weekbox-bg: #fafafa;
    --cal-weekbox-border: #dee2e6;
  }

  @media (min-width: 1200px){
    :where(html[data-bm-page="dashboardTest"]) .col-xl-fifth{ flex: 0 0 20%; max-width: 20%; }
  }

  :where(html[data-bm-page="dashboardTest"]) .filters-toolbar{ width: 100%; }
  :where(html[data-bm-page="dashboardTest"]) .filters-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: end;
  }
  @media (min-width: 768px){
    :where(html[data-bm-page="dashboardTest"]) .filters-grid{
      grid-template-columns:
        minmax(220px, 1fr)
        minmax(160px, 220px)
        minmax(160px, 220px)
        minmax(120px, 140px)
        auto;
      column-gap: 14px;
    }
  }
  :where(html[data-bm-page="dashboardTest"]) .filters-grid .form-label{ margin-bottom: 6px; font-weight: 600; font-size: 0.875rem; color: #4b5563; }
  :where(html[data-bm-page="dashboardTest"]) .filters-grid .form-control-sm,
:where(html[data-bm-page="dashboardTest"]) .filters-grid .form-select-sm{ height: 38px; }
  :where(html[data-bm-page="dashboardTest"]) .filters-grid .btn{ height: 38px; }

  :where(html[data-bm-page="dashboardTest"]) .title-wrapper{ padding-top: 30px; margin-bottom: 18px; }
  @media (min-width: 992px){ :where(html[data-bm-page="dashboardTest"]) .title-wrapper{ margin-bottom: 26px; } }

  /* =============================
     KPI (métricas superiores)
     ============================= */
  :where(html[data-bm-page="dashboardTest"]) .metrics-row{ row-gap: 20px; }
  :where(html[data-bm-page="dashboardTest"]) .metrics-row > [class*="col-"]{ display: flex; }

  /* Tarjeta base */
  :where(html[data-bm-page="dashboardTest"]) .icon-card{
    width: 100%;
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    background: #fff;
    min-height: 156px;
  }
  /* En pantallas muy angostas: apilar icono/grafiquito arriba y texto abajo */
  @media (max-width: 575.98px){
    :where(html[data-bm-page="dashboardTest"]) .icon-card{
      grid-template-columns: 1fr;
      text-align: center;
      min-height: 0;
    }
    :where(html[data-bm-page="dashboardTest"]) .icon-card .icon{ margin: 0 auto 6px; }
    :where(html[data-bm-page="dashboardTest"]) .kpi-meta{ justify-content: center; }
  }

  /* Área de icono / mini-gráfico */
  :where(html[data-bm-page="dashboardTest"]) .icon{
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    border-radius: 12px;
    background: #f8fafc;
  }
  :where(html[data-bm-page="dashboardTest"]) .icon.no-bg{ background-color: transparent !important; box-shadow: none !important; }
  :where(html[data-bm-page="dashboardTest"]) .icon-card .icon canvas,
:where(html[data-bm-page="dashboardTest"]) .icon-card .icon svg{ width: 72px !important; height: 72px !important; display: block; }

  /* Contenido textual */
  :where(html[data-bm-page="dashboardTest"]) .icon-card .content{ display:flex; flex-direction: column; gap: 6px; }
  :where(html[data-bm-page="dashboardTest"]) .kpi-title{ font-weight:700; font-size:.875rem; color:#4b5563; margin: 0; }
  :where(html[data-bm-page="dashboardTest"]) .kpi-value{ font-weight:800; font-size: clamp(1.05rem, 2.8vw, 1.55rem); line-height: 1.1; margin: 0; }
  :where(html[data-bm-page="dashboardTest"]) .kpi-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  :where(html[data-bm-page="dashboardTest"]) .kpi-sub{ font-size: .82rem; color:#6b7280; margin: 0; }

  /* Mini-gauges (SVG) */
  :where(html[data-bm-page="dashboardTest"]) .kpi-gauge,
:where(html[data-bm-page="dashboardTest"]) .kpi-donut{
    width: 72px; height: 72px; display:block;
  }
  /* Donuts empiezan arriba (12 en punto) */
  :where(html[data-bm-page="dashboardTest"]) .kpi-donut circle{
    transform: rotate(-90deg);
    transform-origin: 40px 40px; /* para viewBox 0 0 80 80 */
  }

  /* Barras promedio (la que ya usas) */
  :where(html[data-bm-page="dashboardTest"]) .progress{ background:#eef2f7; }
  :where(html[data-bm-page="dashboardTest"]) .progress-bar.bg-success{ background: var(--tj-green) !important; }
  :where(html[data-bm-page="dashboardTest"]) .progress-bar.bg-danger{ background: var(--tj-red) !important; }

  :where(html[data-bm-page="dashboardTest"]) .card-style canvas{ width: 100% !important; height: 300px !important; }

  :where(html[data-bm-page="dashboardTest"]) .fc-daygrid-day div.pnl-badge{ font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
  :where(html[data-bm-page="dashboardTest"]) .wb-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
  :where(html[data-bm-page="dashboardTest"]) .wb-header .page-label{ font-weight:600; font-size:.9rem; color:#495057; }

  /* =========================================================
     CALENDARIO — grilla unificada RESPONSIVE
     ========================================================= */
  :where(html[data-bm-page="dashboardTest"]) .calendar-card .calendar-grid{
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid var(--cal-border);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
  }
  @media (max-width: 768px){
    :where(html[data-bm-page="dashboardTest"]) .calendar-card .calendar-grid{
      gap: 8px;
      padding: 8px;
    }
  }

  :where(html[data-bm-page="dashboardTest"]) .cal-head{
    text-align:center;
    font-size: 12px;
    font-weight:700;
    color:#6b7280;
    background:#f9fafb;
    border:1px solid var(--cal-border);
    border-radius:10px;
    padding:8px 6px;
    line-height: 1.1;
  }
  :where(html[data-bm-page="dashboardTest"]) .cal-head.head-week{ white-space:nowrap; }

  :where(html[data-bm-page="dashboardTest"]) .cal-day,
:where(html[data-bm-page="dashboardTest"]) .cal-weekbox{
    position: relative;
    min-height: clamp(76px, 12vw, 108px);
  }

  :where(html[data-bm-page="dashboardTest"]) .cal-day .day-box{
    position: absolute;
    inset: 0;
    border: 1px solid var(--cal-border);
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px;
    overflow: hidden;
  }

  :where(html[data-bm-page="dashboardTest"]) .cal-day.out .day-box{
    background: var(--cal-bg-out);
    border-color: var(--cal-border);
  }

  :where(html[data-bm-page="dashboardTest"]) .cal-day.pos .day-box{ background: var(--cal-pos); border-color:#c7e9d2; }
  :where(html[data-bm-page="dashboardTest"]) .cal-day.neg .day-box{ background: var(--cal-neg); border-color:#f3c2c2; }
  :where(html[data-bm-page="dashboardTest"]) .cal-day.zero .day-box{ background: var(--cal-zero); }

  :where(html[data-bm-page="dashboardTest"]) .cal-day{ cursor: default; }
  :where(html[data-bm-page="dashboardTest"]) .cal-day.has-trades{ cursor: pointer; }

  :where(html[data-bm-page="dashboardTest"]) .cal-day .dnum{
    position:absolute;
    top:8px; left:8px;
    font-size: clamp(10px, 1.8vw, 12px);
    color:#6b7280; font-weight:600;
    z-index: 1;
  }

  :where(html[data-bm-page="dashboardTest"]) .cal-day .val{
    position: static;
    text-align:center;
    font-size: clamp(14px, 2.6vw, 18px);
    font-weight:800; line-height:1.1;
    margin-top:auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(html[data-bm-page="dashboardTest"]) .cal-day.pos .val{ color:#0a6d2a; }
  :where(html[data-bm-page="dashboardTest"]) .cal-day.neg .val{ color:#881b1b; }
  :where(html[data-bm-page="dashboardTest"]) .cal-day.zero .val{ color:#3f3f46; }

  :where(html[data-bm-page="dashboardTest"]) .cal-day .trades{
    text-align:center;
    margin-top: 3px;
    font-size: clamp(10px, 2vw, 12px);
    font-weight: 600;
    color:#6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :where(html[data-bm-page="dashboardTest"]) .day-box .note-badge{
    position: absolute; right: 6px; top: 6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #ffe08a; border: 1px solid #e0ad00;
    display:flex; align-items:center; justify-content:center;
    font-size: 12px; line-height: 1; font-weight: 800; color:#6b4b00;
  }

  :where(html[data-bm-page="dashboardTest"]) .cal-weekbox{ display:flex; align-items:stretch; }
  :where(html[data-bm-page="dashboardTest"]) .cal-weekbox-inner{
    border:1px solid var(--cal-weekbox-border);
    border-radius:10px;
    padding:10px;
    background:white;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center; justify-content:center;
    gap:6px;
  }
  :where(html[data-bm-page="dashboardTest"]) .wk-title{ font-size:12px; color:#6b7280; font-weight:700; margin-bottom:2px; }
  :where(html[data-bm-page="dashboardTest"]) .wk-amount{ font-size:18px; font-weight:800; }
  :where(html[data-bm-page="dashboardTest"]) .wk-days{ font-size:12px; color:#6b7280; }
  :where(html[data-bm-page="dashboardTest"]) .wk-pos .wk-amount{ color:#0a6d2a; }
  :where(html[data-bm-page="dashboardTest"]) .wk-neg .wk-amount{ color:#881b1b; }
  :where(html[data-bm-page="dashboardTest"]) .wk-zero .wk-amount{ color:#3f3f46; }

  @media (max-width: 992px){
    :where(html[data-bm-page="dashboardTest"]) .calendar-card .calendar-grid{
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    :where(html[data-bm-page="dashboardTest"]) .cal-head.head-week,
:where(html[data-bm-page="dashboardTest"]) .cal-weekbox{ display:none !important; }
  }

  :where(html[data-bm-page="dashboardTest"]) .modal-backdrop.show{ background-color: rgba(0,0,0,.45); }

  :where(html[data-bm-page="dashboardTest"]) .day-trades-scroll{
    max-height: 55vh; overflow:auto; border:1px solid #e9ecef; border-radius:10px; padding: 8px; background:#fff;
  }
  :where(html[data-bm-page="dashboardTest"]) .day-trades-table{ border-collapse: separate; border-spacing: 0; width: 100%; }
  :where(html[data-bm-page="dashboardTest"]) .day-trades-table thead th{
    position: sticky; top: 0; z-index: 1; background:#fff; border-bottom:1px solid #e9ecef; padding: .55rem .85rem !important;
  }
  :where(html[data-bm-page="dashboardTest"]) .day-trades-table tbody td{ padding: .55rem .85rem !important; vertical-align: middle; }

  /* ↓↓↓ Ajustes SOLO para el cuadro "Day details" ↓↓↓ */
  :where(html[data-bm-page="dashboardTest"]) #dayDetailModal .modal-content{ font-size: 0.92rem; }
  :where(html[data-bm-page="dashboardTest"]) #dayDetailModal .day-trades-table thead th,
:where(html[data-bm-page="dashboardTest"]) #dayDetailModal .day-trades-table tbody td{ font-size: 0.92rem; }

  /* Ticker más compacto y consistente */
  :where(html[data-bm-page="dashboardTest"]) #dayDetailModal .ticker-col{ width: 7.5ch; max-width: 7.5ch; white-space: nowrap; }
  :where(html[data-bm-page="dashboardTest"]) #dayDetailModal .ticker-cell{
    width: 7.5ch; max-width: 7.5ch;
    white-space: nowrap; overflow: hidden; text-overflow: clip;
    font-variant-numeric: tabular-nums;
  }

  /* Botón/ícono de nota por trade */
  :where(html[data-bm-page="dashboardTest"]) .trade-note-btn{
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 4px 8px;
    background: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  :where(html[data-bm-page="dashboardTest"]) .trade-note-btn.has-note{ background: #fff7d1; border-color: #e0ad00; }
  :where(html[data-bm-page="dashboardTest"]) .trade-note-btn .note-icon{ font-style: normal; }

  :where(html[data-bm-page="dashboardTest"]) .note-toolbar{
    display:flex; flex-wrap:wrap; gap:6px; border:1px solid #e9ecef; border-radius:10px 10px 0 0; padding:8px; background:#f8f9fa;
  }
  :where(html[data-bm-page="dashboardTest"]) .note-toolbar .btn-sm{ padding: .25rem .5rem; }
  :where(html[data-bm-page="dashboardTest"]) .note-editor{
    border:1px solid #e9ecef; border-top:0; border-radius:0 0 10px 10px;
    min-height: 200px; padding:12px; background:#fff; overflow:auto;
  }
  :where(html[data-bm-page="dashboardTest"]) .note-editor:focus{ outline:none; }

  /* Tipo/plan en tablas */
  :where(html[data-bm-page="dashboardTest"]) .trade-type-select{ min-width: 160px; }
  :where(html[data-bm-page="dashboardTest"]) .btn-rule-check{
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 4px 10px;
    background:#fff;
    line-height:1;
  }

  /* Badges del Plan */
  :where(html[data-bm-page="dashboardTest"]) .badge-plan{
    display: inline-block;
    padding: .25rem .55rem;
    border-radius: .5rem;
    font-weight:700;
    line-height: 1.1;
    font-size: .78rem;
    border: 1px solid transparent;
    min-width: 2.25rem;
    text-align: center;
    white-space: nowrap;
  }
  :where(html[data-bm-page="dashboardTest"]) .badge-plan.yes{ background:#d1fae5; color:#065f46; border-color:#10b981; }
  :where(html[data-bm-page="dashboardTest"]) .badge-plan.no{ background:#fee2e2; color:#991b1b; border-color:#ef4444; }
  :where(html[data-bm-page="dashboardTest"]) .badge-plan.na{ background:#e5e7eb; color:#111827; border-color:#9ca3af; }

  /* Modal Trade Types Manager (UX mejorada) */
  :where(html[data-bm-page="dashboardTest"]) .tt-list{
    max-height: 60vh;
    overflow:auto;
    border:1px solid #e9ecef;
    border-radius:10px;
    padding:8px;                 /* padding para que no quede pegado */
    background:#fff;
  }
  :where(html[data-bm-page="dashboardTest"]) .tt-item{
    padding:10px 12px;
    border-bottom:1px solid #f1f3f5;
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
  }
  :where(html[data-bm-page="dashboardTest"]) .tt-item.active{ background:#f8fafc; }
  :where(html[data-bm-page="dashboardTest"]) .tt-item:hover{ background:#f3f6ff; }

  :where(html[data-bm-page="dashboardTest"]) .tt-rules{
    max-height: 50vh;
    overflow:auto;
    border:1px solid #e9ecef;
    border-radius:10px;
    padding:8px;
    background:#fff;
  }

  /* Fila de regla: compacta y alineada */
  :where(html[data-bm-page="dashboardTest"]) .tt-rule-row{
    display:flex;
    gap:8px;
    align-items:center;
    padding:6px 0;
    border-bottom:1px dashed #eee;
  }
  :where(html[data-bm-page="dashboardTest"]) .tt-rule-row:last-child{ border-bottom:0; }
  :where(html[data-bm-page="dashboardTest"]) .tt-rule-row input.form-control{
    flex: 1 1 auto;              /* el input crece */
    min-width: 0;
    height: 36px;                /* altura más compacta */
  }
  :where(html[data-bm-page="dashboardTest"]) .tt-rule-row .btn-delete-rule{
    padding: .25rem .5rem;       /* botón más pequeño */
    line-height: 1;
    height: 32px;
    white-space: nowrap;
  }

  /* Encabezado del formulario + fondo diferenciado del panel derecho */
  :where(html[data-bm-page="dashboardTest"]) .tt-form-header{
    border-bottom: 1px dashed #e9ecef;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    background:#f8fafc;          /* leve contraste */
    border-radius:8px;
  }
  :where(html[data-bm-page="dashboardTest"]) #ttFormCard{
    background:#fcfdff;          /* sutil color distinto para todo el bloque derecho */
    border:1px solid #dbeafe;    /* leve borde azulado */
  }
  :where(html[data-bm-page="dashboardTest"]) .tt-form-title{ font-weight: 700; font-size: .95rem; }
  :where(html[data-bm-page="dashboardTest"]) .tt-form-subtitle{ color:#6b7280; font-size:.85rem; }

  /* Estado vacío: ahora con padding y fondo */
  :where(html[data-bm-page="dashboardTest"]) .tt-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 200px;
    padding: 16px;
    background:#f8fafc;
    border:1px dashed #e2e8f0;
    border-radius:10px;
    text-align:center;
  }
  :where(html[data-bm-page="dashboardTest"]) .tt-empty .icon{ font-size:28px; margin-bottom:6px; }
  :where(html[data-bm-page="dashboardTest"]) .tt-empty h6{ margin:6px 0; }
  :where(html[data-bm-page="dashboardTest"]) .tt-empty p{ margin:0; color:#6b7280; }

  :where(html[data-bm-page="dashboardTest"]) .mode-badge{
    display:inline-block; font-weight:700; line-height:1; font-size:.75rem;
    border:1px solid; border-radius:999px; padding:.35rem .6rem; white-space:nowrap;
  }
  :where(html[data-bm-page="dashboardTest"]) .mode-badge.create{ background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
  :where(html[data-bm-page="dashboardTest"]) .mode-badge.edit{ background:#ecfeff; color:#155e75; border-color:#a5f3fc; }

  :where(html[data-bm-page="dashboardTest"]) .twinkle-active{ animation: bm-3959812377-twinkle 800ms ease; }
  @keyframes bm-3959812377-twinkle{
    0%{ box-shadow: 0 0 0 0 rgba(74,108,247,0.35); }
    50%{ box-shadow: 0 0 0 6px rgba(74,108,247,0.15); }
    100%{ box-shadow: 0 0 0 0 rgba(74,108,247,0.0); }
  }

  :where(html[data-bm-page="dashboardTest"]) .form-hint{ font-size:.8rem; color:#6b7280; margin-top:.25rem; }
  :where(html[data-bm-page="dashboardTest"]) .btn-ghost{ background:#fff; border:1px dashed #cbd5e1; }
  :where(html[data-bm-page="dashboardTest"]) .btn-ghost:hover{ background:#f8fafc; border-color:#94a3b8; }

/* ==================== VISTA: html[data-bm-page="dashboardTest"] ==================== */
/* Origen: dashboardTest.php:509 */
/* ====== Modal responsiva genérica (aplícalo con la clase .modal-resp en cada modal) ====== */
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp{
  /* Ocupa el ancho disponible con un tope de 1000px y respeta los márgenes de Bootstrap */
  --bs-modal-width: min(1000px, 100vw - var(--bs-modal-margin) * 2);
}

/* Ajuste de márgenes (espacio con los bordes de pantalla) según punto de corte */
@media (max-width: 575.98px){
  :where(html[data-bm-page="dashboardTest"]) .modal.modal-resp{ --bs-modal-margin: 1rem; }
}
@media (min-width: 576px){
  :where(html[data-bm-page="dashboardTest"]) .modal.modal-resp{ --bs-modal-margin: 1.25rem; }
}

/* Padding consistente dentro de la modal */
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .modal-header,
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .modal-footer{ padding: .75rem 1rem; }
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .modal-body{ padding: 1rem; }

/* Evitar desbordes horizontales en contenido ancho (tablas/listas) dentro de la modal */
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .table-responsive,
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .day-trades-scroll{
  overflow-x: auto;
}

/* En pantallas medianas/pequeñas, asegúrate de que la tabla de trades no “rompa” el layout */
@media (max-width: 992px){
  :where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .day-trades-table{
    display: block;
    width: 100%;
  }
  :where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .day-trades-table thead,
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .day-trades-table tbody,
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .day-trades-table tr,
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .day-trades-table th,
:where(html[data-bm-page="dashboardTest"]) .modal.modal-resp .day-trades-table td{
    white-space: nowrap;
  }
}

:where(html[data-bm-page="dashboardTest"]) .auto-width-modal{
  width: auto;
  max-width: 98vw;        /* tope superior por seguridad */
  margin-left: auto;
  margin-right: auto;
}

/* ===== NUEVO: Ticker compacto en cualquier tabla de trades (incluye Recent Trades) ===== */
:where(html[data-bm-page="dashboardTest"]) .day-trades-table .ticker-col{
  width: 7.5ch;
  max-width: 7.5ch; /* 5 chars + '..' */
  white-space: nowrap;
}
:where(html[data-bm-page="dashboardTest"]) .day-trades-table .ticker-cell{
  width: 7.5ch;
  max-width: 7.5ch;
  white-space: nowrap; overflow: hidden; text-overflow: clip; /* truncado manual se hace en JS */
  font-variant-numeric: tabular-nums;
}

/* ==================== VISTA: html[data-bm-page="dashboardTest"] ==================== */
/* Origen: dashboardTest.php:571 */
/* Controles de los charts (estética compacta y responsive) */
  :where(html[data-bm-page="dashboardTest"]) .chart-controls .input-group-text{ font-weight:600; }
  :where(html[data-bm-page="dashboardTest"]) .form-switch.form-switch-sm .form-check-input{ width:2.25rem; height:1.125rem; }
  :where(html[data-bm-page="dashboardTest"]) .form-switch.form-switch-sm .form-check-input:focus{ box-shadow:none; }
  :where(html[data-bm-page="dashboardTest"]) .form-switch.form-switch-sm .form-check-label{ margin-left:.25rem; }

/* ==================== VISTA: html[data-bm-page="dashboardTest"] ==================== */
/* Origen: dashboardTest.php:579 */
/* Override/ajuste del grid de filtros: ahora 3 columnas (Account, Date range, Filters) */
@media (min-width: 768px){
  :where(html[data-bm-page="dashboardTest"]) .filters-grid{
    grid-template-columns:
      minmax(220px, 1fr)
      minmax(260px, 380px)
      auto;
    column-gap: 14px;
  }
}

/* ===== Date Range (popover) ===== */
:where(html[data-bm-page="dashboardTest"]) .dr-field{ position: relative; }
:where(html[data-bm-page="dashboardTest"]) #dateRangeBtn{ cursor: pointer; }
:where(html[data-bm-page="dashboardTest"]) #dateRangeBtn:after{
  content: "▼";
  float: right;
  font-size: .65rem;
  opacity: .6;
  line-height: 22px;
}

/* Popover contenedor */
:where(html[data-bm-page="dashboardTest"]) .dr-popover{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1200;
  width: min(820px, 95vw);
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16,24,40,.15);
  padding: 10px;
  display: none; /* se abre por JS */
}
:where(html[data-bm-page="dashboardTest"]) .dr-popover[aria-hidden="false"]{ display: block; }

/* Header */
:where(html[data-bm-page="dashboardTest"]) .dr-header{
  display: grid;
  grid-template-columns: 1fr 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 8px 6px;
  border-bottom: 1px dashed #e9ecef;
}
:where(html[data-bm-page="dashboardTest"]) .dr-title{ font-weight: 700; font-size: .95rem; color:#334155; }
:where(html[data-bm-page="dashboardTest"]) .dr-sep{ text-align:center; color:#94a3b8; font-weight:700; }
:where(html[data-bm-page="dashboardTest"]) .dr-actions-top .btn{ padding: 2px 8px; }

/* Body: 2 calendarios + presets */
:where(html[data-bm-page="dashboardTest"]) .dr-body{
  display: grid;
  grid-template-columns: 1fr 1fr 220px;
  gap: 12px;
  padding: 10px 4px 8px 4px;
}
@media (max-width: 992px){
  :where(html[data-bm-page="dashboardTest"]) .dr-body{ grid-template-columns: 1fr; }
  :where(html[data-bm-page="dashboardTest"]) .dr-presets{ order: -1; }
}

/* Calendario */
:where(html[data-bm-page="dashboardTest"]) .dr-cal{ border: 1px solid #e9ecef; border-radius: 10px; padding: 8px; }
:where(html[data-bm-page="dashboardTest"]) .dr-cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 6px;
}
:where(html[data-bm-page="dashboardTest"]) .dr-cal-head .btn{ color:#475569; }
:where(html[data-bm-page="dashboardTest"]) .dr-month-title{ font-weight:700; color:#0f172a; }

:where(html[data-bm-page="dashboardTest"]) .dr-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
:where(html[data-bm-page="dashboardTest"]) .dr-grid .dr-dow{ text-align:center; font-weight:700; font-size:.75rem; color:#64748b; padding:4px 0; }
:where(html[data-bm-page="dashboardTest"]) .dr-day{
  text-align:center; padding:6px 0; border-radius:8px; cursor:pointer;
  font-weight:600; color:#334155;
}
:where(html[data-bm-page="dashboardTest"]) .dr-day:hover{ background:#f1f5f9; }
:where(html[data-bm-page="dashboardTest"]) .dr-day.muted{ color:#94a3b8; }
:where(html[data-bm-page="dashboardTest"]) .dr-day.selected{ background:#e0e7ff; color:#1e293b; }
:where(html[data-bm-page="dashboardTest"]) .dr-day.in-range{ background:#eef2ff; }
:where(html[data-bm-page="dashboardTest"]) .dr-day.range-edge{ background:#c7d2fe; color:#111827; }

/* Presets */
:where(html[data-bm-page="dashboardTest"]) .dr-presets{ border: 1px dashed #e2e8f0; border-radius: 10px; padding: 8px; background:#fafafa; }
:where(html[data-bm-page="dashboardTest"]) .dr-presets-title{ font-weight:700; font-size:.9rem; color:#475569; margin-bottom:6px; }
:where(html[data-bm-page="dashboardTest"]) .dr-presets-list{ display:flex; flex-direction:column; gap:6px; }

/* Footer */
:where(html[data-bm-page="dashboardTest"]) .dr-footer{
  display:flex; align-items:center; gap:12px;
  padding: 8px 6px 4px 6px; border-top:1px dashed #e9ecef;
}
:where(html[data-bm-page="dashboardTest"]) #drPreview{ white-space: nowrap; }

/* Cierre por click fuera */
:where(html[data-bm-page="dashboardTest"]) .dr-backdrop{
  position: fixed; inset: 0; z-index: 1199; display:none;
}
:where(html[data-bm-page="dashboardTest"]) .dr-backdrop.show{ display:block; }

/* ==================== VISTA: html[data-bm-page="guia-csv-journal"] ==================== */
/* Origen: guia-csv-journal.php:88 */
/* Estilos personalizados */
    :where(html[data-bm-page="guia-csv-journal"]) label{ display: block; margin: 10px 0; }
    :where(html[data-bm-page="guia-csv-journal"]) .hidden{ display: none; }
    :where(html[data-bm-page="guia-csv-journal"]) .content-section,
:where(html[data-bm-page="guia-csv-journal"]) .explicacion{
      margin-top: 1.5rem;
      padding: 1rem;
      background-color: #fff;
      border-radius: .25rem;
      border: 1px solid #dee2e6;
    }
    :where(html[data-bm-page="guia-csv-journal"]) .install-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 60px;
    }
    :where(html[data-bm-page="guia-csv-journal"]) .btn-primary-light{
      background-color: #339cff;
      border-color: #339cff;
      color: #fff;
    }
    :where(html[data-bm-page="guia-csv-journal"]) .btn-primary-light:hover,
:where(html[data-bm-page="guia-csv-journal"]) .btn-primary-light:focus{
      background-color: #2e8cee;
      border-color: #2e8cee;
      color: #fff;
    }

/* ==================== VISTA: html[data-bm-page="guia-csv-journal"] ==================== */
/* Origen: guia-csv-journal.php:117 */
/* Forzar que se vean bullets y números dentro del contenido */
  :where(html[data-bm-page="guia-csv-journal"]) .content-section ul,
:where(html[data-bm-page="guia-csv-journal"]) #guideSpanishContent ul,
:where(html[data-bm-page="guia-csv-journal"]) #guideEnglishContent ul{
    list-style: disc outside !important;
    padding-left: 1.25rem !important;
    margin: .5rem 0 1rem 0 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) .content-section ol,
:where(html[data-bm-page="guia-csv-journal"]) #guideSpanishContent ol,
:where(html[data-bm-page="guia-csv-journal"]) #guideEnglishContent ol{
    list-style: decimal outside !important;
    padding-left: 1.25rem !important;
    margin: .5rem 0 1rem 0 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) .content-section li,
:where(html[data-bm-page="guia-csv-journal"]) #guideSpanishContent li,
:where(html[data-bm-page="guia-csv-journal"]) #guideEnglishContent li{
    margin-bottom: .4rem;
  }

/* ==================== VISTA: html[data-bm-page="guia-csv-journal"] ==================== */
/* Origen: guia-csv-journal.php:142 */
/* Corrección visual encapsulada exclusivamente en esta página */
  :where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard{
    background-color: #eef2f7 !important;
    color: #1f2937 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard .container{
    color: #1f2937 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard .content-section,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard .explicacion{
    background-color: #f4f7fb !important;
    color: #1f2937 !important;
    border-color: #d8e0ea !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard h1,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard h2,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard h3,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard h4,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard h5,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard h6{
    color: #111827 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard p,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard li,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard label,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard span,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard section,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard .lead{
    color: #273449 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard strong{
    color: #111827 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard .text-muted{
    color: #526176 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard ol li::marker,
:where(html[data-bm-page="guia-csv-journal"]) #csvTutorialCard ul li::marker{
    color: #2563eb;
    font-weight: 700;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal .modal-content{
    background-color: #eef2f7 !important;
    color: #1f2937 !important;
    border-color: #d8e0ea !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal .modal-header{
    background-color: #e6edf5 !important;
    color: #111827 !important;
    border-bottom-color: #ccd6e2 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal .modal-body{
    background-color: #f4f7fb !important;
    color: #1f2937 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal .modal-title,
:where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal h1,
:where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal h2,
:where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal h3,
:where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal h4,
:where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal h5,
:where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal h6{
    color: #111827 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal p,
:where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal li,
:where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal label,
:where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal span{
    color: #273449 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal strong{
    color: #111827 !important;
  }

  :where(html[data-bm-page="guia-csv-journal"]) #addonInstallerModal .text-muted{
    color: #526176 !important;
  }

/* ==================== VISTA: html[data-bm-page="guia-csv-journal"] ==================== */
/* Origen: guia-csv-journal.php:515 */
:where(html[data-bm-page="guia-csv-journal"]) .modal.modal-resp{
      --bs-modal-width: min(1000px, 100vw - var(--bs-modal-margin) * 2);
    }
    @media (max-width: 575.98px){ :where(html[data-bm-page="guia-csv-journal"]) .modal.modal-resp{ --bs-modal-margin: 1rem; } }
    @media (min-width: 576px){ :where(html[data-bm-page="guia-csv-journal"]) .modal.modal-resp{ --bs-modal-margin: 1.25rem; } }
    :where(html[data-bm-page="guia-csv-journal"]) .modal.modal-resp .modal-header,
:where(html[data-bm-page="guia-csv-journal"]) .modal.modal-resp .modal-footer{ padding: .75rem 1rem; }
    :where(html[data-bm-page="guia-csv-journal"]) .modal.modal-resp .modal-body{ padding: 1rem; }
    :where(html[data-bm-page="guia-csv-journal"]) .auto-width-modal{
      width: auto;
      max-width: 98vw;
      margin-left: auto;
      margin-right: auto;
    }

/* ==================== VISTA: html[data-bm-page="index"] ==================== */
/* Origen: index.php:1360 */
/* ==========================================================
       INDEX.PHP · PANEL DE PRODUCTOS
       Rediseño visual moderno sin alterar la lógica PHP/JS
       ========================================================== */
    :where(html[data-bm-page="index"]):root{
        --bg-body: #111827;
        --bg-body-2: #0f172a;
        --bg-soft: #151f34;

        --surface-white: rgba(30, 41, 59, .94);
        --surface-white-solid: #1e293b;
        --surface-hover: rgba(51, 65, 85, .82);
        --surface-raised: rgba(36, 48, 71, .95);
        --surface-deep: rgba(15, 23, 42, .78);

        --text-primary: #f8fafc;
        --text-secondary: #a5b4cf;
        --text-light: #7f8da9;

        --brand-primary: #5267ff;
        --brand-primary-hover: #6f82ff;
        --brand-primary-dark: #3147dd;
        --brand-soft: rgba(82, 103, 255, .16);
        --brand-border: rgba(82, 103, 255, .34);

        --success-soft: rgba(57, 182, 111, .16);
        --success-text: #55d989;
        --warning-soft: rgba(245, 158, 11, .16);
        --warning-text: #fbbf24;
        --danger-soft: rgba(255, 95, 87, .16);
        --danger-text: #ff7a70;
        --info-soft: rgba(56, 189, 248, .14);
        --info-text: #67d7ff;

        --action-warning: #f3a82f;
        --action-warning-hover: #f59e0b;

        --border-subtle: rgba(148, 163, 184, .16);
        --border-strong: rgba(148, 163, 184, .28);
        --shadow-card: 0 20px 54px rgba(0, 0, 0, .30), 0 1px 0 rgba(255,255,255,.04) inset;
        --shadow-hover: 0 26px 70px rgba(0, 0, 0, .40), 0 0 0 1px rgba(82,103,255,.14);

        --radius-card: 24px;
        --radius-panel: 18px;
        --radius-btn: 14px;

        --font-main: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    :where(html[data-bm-page="index"]):is(html){
        scroll-behavior: smooth;
    }

    :where(html[data-bm-page="index"]) body{
        background: linear-gradient(180deg, var(--bg-body) 0%, var(--bg-body-2) 100%) !important;
        font-family: var(--font-main);
        color: var(--text-primary);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
    }

    :where(html[data-bm-page="index"]) body::before{
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 72%);
        opacity: .18;
        z-index: 0;
    }

    :where(html[data-bm-page="index"]) a{
        text-decoration: none;
        transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    :where(html[data-bm-page="index"]) .main-wrapper{
        background: transparent !important;
        position: relative;
        /*
           IMPORTANTE:
           No usar z-index aquí. Este contenedor envolvía los modales y creaba
           un contexto de apilamiento; Bootstrap agrega el .modal-backdrop al body
           con un z-index mayor, por eso el fondo quedaba encima del modal.
        */
        z-index: auto;
    }

    :where(html[data-bm-page="index"]) .dashboard-container{
        max-width: 1220px;
        margin: 0 auto;
        padding: 30px 22px 86px;
    }

    /* ==========================================================
       ENCABEZADO
       ========================================================== */
    :where(html[data-bm-page="index"]) .header-section{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 22px;
        margin-bottom: 28px;
        padding: 2px 0 22px;
        border-bottom: 1px solid var(--border-subtle);
    }

    :where(html[data-bm-page="index"]) .header-section::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: min(290px, 46%);
        height: 1px;
        background: linear-gradient(90deg, var(--brand-primary), transparent);
        opacity: .75;
    }

    :where(html[data-bm-page="index"]) .page-title h2{
        font-weight: 900;
        font-size: clamp(1.78rem, 2.75vw, 2.58rem);
        color: var(--text-primary);
        margin: 0 0 .25rem;
        letter-spacing: -.055em;
        line-height: 1.02;
    }

    :where(html[data-bm-page="index"]) .page-subtitle{
        color: var(--text-secondary);
        font-size: .98rem;
        max-width: 560px;
    }

    :where(html[data-bm-page="index"]) .kpi-row{
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    :where(html[data-bm-page="index"]) .kpi-pill{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 38px;
        background: linear-gradient(180deg, rgba(36,48,71,.96), rgba(24,34,54,.96));
        border: 1px solid var(--border-subtle);
        padding: 7px 14px;
        border-radius: 999px;
        font-size: .86rem;
        font-weight: 750;
        color: var(--text-secondary);
        box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.05) inset;
        transition: .18s ease;
        cursor: default;
    }

    :where(html[data-bm-page="index"]) .kpi-pill:hover{
        transform: translateY(-1px);
        border-color: var(--border-strong);
        background: linear-gradient(180deg, rgba(42,56,82,.98), rgba(29,41,64,.98));
        color: var(--text-primary);
    }

    :where(html[data-bm-page="index"]) .kpi-dot{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    :where(html[data-bm-page="index"]) .kpi-dot.red{ background-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .16), 0 0 16px rgba(239,68,68,.35); }
    :where(html[data-bm-page="index"]) .kpi-dot.green{ background-color: #39b66f; box-shadow: 0 0 0 4px rgba(57, 182, 111, .16), 0 0 16px rgba(57,182,111,.35); }
    :where(html[data-bm-page="index"]) .kpi-dot.amber{ background-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .16), 0 0 16px rgba(245,158,11,.35); }
    :where(html[data-bm-page="index"]) .kpi-dot.blue{ background-color: #5267ff; box-shadow: 0 0 0 4px rgba(82, 103, 255, .16), 0 0 16px rgba(82,103,255,.40); }


    /* ==========================================================
       AGRUPACIÓN DE LICENCIAS POR TIPO DE PRODUCTO
       ========================================================== */
    :where(html[data-bm-page="index"]) .product-groups-guide{
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin: -10px 0 24px;
        padding: 13px 15px;
        border: 1px solid var(--border-subtle);
        border-radius: 16px;
        background: rgba(15, 23, 42, .34);
        color: var(--text-secondary);
        font-size: .88rem;
        line-height: 1.45;
    }

    :where(html[data-bm-page="index"]) .product-groups-guide svg{
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        margin-top: 1px;
        color: var(--brand-primary-hover);
    }

    :where(html[data-bm-page="index"]) .product-groups-guide strong{
        display: block;
        margin-bottom: 2px;
        color: var(--text-primary);
        font-weight: 800;
    }

    :where(html[data-bm-page="index"]) .product-type-group{
        position: relative;
        margin-bottom: 18px;
        border: 1px solid var(--border-subtle);
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(30, 41, 59, .90), rgba(20, 30, 49, .92));
        box-shadow: 0 16px 42px rgba(0, 0, 0, .22), 0 1px 0 rgba(255,255,255,.035) inset;
        overflow: hidden;
        transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }

    :where(html[data-bm-page="index"]) .product-type-group:hover{
        border-color: rgba(82, 103, 255, .26);
    }

    :where(html[data-bm-page="index"]) .product-type-group.is-open{
        border-color: rgba(82, 103, 255, .34);
        box-shadow: 0 20px 52px rgba(0, 0, 0, .28), 0 0 0 1px rgba(82,103,255,.06);
    }

    :where(html[data-bm-page="index"]) .product-type-toggle{
        width: 100%;
        min-height: 78px;
        padding: 16px 18px;
        border: 0;
        background: transparent;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 14px;
        text-align: left;
        cursor: pointer;
        transition: background .2s ease;
    }

    :where(html[data-bm-page="index"]) .product-type-toggle:hover,
:where(html[data-bm-page="index"]) .product-type-toggle:focus-visible{
        background: linear-gradient(90deg, rgba(82, 103, 255, .08), rgba(56, 189, 248, .025));
    }

    :where(html[data-bm-page="index"]) .product-type-toggle:focus-visible{
        outline: 2px solid var(--brand-primary-hover);
        outline-offset: -2px;
    }

    :where(html[data-bm-page="index"]) .product-type-icon{
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #c9d1ff;
        background: linear-gradient(145deg, rgba(82, 103, 255, .22), rgba(56, 189, 248, .08));
        border: 1px solid rgba(82, 103, 255, .24);
        box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }

    :where(html[data-bm-page="index"]) .product-type-icon svg{
        width: 22px;
        height: 22px;
    }

    :where(html[data-bm-page="index"]) .product-type-main{
        min-width: 0;
        flex: 1 1 auto;
    }

    :where(html[data-bm-page="index"]) .product-type-name{
        display: block;
        color: var(--text-primary);
        font-size: 1.02rem;
        line-height: 1.25;
        font-weight: 900;
        letter-spacing: -.015em;
        overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="index"]) .product-type-subtitle{
        display: block;
        margin-top: 4px;
        color: var(--text-light);
        font-size: .80rem;
        font-weight: 650;
    }

    :where(html[data-bm-page="index"]) .product-type-stats{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        flex-wrap: wrap;
        margin-left: auto;
    }

    :where(html[data-bm-page="index"]) .product-type-stat{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 30px;
        padding: 5px 9px;
        border-radius: 999px;
        border: 1px solid var(--border-subtle);
        background: rgba(15, 23, 42, .48);
        color: var(--text-secondary);
        font-size: .76rem;
        font-weight: 800;
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .product-type-stat strong{
        color: var(--text-primary);
        font-weight: 950;
    }

    :where(html[data-bm-page="index"]) .product-type-stat.is-active{
        color: var(--success-text);
        background: var(--success-soft);
        border-color: rgba(57, 182, 111, .22);
    }

    :where(html[data-bm-page="index"]) .product-type-stat.is-pending{
        color: #aeb9ff;
        background: var(--brand-soft);
        border-color: var(--brand-border);
    }

    :where(html[data-bm-page="index"]) .product-type-gift-offer{
        width: calc(100% - 30px);
        margin: 0 15px 15px;
        padding: 13px 14px;
        border: 1px solid rgba(245, 158, 11, .34);
        border-radius: 16px;
        background:
            linear-gradient(135deg, rgba(245, 158, 11, .24), rgba(82, 103, 255, .10)),
            rgba(15, 23, 42, .30);
        box-shadow: 0 14px 30px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.06) inset;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        cursor: pointer;
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    :where(html[data-bm-page="index"]) .product-type-gift-offer:hover,
:where(html[data-bm-page="index"]) .product-type-gift-offer:focus-visible{
        transform: translateY(-1px);
        border-color: rgba(245, 158, 11, .52);
        box-shadow: 0 17px 34px rgba(0,0,0,.20), 0 0 0 1px rgba(245,158,11,.06);
        background:
            linear-gradient(135deg, rgba(245, 158, 11, .29), rgba(82, 103, 255, .12)),
            rgba(15, 23, 42, .34);
    }

    :where(html[data-bm-page="index"]) .product-type-gift-offer:focus-visible{
        outline: 2px solid rgba(245, 158, 11, .72);
        outline-offset: 2px;
    }

    :where(html[data-bm-page="index"]) .product-type-gift-offer-icon{
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(245, 158, 11, .16);
        border: 1px solid rgba(245, 158, 11, .28);
        color: var(--warning-text);
        font-size: 1.05rem;
        box-shadow: 0 8px 18px rgba(0,0,0,.14);
    }

    :where(html[data-bm-page="index"]) .product-type-gift-offer-copy{
        min-width: 0;
        flex: 1 1 auto;
    }

    :where(html[data-bm-page="index"]) .product-type-gift-offer-title{
        display: block;
        color: var(--warning-text);
        font-size: .87rem;
        font-weight: 950;
        line-height: 1.3;
        letter-spacing: -.01em;
    }

    :where(html[data-bm-page="index"]) .product-type-gift-offer-text{
        display: block;
        margin-top: 3px;
        color: var(--text-secondary);
        font-size: .78rem;
        font-weight: 650;
        line-height: 1.42;
    }

    :where(html[data-bm-page="index"]) .product-type-gift-offer-action{
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(245, 158, 11, .14);
        border: 1px solid rgba(245, 158, 11, .24);
        color: var(--warning-text);
        font-size: .74rem;
        font-weight: 900;
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .product-type-group.is-open .product-type-gift-offer{
        display: none;
    }

    :where(html[data-bm-page="index"]) .product-type-chevron{
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: var(--text-secondary);
        background: rgba(15, 23, 42, .42);
        border: 1px solid var(--border-subtle);
        transition: transform .28s ease, color .2s ease, background .2s ease;
    }

    :where(html[data-bm-page="index"]) .product-type-group.is-open .product-type-chevron{
        transform: rotate(180deg);
        color: var(--text-primary);
        background: rgba(82, 103, 255, .12);
    }

    :where(html[data-bm-page="index"]) .product-type-content{
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .30s cubic-bezier(.2,.8,.2,1);
    }

    :where(html[data-bm-page="index"]) .product-type-group.is-open .product-type-content{
        grid-template-rows: 1fr;
    }

    :where(html[data-bm-page="index"]) .product-type-inner{
        min-height: 0;
        overflow: hidden;
    }

    :where(html[data-bm-page="index"]) .product-type-inner-content{
        padding: 18px;
        border-top: 1px solid var(--border-subtle);
        background: rgba(10, 17, 31, .18);
    }

    :where(html[data-bm-page="index"]) .product-type-inner-content > .premium-card:last-child{
        margin-bottom: 0;
    }


    @media (max-width: 760px){
        :where(html[data-bm-page="index"]) .product-type-toggle{
            align-items: flex-start;
            flex-wrap: wrap;
            padding: 15px;
            gap: 11px;
        }

        :where(html[data-bm-page="index"]) .product-type-icon{
            width: 40px;
            height: 40px;
            flex-basis: 40px;
            border-radius: 13px;
        }

        :where(html[data-bm-page="index"]) .product-type-main{
            flex: 1 1 calc(100% - 92px);
            padding-top: 1px;
        }

        :where(html[data-bm-page="index"]) .product-type-chevron{
            width: 34px;
            height: 34px;
            flex-basis: 34px;
        }

        :where(html[data-bm-page="index"]) .product-type-stats{
            order: 4;
            width: 100%;
            justify-content: flex-start;
            margin-left: 51px;
        }

        :where(html[data-bm-page="index"]) .product-type-inner-content{
            padding: 14px;
        }

        :where(html[data-bm-page="index"]) .product-type-gift-offer{
            align-items: flex-start;
            margin-inline: 14px;
            width: calc(100% - 28px);
        }

        :where(html[data-bm-page="index"]) .product-type-gift-offer-action{
            align-self: center;
        }
    }

    @media (max-width: 520px){
        :where(html[data-bm-page="index"]) .product-groups-guide{
            padding: 12px 13px;
            font-size: .82rem;
        }

        :where(html[data-bm-page="index"]) .product-type-name{
            font-size: .94rem;
        }

        :where(html[data-bm-page="index"]) .product-type-subtitle{
            font-size: .75rem;
        }

        :where(html[data-bm-page="index"]) .product-type-stats{
            margin-left: 0;
        }

        :where(html[data-bm-page="index"]) .product-type-stat{
            flex: 1 1 auto;
            justify-content: center;
            font-size: .71rem;
            padding-inline: 7px;
        }

        :where(html[data-bm-page="index"]) .product-type-inner-content{
            padding: 11px;
        }

        :where(html[data-bm-page="index"]) .product-type-gift-offer{
            margin: 0 11px 11px;
            width: calc(100% - 22px);
            padding: 11px 12px;
            gap: 10px;
        }

        :where(html[data-bm-page="index"]) .product-type-gift-offer-icon{
            width: 34px;
            height: 34px;
            flex-basis: 34px;
        }

        :where(html[data-bm-page="index"]) .product-type-gift-offer-title{
            font-size: .80rem;
        }

        :where(html[data-bm-page="index"]) .product-type-gift-offer-text{
            font-size: .73rem;
        }

        :where(html[data-bm-page="index"]) .product-type-gift-offer-action{
            display: none;
        }
    }

    /* ==========================================================
       TARJETAS DE PRODUCTO
       ========================================================== */
    :where(html[data-bm-page="index"]) .premium-card{
        position: relative;
        background: linear-gradient(180deg, rgba(34, 45, 66, .96), rgba(28, 39, 60, .98));
        border-radius: var(--radius-card);
        border: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-card);
        margin-bottom: 26px;
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        isolation: isolate;
    }

    :where(html[data-bm-page="index"]) .premium-card::after{
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 34%);
        opacity: .55;
        z-index: -1;
    }

    :where(html[data-bm-page="index"]) .premium-card:hover{
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
        border-color: rgba(82, 103, 255, .28);
    }

    /* Productos atados: visualmente se entienden como un grupo */
    :where(html[data-bm-page="index"]) .premium-card.tied{
        border-left: 0;
    }

    :where(html[data-bm-page="index"]) .premium-card.tied::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 7px;
        background: linear-gradient(180deg, #93a4ff 0%, var(--brand-primary) 45%, #38bdf8 100%);
        box-shadow: 0 0 22px rgba(82,103,255,.45);
        z-index: 2;
    }

    :where(html[data-bm-page="index"]) .premium-card.tied-start{
        margin-bottom: 14px;
    }

    :where(html[data-bm-page="index"]) .premium-card.tied-end{
        margin-top: -4px;
    }

    :where(html[data-bm-page="index"]) .premium-card.tied-start::after{
        background:
            linear-gradient(135deg, rgba(82,103,255,.10), transparent 38%),
            linear-gradient(180deg, rgba(255,255,255,.035), transparent);
    }

    :where(html[data-bm-page="index"]) .premium-card.tied-end::after{
        background:
            linear-gradient(135deg, rgba(56,189,248,.08), transparent 38%),
            linear-gradient(180deg, rgba(255,255,255,.035), transparent);
    }

    :where(html[data-bm-page="index"]) .card-top{
        padding: 20px 24px;
        border-bottom: 1px solid var(--border-subtle);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        background: rgba(28, 39, 60, .72);
    }

    :where(html[data-bm-page="index"]) .product-meta{
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        min-width: 0;
    }

    :where(html[data-bm-page="index"]) .order-badge{
        font-family: 'Roboto Mono', 'Menlo', monospace;
        font-size: .76rem;
        background: rgba(15, 23, 42, .78);
        color: #b9c7df;
        padding: 6px 10px;
        border-radius: 11px;
        font-weight: 800;
        letter-spacing: .035em;
        border: 1px solid var(--border-subtle);
        box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .product-name{
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        font-size: clamp(1rem, 1.55vw, 1.18rem);
        font-weight: 900;
        color: var(--text-primary);
        letter-spacing: -.035em;
        line-height: 1.18;
        min-width: 0;
    }

    :where(html[data-bm-page="index"]) .tied-badge{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(82,103,255,.14);
        border: 1px solid rgba(82,103,255,.24);
        color: #cbd5ff;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: -.01em;
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .tied-badge svg{
        width: 15px;
        height: 15px;
        opacity: .92;
    }

    :where(html[data-bm-page="index"]) .bm-coupon-badge{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(245, 158, 11, .10);
        border: 1px solid rgba(245, 158, 11, .20);
        color: #f8d48a;
        font-size: .76rem;
        font-weight: 850;
        letter-spacing: -.01em;
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-coupon{
        display: inline-flex;
        align-items: center;
        width: fit-content;
        margin-top: 10px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(245, 158, 11, .10);
        border: 1px solid rgba(245, 158, 11, .20);
        color: #f8d48a;
        font-size: .76rem;
        font-weight: 850;
        letter-spacing: -.01em;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-eligibility{
        flex: 1 1 240px;
        min-width: 220px;
        margin: 0;
        padding: 12px 14px;
        border-radius: 15px;
        background: rgba(15, 23, 42, .42);
        border: 1px solid rgba(248, 250, 252, .10);
        box-shadow: 0 10px 22px rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .045) inset;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-eligibility-title{
        display: block;
        margin-bottom: 5px;
        color: #f8d48a;
        font-size: .78rem;
        font-weight: 950;
        line-height: 1.25;
        letter-spacing: -.01em;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-eligibility-copy{
        display: block;
        color: var(--text-secondary);
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.42;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context{
        margin: 0 0 16px;
        padding: 14px 15px;
        border-radius: 16px;
        background: rgba(56, 189, 248, .10);
        border: 1px solid rgba(56, 189, 248, .20);
        color: var(--text-secondary);
        font-size: .9rem;
        line-height: 1.52;
        box-shadow: 0 12px 24px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.04) inset;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context strong{
        color: var(--text-primary);
        font-weight: 900;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context-title{
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        color: #c8f1ff;
        font-size: .86rem;
        font-weight: 950;
        letter-spacing: -.01em;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context-main{
        color: var(--text-primary);
        font-weight: 900;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context-note{
        margin-top: 6px;
        color: var(--text-light);
        font-size: .82rem;
        line-height: 1.45;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context-tutorial{
        width: 100%;
        margin-top: 10px;
        white-space: normal;
        text-align: center;
    }

    :where(html[data-bm-page="index"]) .status-badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: .69rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .08em;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .status-badge.active{
        background: var(--success-soft);
        color: var(--success-text);
        border-color: rgba(57, 182, 111, .18);
    }

    :where(html[data-bm-page="index"]) .status-badge.available{
        background: var(--info-soft);
        color: var(--info-text);
        border-color: rgba(56, 189, 248, .18);
    }

    :where(html[data-bm-page="index"]) .status-badge.pending{
        background: var(--warning-soft);
        color: var(--warning-text);
        border-color: rgba(245, 158, 11, .18);
    }

    :where(html[data-bm-page="index"]) .card-content{
        display: grid;
        grid-template-columns: minmax(300px, 370px) 1fr;
        gap: 0;
    }

    :where(html[data-bm-page="index"]) .device-panel{
        padding: 24px;
        background: rgba(15, 23, 42, .38);
        border-right: 1px solid var(--border-subtle);
        display: flex;
        flex-direction: column;
        min-height: 215px;
    }

    :where(html[data-bm-page="index"]) .actions-panel{
        padding: 24px 26px;
        background: rgba(30, 41, 59, .56);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    :where(html[data-bm-page="index"]) .info-label{
        font-size: .70rem;
        text-transform: uppercase;
        color: var(--text-light);
        font-weight: 900;
        margin-bottom: 11px;
        letter-spacing: .12em;
    }

    :where(html[data-bm-page="index"]) .tied-explainer{
        margin: -4px 0 14px;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(82,103,255,.10);
        border: 1px solid rgba(82,103,255,.18);
        color: var(--text-secondary);
        font-size: .86rem;
        line-height: 1.45;
    }

    :where(html[data-bm-page="index"]) .tied-explainer strong{
        color: var(--text-primary);
        font-weight: 900;
    }

    :where(html[data-bm-page="index"]) .device-box{
        background: rgba(15, 23, 42, .72);
        border: 1px solid var(--border-strong);
        border-radius: 17px;
        padding: 13px 14px 13px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        transition: border-color .2s ease, background .2s ease;
        box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
    }

    :where(html[data-bm-page="index"]) .device-box:hover{
        border-color: rgba(165,180,207,.42);
        background: rgba(15, 23, 42, .88);
    }

    :where(html[data-bm-page="index"]) .mac-address{
        font-family: 'Roboto Mono', Menlo, monospace;
        color: var(--text-primary);
        font-weight: 900;
        font-size: .88rem;
        overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="index"]) .copy-btn{
        width: 37px;
        height: 37px;
        background: rgba(148, 163, 184, .14);
        border: 1px solid rgba(148, 163, 184, .12);
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0;
        border-radius: 11px;
        transition: all .18s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    :where(html[data-bm-page="index"]) .copy-btn:hover{
        background: var(--brand-soft);
        color: var(--brand-primary-hover);
        border-color: var(--brand-border);
        transform: translateY(-1px);
    }

    :where(html[data-bm-page="index"]) .no-device-msg{
        color: var(--text-secondary);
        font-size: .88rem;
        margin-bottom: 16px;
        line-height: 1.55;
    }

    :where(html[data-bm-page="index"]) .actions-grid{
        display: grid;
        grid-template-columns: repeat(2, minmax(170px, 1fr));
        gap: 10px;
        align-items: stretch;
    }

    /* Guía discreta para usuarios que retoman el producto después de un tiempo. */
    :where(html[data-bm-page="index"]) .bm-resume-guide{
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 11px;
        margin: 0 0 17px;
        padding: 11px 12px;
        border: 1px solid var(--border-subtle);
        border-radius: 14px;
        background: rgba(15, 23, 42, .28);
        color: var(--text-secondary);
        box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
    }

    :where(html[data-bm-page="index"]) .bm-resume-guide:hover{
        border-color: rgba(82, 103, 255, .30);
        background: rgba(82, 103, 255, .07);
        color: var(--text-secondary);
    }

    :where(html[data-bm-page="index"]) .bm-resume-guide[aria-disabled="true"]{
        pointer-events: none;
        opacity: .55;
    }

    :where(html[data-bm-page="index"]) .bm-resume-guide-icon{
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(82, 103, 255, .10);
        color: #aeb9ff;
        flex-shrink: 0;
    }

    :where(html[data-bm-page="index"]) .bm-resume-guide-copy{
        min-width: 0;
        font-size: .79rem;
        line-height: 1.42;
    }

    :where(html[data-bm-page="index"]) .bm-resume-guide-copy strong{
        display: block;
        margin-bottom: 2px;
        color: var(--text-primary);
        font-size: .85rem;
        font-weight: 800;
    }

    :where(html[data-bm-page="index"]) .bm-resume-guide-action{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 0 13px;
        border: 1px solid rgba(130, 148, 255, .30);
        border-radius: 10px;
        background: rgba(82, 103, 255, .12);
        color: #d7dcff;
        font-size: .76rem;
        font-weight: 850;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
        transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    }

    :where(html[data-bm-page="index"]) .bm-resume-guide:hover .bm-resume-guide-action{
        background: rgba(82, 103, 255, .20);
        border-color: rgba(130, 148, 255, .46);
        color: #ffffff;
        transform: translateY(-1px);
    }

    :where(html[data-bm-page="index"]) .bm-change-device-modal-copy{
        display: grid;
        gap: 12px;
    }

    :where(html[data-bm-page="index"]) .bm-change-device-warning{
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
        align-items: flex-start;
        padding: 15px;
        border: 1px solid var(--border-subtle);
        border-radius: 15px;
        background: rgba(15, 23, 42, .40);
    }

    :where(html[data-bm-page="index"]) .bm-change-device-warning-icon{
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        background: rgba(82, 103, 255, .11);
        color: #b8c2ff;
    }

    :where(html[data-bm-page="index"]) .bm-change-device-warning.is-policy .bm-change-device-warning-icon{
        background: rgba(245, 158, 11, .10);
        color: var(--warning-text);
    }

    :where(html[data-bm-page="index"]) .bm-change-device-warning strong{
        display: block;
        margin-bottom: 4px;
        color: var(--text-primary);
        font-size: .92rem;
        font-weight: 850;
    }

    :where(html[data-bm-page="index"]) .bm-change-device-warning p{
        margin: 0;
        color: var(--text-secondary);
        font-size: .88rem;
        line-height: 1.55;
    }

    /* Pie exclusivo del modal de cambio de computadora.
       Aísla los botones de los tamaños y márgenes globales de .btn-pro-warning. */
    :where(html[data-bm-page="index"]) .modal-content.dark-theme .bm-change-device-modal-footer{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
        padding: 16px;
    }

    :where(html[data-bm-page="index"]) .modal-content.dark-theme .bm-change-device-modal-footer > button{
        width: 100% !important;
        min-width: 0;
        min-height: 42px;
        height: 42px;
        margin: 0 !important;
        padding: 0 16px;
        border-radius: var(--radius-btn);
        font-size: .84rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .modal-content.dark-theme .bm-change-device-modal-footer .main-btn.light-btn,
:where(html[data-bm-page="index"]) .modal-content.dark-theme .bm-change-device-modal-footer .btn-pro-warning{
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    :where(html[data-bm-page="index"]) .actions-grid .bm-gestor-repair-action{
        width: 100%;
        min-width: 0;
        min-height: 40px;
        height: auto;
        margin-top: 0 !important;
        padding-top: 8px;
        padding-bottom: 8px;
        white-space: normal;
        line-height: 1.18;
        text-align: center;
    }

    :where(html[data-bm-page="index"]) .actions-grid .bm-gestor-repair-action.btn-pro-disabled{
        opacity: .68;
        transform: none;
        box-shadow: none;
    }


    /* Gestor Emocional con varias computadoras: primero se elige el equipo. */
    :where(html[data-bm-page="index"]) .bm-gestor-multi-actions-panel{
        min-height: 0;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-actions-empty[hidden],
:where(html[data-bm-page="index"]) .bm-gestor-actions-content[hidden],
:where(html[data-bm-page="index"]) .bm-gestor-machine-actions[hidden]{
        display: none !important;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-actions-empty{
        width: 100%;
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 24px;
        text-align: center;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-actions-empty-inner{
        width: 100%;
        max-width: 470px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-actions-empty-icon{
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        border: 1px solid rgba(82, 103, 255, .20);
        border-radius: 15px;
        background: rgba(82, 103, 255, .09);
        color: var(--brand-primary);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-actions-empty-title{
        margin: 0;
        color: var(--text-primary);
        font-size: 1.03rem;
        font-weight: 900;
        line-height: 1.3;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-actions-empty-copy{
        max-width: 440px;
        margin: 8px 0 0;
        color: var(--text-secondary);
        font-size: .82rem;
        line-height: 1.55;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-actions-content{
        width: 100%;
        animation: bm-8db51ad1c3-bmGestorActionsIn .18s ease-out;
    }

    @keyframes bm-8db51ad1c3-bmGestorActionsIn {
        from { opacity: 0; transform: translateY(3px); }
        to { opacity: 1; transform: translateY(0); }
    }

    :where(html[data-bm-page="index"]) .btn-pro{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 16px;
        border-radius: var(--radius-btn);
        font-weight: 850;
        font-size: .84rem;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
        cursor: pointer;
        border: 1px solid transparent;
        white-space: nowrap;
        gap: 8px;
        line-height: 1.15;
    }

    :where(html[data-bm-page="index"]) .btn-pro-primary{
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
        color: white;
        box-shadow: 0 14px 28px rgba(82, 103, 255, .18), 0 1px 0 rgba(255,255,255,.10) inset;
    }

    :where(html[data-bm-page="index"]) .btn-pro-primary:hover{
        background: linear-gradient(135deg, var(--brand-primary-hover), var(--brand-primary));
        transform: translateY(-1px);
        box-shadow: 0 18px 36px rgba(82, 103, 255, .24);
        color: white;
    }

    :where(html[data-bm-page="index"]) .btn-pro-secondary{
        background: rgba(15, 23, 42, .20);
        border-color: var(--border-strong);
        color: var(--text-secondary);
        box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
    }

    :where(html[data-bm-page="index"]) .btn-pro-secondary:hover{
        border-color: rgba(165,180,207,.42);
        background: rgba(51, 65, 85, .54);
        color: var(--text-primary);
        transform: translateY(-1px);
    }

    :where(html[data-bm-page="index"]) .btn-pro-accent{
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
        color: white;
        width: 100%;
        font-size: .89rem;
        box-shadow: 0 13px 26px rgba(82, 103, 255, .20);
    }

    :where(html[data-bm-page="index"]) .btn-pro-accent:hover{
        background: linear-gradient(135deg, var(--brand-primary-hover), var(--brand-primary));
        box-shadow: 0 18px 36px rgba(82, 103, 255, .26);
        transform: translateY(-1px);
        color: white;
    }

    :where(html[data-bm-page="index"]) .btn-pro-warning{
        background: linear-gradient(135deg, #f8b64c, var(--action-warning));
        color: #111827;
        width: 100%;
        margin-top: 14px;
        font-weight: 900;
        box-shadow: 0 16px 30px rgba(245, 158, 11, .18), 0 1px 0 rgba(255,255,255,.22) inset;
    }

    :where(html[data-bm-page="index"]) .btn-pro-warning:hover{
        background: linear-gradient(135deg, #ffc766, var(--action-warning-hover));
        transform: translateY(-1px);
        color: #111827;
    }

    :where(html[data-bm-page="index"]) .btn-pro-disabled{
        width: 100%;
        margin-top: 16px;
        background: rgba(51, 65, 85, .55);
        color: var(--text-light);
        border: 1px solid var(--border-subtle);
        cursor: not-allowed;
        font-weight: 800;
    }

    :where(html[data-bm-page="index"]) .tooltip-wrap{
        position: relative;
        width: 100%;
    }

    :where(html[data-bm-page="index"]) .tooltip-box{
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        background: #f8fafc;
        color: #0f172a;
        padding: 11px 14px;
        border-radius: 12px;
        font-size: .84rem;
        opacity: 0;
        visibility: hidden;
        transition: .18s ease;
        pointer-events: none;
        font-weight: 750;
        box-shadow: 0 18px 42px rgba(0,0,0,.36);
        z-index: 10;
    }

    :where(html[data-bm-page="index"]) .tooltip-box::after{
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 7px 7px 0 7px;
        border-style: solid;
        border-color: #f8fafc transparent transparent transparent;
    }

    :where(html[data-bm-page="index"]) .tooltip-wrap:hover .tooltip-box,
:where(html[data-bm-page="index"]) .tooltip-wrap:focus-within .tooltip-box{
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-change-tooltip .btn-pro-disabled{
        cursor: help;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-change-tooltip .tooltip-box{
        width: max-content;
        max-width: min(290px, calc(100vw - 40px));
        white-space: normal;
        text-align: center;
        line-height: 1.4;
    }

    /* ==========================================================
       BANNER DE ACTUALIZACIÓN
       ========================================================== */
    :where(html[data-bm-page="index"]) .update-banner{
        margin: 0;
        padding: 19px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 22px;
        border-bottom: 1px solid var(--border-subtle);
        position: relative;
        overflow: hidden;
        animation: bm-8db51ad1c3-slideDownFade .45s ease-out forwards;
    }

    :where(html[data-bm-page="index"]) .update-banner::before{
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(255,255,255,.052), transparent 44%),
            linear-gradient(135deg, rgba(0,0,0,.06), transparent 55%);
        pointer-events: none;
    }

    :where(html[data-bm-page="index"]) .update-banner-content{
        display: flex;
        align-items: center;
        gap: 18px;
        position: relative;
        z-index: 1;
        min-width: 0;
    }

    :where(html[data-bm-page="index"]) .update-icon-wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 17px;
        flex-shrink: 0;
        box-shadow: 0 14px 28px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.15) inset;
    }

    :where(html[data-bm-page="index"]) .update-text{
        font-size: .90rem;
        line-height: 1.55;
        color: var(--text-primary);
        max-width: 800px;
    }

    :where(html[data-bm-page="index"]) .update-text strong{
        font-weight: 900;
        letter-spacing: -.01em;
    }

    :where(html[data-bm-page="index"]) .update-text code{
        background: rgba(15, 23, 42, .55);
        padding: 4px 8px;
        border-radius: 8px;
        font-family: 'Roboto Mono', Menlo, monospace;
        color: #fff;
        border: 1px solid rgba(255,255,255,.08);
        font-size: .88rem;
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .update-note{
        margin-top: 8px;
        font-size: .86rem;
        color: rgba(248,250,252,.68);
        display: flex;
        align-items: center;
        gap: 7px;
    }

    :where(html[data-bm-page="index"]) .update-banner-info{
        background: linear-gradient(90deg, rgba(82, 103, 255, .18), rgba(82,103,255,.07));
        border-left: 7px solid var(--brand-primary);
    }

    :where(html[data-bm-page="index"]) .update-banner-info .update-icon-wrapper{
        background: linear-gradient(135deg, #5267ff 0%, #7c8cff 100%);
    }

    :where(html[data-bm-page="index"]) .update-banner-warning{
        background: linear-gradient(90deg, rgba(245, 158, 11, .18), rgba(245,158,11,.07));
        border-left: 7px solid var(--warning-text);
    }

    :where(html[data-bm-page="index"]) .update-banner-warning .update-icon-wrapper{
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    }

    :where(html[data-bm-page="index"]) .update-banner-danger{
        background: linear-gradient(90deg, rgba(255, 95, 87, .20), rgba(255,95,87,.08));
        border-left: 7px solid var(--danger-text);
    }

    :where(html[data-bm-page="index"]) .update-banner-danger .update-icon-wrapper{
        background: linear-gradient(135deg, #ef4444 0%, #fb7a72 100%);
    }

    :where(html[data-bm-page="index"]) .btn-update-action{
        background: #f8fafc;
        color: #dc2626;
        border: none;
        padding: 0 24px;
        min-height: 42px;
        border-radius: 14px;
        font-weight: 900;
        font-size: .84rem;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all .22s ease;
        box-shadow: 0 18px 36px rgba(0,0,0,.22);
        white-space: nowrap;
        position: relative;
        z-index: 1;
        text-decoration: none;
    }

    :where(html[data-bm-page="index"]) .btn-update-action:hover{
        transform: translateY(-2px);
        box-shadow: 0 24px 46px rgba(0,0,0,.30);
        background: #ffffff;
    }

    :where(html[data-bm-page="index"]) .update-banner-info .btn-update-action{ color: var(--brand-primary); }
    :where(html[data-bm-page="index"]) .update-banner-warning .btn-update-action{ color: #d97706; }
    :where(html[data-bm-page="index"]) .update-banner-danger .btn-update-action{ color: #dc2626; }

    /* ==========================================================
       MODALES Y POPUP DE TUTORIALES
       ========================================================== */
    :where(html[data-bm-page="index"]) #tutorialOverlay{
        backdrop-filter: blur(8px);
    }

    :where(html[data-bm-page="index"]) #tutorialSubOptions{
        background: linear-gradient(180deg, rgba(30,41,59,.98), rgba(20,29,48,.98)) !important;
        border: 1px solid var(--border-subtle) !important;
        box-shadow: 0 28px 80px rgba(0,0,0,.46) !important;
    }

    :where(html[data-bm-page="index"]) .tutorial-choice{
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        padding: 16px;
        border: 1px solid var(--border-subtle);
        border-radius: 14px;
        transition: all .18s ease;
        color: var(--text-primary);
        background: rgba(15, 23, 42, .18);
    }

    :where(html[data-bm-page="index"]) .tutorial-choice:hover{
        border-color: var(--brand-border);
        background: rgba(82,103,255,.10);
        transform: translateY(-1px);
    }

    :where(html[data-bm-page="index"]) .tutorial-choice input{
        accent-color: var(--brand-primary);
        transform: scale(1.16);
    }

    :where(html[data-bm-page="index"]) .modal-content.dark-theme{
        background: linear-gradient(180deg, rgba(30,41,59,.98), rgba(20,29,48,.98));
        border: 1px solid var(--border-subtle);
        color: var(--text-primary);
        border-radius: 20px;
        box-shadow: 0 28px 80px rgba(0,0,0,.46);
        overflow: hidden;
    }

    :where(html[data-bm-page="index"]) .modal-content.dark-theme .modal-header{
        border-bottom: 1px solid var(--border-subtle);
        background: rgba(15,23,42,.22);
    }

    :where(html[data-bm-page="index"]) .modal-content.dark-theme .modal-footer{
        border-top: 1px solid var(--border-subtle);
        background: rgba(15,23,42,.16);
    }

    :where(html[data-bm-page="index"]) .modal-content.dark-theme .btn-close{
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    :where(html[data-bm-page="index"]) .card-style{
        background: rgba(15, 23, 42, .30);
        border: 1px solid var(--border-subtle);
        border-radius: 18px;
        color: var(--text-primary);
        padding: 18px;
    }

    :where(html[data-bm-page="index"]) .alert{
        border-radius: 14px;
        border: 1px solid var(--border-subtle);
    }

    :where(html[data-bm-page="index"]) .main-btn.light-btn,
:where(html[data-bm-page="index"]) .modal-footer .main-btn.light-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 18px;
        border-radius: 12px;
        background: rgba(248,250,252,.92);
        color: #0f172a;
        font-weight: 850;
        border: 0;
    }

    /* Fix de capas Bootstrap:
       garantiza que el fondo transparente del modal quede detrás del contenido. */
    :where(html[data-bm-page="index"]) .modal{
        z-index: 1060 !important;
    }

    :where(html[data-bm-page="index"]) .modal-backdrop{
        z-index: 1050 !important;
    }

    /* ==========================================================
       ESTADO VACÍO Y UTILIDADES
       ========================================================== */
    :where(html[data-bm-page="index"]) #productsList{
        position: relative;
    }

    :where(html[data-bm-page="index"]) #productsList > div[style*="text-align:center"]{
        background: linear-gradient(180deg, rgba(30,41,59,.88), rgba(22,32,52,.92)) !important;
        border: 1px dashed var(--border-strong) !important;
        box-shadow: var(--shadow-card);
    }

    /* ==========================================================
       OFERTA DE UPGRADE ARR V3 REGALO -> ARR V4
       ========================================================== */
    :where(html[data-bm-page="index"]) .bm-upgrade-status{
        margin: -12px 0 26px;
        padding: 16px 18px;
        border-radius: 16px;
        border: 1px solid var(--border-subtle);
        font-weight: 800;
        box-shadow: 0 14px 34px rgba(0,0,0,.20);
    }

    :where(html[data-bm-page="index"]) .bm-upgrade-status-success{
        background: var(--success-soft);
        color: var(--success-text);
        border-color: rgba(57, 182, 111, .24);
    }

    :where(html[data-bm-page="index"]) .bm-upgrade-status-warning{
        background: var(--warning-soft);
        color: var(--warning-text);
        border-color: rgba(245, 158, 11, .24);
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-box{
        margin-bottom: 16px;
        padding: 14px;
        border-radius: 18px;
        background:
            linear-gradient(135deg, rgba(245, 158, 11, .24), rgba(82, 103, 255, .10)),
            rgba(15, 23, 42, .30);
        border: 1px solid rgba(245, 158, 11, .34);
        box-shadow: 0 16px 32px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.06) inset;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-title{
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-primary);
        font-weight: 950;
        font-size: .98rem;
        letter-spacing: -.02em;
        margin-bottom: 6px;
        line-height: 1.22;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-copy{
        color: var(--text-secondary);
        font-size: .84rem;
        line-height: 1.42;
        margin-bottom: 10px;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-subtle-note{
        margin-top: -4px;
        margin-bottom: 10px;
        color: var(--text-light);
        font-size: .78rem;
        line-height: 1.38;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-offer-row{
        display: flex;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 10px;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-price{
        flex: 1.15 1 220px;
        min-width: 205px;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "old pill"
            "new new";
        align-items: center;
        column-gap: 8px;
        row-gap: 2px;
        margin: 0;
        padding: 10px 12px;
        border-radius: 15px;
        background: linear-gradient(135deg, rgba(248, 250, 252, .14), rgba(248, 250, 252, .06));
        border: 1px solid rgba(248, 250, 252, .14);
        box-shadow: 0 10px 20px rgba(0,0,0,.13), 0 1px 0 rgba(255,255,255,.05) inset;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-price-old{
        grid-area: old;
        color: rgba(248, 250, 252, .62);
        font-weight: 850;
        font-size: .84rem;
        text-decoration: line-through;
        text-decoration-thickness: 2px;
        text-decoration-color: rgba(248, 250, 252, .68);
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-price-new{
        grid-area: new;
        color: #ffffff;
        font-size: clamp(1.78rem, 4vw, 2.32rem);
        font-weight: 1000;
        letter-spacing: -.06em;
        line-height: 1;
        text-shadow: 0 10px 26px rgba(245, 158, 11, .24);
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-pill{
        grid-area: pill;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 3px 9px;
        border-radius: 999px;
        background: #f8fafc;
        color: #111827;
        font-size: .74rem;
        font-weight: 1000;
        box-shadow: 0 8px 18px rgba(0,0,0,.16);
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-coupon{
        display: inline-flex;
        align-items: center;
        width: fit-content;
        margin: 0 0 9px;
        padding: 4px 9px;
        border-radius: 999px;
        background: rgba(245, 158, 11, .10);
        border: 1px solid rgba(245, 158, 11, .20);
        color: #f8d48a;
        font-size: .72rem;
        font-weight: 850;
        letter-spacing: -.01em;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-button{
        width: 100%;
        min-height: 44px;
        border: 0;
        border-radius: 14px;
        background: linear-gradient(135deg, #f8b64c, #f59e0b);
        color: #111827;
        font-weight: 1000;
        cursor: pointer;
        box-shadow: 0 14px 26px rgba(245, 158, 11, .20), 0 1px 0 rgba(255,255,255,.22) inset;
        transition: transform .18s ease, filter .18s ease;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-button:hover{
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-compare-button{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 38px;
        margin-top: 8px;
        padding: 8px 12px;
        border-radius: 13px;
        background: rgba(248, 250, 252, .08);
        border: 1px solid rgba(248, 250, 252, .15);
        color: #dbeafe;
        font-size: .84rem;
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
        transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }

    :where(html[data-bm-page="index"]) .bm-gift-upgrade-compare-button:hover{
        transform: translateY(-1px);
        background: rgba(82, 103, 255, .16);
        border-color: rgba(130, 148, 255, .34);
        color: #ffffff;
    }

    /* ==========================================================
       RESPONSIVE
       ========================================================== */
    @media (max-width: 1080px){
        :where(html[data-bm-page="index"]) .card-content{
            grid-template-columns: 1fr;
        }

        :where(html[data-bm-page="index"]) .device-panel{
            border-right: none;
            border-bottom: 1px solid var(--border-subtle);
            min-height: auto;
        }

        :where(html[data-bm-page="index"]) .actions-panel{
            padding: 24px;
        }

        :where(html[data-bm-page="index"]) .actions-grid{
            grid-template-columns: repeat(2, minmax(190px, 1fr));
        }

        :where(html[data-bm-page="index"]) .btn-pro-warning,
:where(html[data-bm-page="index"]) .btn-pro-disabled{
            width: auto;
            display: inline-flex;
        }
    }

    @media (max-width: 820px){
        :where(html[data-bm-page="index"]) .dashboard-container{
            padding: 24px 14px 82px;
        }

        :where(html[data-bm-page="index"]) .header-section{
            flex-direction: column;
            align-items: flex-start;
            gap: 18px;
            margin-bottom: 28px;
        }

        :where(html[data-bm-page="index"]) .kpi-row{
            width: 100%;
            justify-content: flex-start;
        }

        :where(html[data-bm-page="index"]) .kpi-pill{
            flex: 1 1 180px;
            justify-content: center;
        }


        :where(html[data-bm-page="index"]) .card-top{
            flex-direction: column;
            align-items: flex-start;
            padding: 20px;
        }

        :where(html[data-bm-page="index"]) .product-meta{
            width: 100%;
            align-items: flex-start;
        }

        :where(html[data-bm-page="index"]) .device-panel,
:where(html[data-bm-page="index"]) .actions-panel{
            padding: 20px;
        }

        :where(html[data-bm-page="index"]) .actions-grid{
            grid-template-columns: 1fr;
        }
        :where(html[data-bm-page="index"]) .bm-resume-guide{
            grid-template-columns: 34px minmax(0, 1fr);
        }

        :where(html[data-bm-page="index"]) .bm-resume-guide-action{
            grid-column: 2;
            justify-self: start;
        }

        :where(html[data-bm-page="index"]) .btn-pro{
            width: 100%;
            white-space: normal;
            text-align: center;
        }

        :where(html[data-bm-page="index"]) .btn-pro-warning,
:where(html[data-bm-page="index"]) .btn-pro-disabled{
            width: 100%;
        }

        :where(html[data-bm-page="index"]) .bm-gift-upgrade-offer-row{
            flex-direction: column;
        }

        :where(html[data-bm-page="index"]) .bm-gift-upgrade-price,
:where(html[data-bm-page="index"]) .bm-gift-upgrade-eligibility{
            min-width: 0;
            width: 100%;
        }

        :where(html[data-bm-page="index"]) .update-banner{
            flex-direction: column;
            align-items: stretch;
            padding: 20px;
        }

        :where(html[data-bm-page="index"]) .update-banner-content{
            align-items: flex-start;
        }

        :where(html[data-bm-page="index"]) .update-action .btn-update-action{
            width: 100%;
            justify-content: center;
        }

        :where(html[data-bm-page="index"]) .tooltip-box{
            left: 0;
            right: 0;
            transform: translateY(4px);
            width: auto !important;
            max-width: none !important;
        }

        :where(html[data-bm-page="index"]) .tooltip-wrap:hover .tooltip-box{
            transform: translateY(0);
        }

        :where(html[data-bm-page="index"]) .tooltip-box::after{
            left: 22px;
            transform: none;
        }
    }

    @media (max-width: 520px){
        :where(html[data-bm-page="index"]) .modal-content.dark-theme .bm-change-device-modal-footer{
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            padding: 14px;
        }

        :where(html[data-bm-page="index"]) .modal-content.dark-theme .bm-change-device-modal-footer > button{
            min-height: 44px;
            height: 44px;
            padding-left: 8px;
            padding-right: 8px;
            font-size: .78rem;
        }

        :where(html[data-bm-page="index"]) .page-title h2{
            font-size: 2rem;
        }

        :where(html[data-bm-page="index"]) .page-subtitle{
            font-size: .98rem;
        }

        :where(html[data-bm-page="index"]) .kpi-row{
            gap: 10px;
        }

        :where(html[data-bm-page="index"]) .kpi-pill{
            flex: 1 1 100%;
        }


        :where(html[data-bm-page="index"]) .product-name{
            width: 100%;
        }

        :where(html[data-bm-page="index"]) .order-badge{
            font-size: .78rem;
        }

        :where(html[data-bm-page="index"]) .bm-arr-gift-context{
        margin: 0 0 16px;
        padding: 14px 15px;
        border-radius: 16px;
        background: rgba(56, 189, 248, .10);
        border: 1px solid rgba(56, 189, 248, .20);
        color: var(--text-secondary);
        font-size: .9rem;
        line-height: 1.52;
        box-shadow: 0 12px 24px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.04) inset;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context strong{
        color: var(--text-primary);
        font-weight: 900;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context-title{
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        color: #c8f1ff;
        font-size: .86rem;
        font-weight: 950;
        letter-spacing: -.01em;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context-main{
        color: var(--text-primary);
        font-weight: 900;
    }

    :where(html[data-bm-page="index"]) .bm-arr-gift-context-note{
        margin-top: 6px;
        color: var(--text-light);
        font-size: .82rem;
        line-height: 1.45;
    }

    :where(html[data-bm-page="index"]) .status-badge{
            min-height: 34px;
        }

        :where(html[data-bm-page="index"]) .update-icon-wrapper{
            width: 48px;
            height: 48px;
        }

        :where(html[data-bm-page="index"]) .update-text{
            font-size: .91rem;
        }
    }


    /* Animations */
    @keyframes bm-8db51ad1c3-slideDownFade {
        from {
            opacity: 0;
            transform: translateY(-12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }






    /* Nombre amigable de la computadora: compacto y sin alterar el resto de la tarjeta. */
    :where(html[data-bm-page="index"]) .bm-computer-name-flash{
        margin: 0 0 18px;
        padding: 12px 15px;
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        font-size: .9rem;
        font-weight: 700;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-flash.success{
        background: var(--success-soft);
        color: var(--success-text);
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-flash.error{
        background: var(--danger-soft);
        color: var(--danger-text);
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-panel{
        margin-bottom: 12px;
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        background: var(--surface-hover);
        overflow: hidden;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-summary{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 11px 12px;
        cursor: pointer;
        list-style: none;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-summary::-webkit-details-marker{
        display: none;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-copy{
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-copy span{
        color: var(--text-light);
        font-size: .7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-copy strong{
        overflow: hidden;
        color: var(--text-primary);
        font-size: .91rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-edit-label{
        flex-shrink: 0;
        color: var(--brand-primary);
        font-size: .75rem;
        font-weight: 900;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-form{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 0 12px 12px;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-form input{
        width: 100%;
        min-height: 40px;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background: var(--surface-white);
        color: var(--text-primary);
        padding: 9px 11px;
        font: inherit;
        font-size: .84rem;
        outline: none;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-form input:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px rgba(82, 103, 255, .12);
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-save{
        min-height: 40px;
        border: 1px solid var(--brand-primary);
        border-radius: 10px;
        background: var(--brand-primary);
        color: #fff;
        padding: 9px 13px;
        font-size: .78rem;
        font-weight: 900;
        cursor: pointer;
    }

    :where(html[data-bm-page="index"]) .bm-computer-name-help{
        grid-column: 1 / -1;
        margin: -1px 0 0;
        color: var(--text-light);
        font-size: .71rem;
        line-height: 1.4;
    }

    @media (max-width: 560px){
        :where(html[data-bm-page="index"]) .bm-computer-name-form{
            grid-template-columns: 1fr;
        }

        :where(html[data-bm-page="index"]) .bm-computer-name-save{
            width: 100%;
        }
    }


    /* Gestor Emocional: selector y alta de computadoras desde index.php */
    :where(html[data-bm-page="index"]) .bm-gestor-selector-bar{
        width: 100%;
        display: grid;
        grid-template-columns: minmax(220px, .85fr) minmax(320px, 1.35fr);
        align-items: center;
        gap: 22px;
        padding: 17px 24px;
        border-bottom: 1px solid var(--border-subtle);
        background: rgba(24, 35, 55, .78);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-selector-bar .bm-gestor-machine-heading{
        margin: 0;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-selector-bar .bm-gestor-machine-label{
        font-size: .9rem;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-content[hidden]{
        display: none !important;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-content{
        animation: bm-8db51ad1c3-bmGestorSelectedMachineIn .18s ease-out;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-card-footer{
        width: 100%;
        padding: 16px 24px;
        border-top: 1px solid var(--border-subtle);
        background: rgba(28, 39, 60, .72);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-card-footer .bm-gestor-add-computer-form{
        margin: 0;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-feedback{
        display: flex;
        align-items: flex-start;
        gap: 11px;
        margin: 0 0 12px;
        padding: 12px 14px;
        border: 1px solid rgba(255, 95, 87, .28);
        border-radius: 13px;
        background: rgba(255, 95, 87, .10);
        color: var(--danger-text);
        font-size: .82rem;
        font-weight: 700;
        line-height: 1.45;
        box-shadow: 0 10px 22px rgba(0, 0, 0, .12), 0 1px 0 rgba(255,255,255,.035) inset;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-feedback svg{
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        margin-top: 1px;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-feedback strong{
        display: block;
        margin-bottom: 2px;
        color: #ff9a92;
        font-size: .84rem;
        font-weight: 900;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-notice{
        margin: 0 0 12px;
        padding: 12px 14px;
        border: 1px solid rgba(245, 158, 11, .32);
        border-radius: 13px;
        background: rgba(245, 158, 11, .09);
        color: #e6cf9f;
        font-size: .79rem;
        font-weight: 650;
        line-height: 1.48;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-notice strong{
        display: block;
        margin-bottom: 2px;
        color: #f8d48a;
        font-size: .83rem;
        font-weight: 900;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-card-footer .bm-gestor-add-button{
        min-height: 58px;
        border-radius: 13px;
        background: rgba(82, 103, 255, .08);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-manager{
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-heading{
        margin-bottom: 11px;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-label{
        display: block;
        margin: 0;
        color: var(--text-primary);
        font-size: .84rem;
        font-weight: 850;
        line-height: 1.3;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-hint{
        display: block;
        margin-top: 3px;
        color: var(--text-light);
        font-size: .71rem;
        line-height: 1.4;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-select-wrap{
        position: relative;
        width: 100%;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-select{
        width: 100%;
        min-height: 50px;
        appearance: none;
        -webkit-appearance: none;
        padding: 11px 50px 11px 14px;
        border: 1px solid var(--border-strong);
        border-radius: 12px;
        background: var(--surface-white);
        color: var(--text-primary);
        font: inherit;
        font-size: .84rem;
        font-weight: 750;
        line-height: 1.3;
        cursor: pointer;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-select:hover{
        border-color: rgba(82, 103, 255, .48);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-select:focus{
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 4px rgba(82, 103, 255, .13);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-select-arrow{
        position: absolute;
        top: 50%;
        right: 15px;
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: rgba(82, 103, 255, .10);
        color: var(--brand-primary);
        pointer-events: none;
        transform: translateY(-50%);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-selected-machine[hidden]{
        display: none !important;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-selected-machine{
        margin-top: 14px;
        animation: bm-8db51ad1c3-bmGestorSelectedMachineIn .18s ease-out;
    }

    @keyframes bm-8db51ad1c3-bmGestorSelectedMachineIn {
        from { opacity: 0; transform: translateY(-3px); }
        to { opacity: 1; transform: translateY(0); }
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-actions{
        width: 100%;
        margin-top: 14px;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-machine-actions .btn-pro{
        width: 100%;
        min-width: 0;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        text-align: center;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-computer-form{
        width: 100%;
        margin: 0;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button{
        width: 100%;
        min-height: 56px;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 10px;
        border: 1px solid rgba(82, 103, 255, .20);
        border-radius: 14px;
        background: rgba(82, 103, 255, .06);
        color: var(--text-primary);
        padding: 10px 12px;
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button:hover{
        transform: translateY(-1px);
        border-color: rgba(82, 103, 255, .42);
        background: rgba(82, 103, 255, .10);
        box-shadow: 0 9px 20px rgba(82, 103, 255, .10);
    }


    :where(html[data-bm-page="index"]) .bm-gestor-add-button.is-limit-reached,
:where(html[data-bm-page="index"]) .bm-gestor-add-button.is-version-required{
        background: linear-gradient(180deg, rgba(77, 54, 22, .92), rgba(51, 38, 22, .96));
        border-color: rgba(245, 158, 11, .42);
        color: #f8d48a;
        box-shadow: 0 12px 26px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.04) inset;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button.is-limit-reached:hover,
:where(html[data-bm-page="index"]) .bm-gestor-add-button.is-version-required:hover{
        transform: none;
        border-color: rgba(245, 158, 11, .62);
        box-shadow: 0 14px 30px rgba(0,0,0,.24), 0 0 0 3px rgba(245,158,11,.08);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button.is-limit-reached .bm-gestor-add-button-icon,
:where(html[data-bm-page="index"]) .bm-gestor-add-button.is-version-required .bm-gestor-add-button-icon{
        background: rgba(245, 158, 11, .15);
        border-color: rgba(245, 158, 11, .30);
        color: #fbbf24;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button.is-limit-reached .bm-gestor-add-button-copy small,
:where(html[data-bm-page="index"]) .bm-gestor-add-button.is-version-required .bm-gestor-add-button-copy small{
        color: #d8c29b;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button:focus-visible{
        outline: none;
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 4px rgba(82, 103, 255, .14);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button-icon{
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--brand-primary);
        color: #fff;
        box-shadow: 0 7px 16px rgba(82, 103, 255, .20);
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button-copy{
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button-copy strong{
        color: var(--text-primary);
        font-size: .82rem;
        font-weight: 850;
        line-height: 1.25;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button-copy small{
        color: var(--text-light);
        font-size: .68rem;
        font-weight: 650;
        line-height: 1.3;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-button-chevron{
        color: var(--brand-primary);
        justify-self: end;
    }

    :where(html[data-bm-page="index"]) .bm-gestor-add-spacing{ margin-top: 12px; }

    @media (max-width: 760px){
        :where(html[data-bm-page="index"]) .bm-gestor-selector-bar{
            grid-template-columns: 1fr;
            gap: 11px;
            padding: 15px 16px;
        }

        :where(html[data-bm-page="index"]) .bm-gestor-card-footer{
            padding: 14px 16px;
        }
        :where(html[data-bm-page="index"]) .bm-gestor-machine-manager{
            padding: 0;
        }

        :where(html[data-bm-page="index"]) .bm-gestor-machine-select{
            min-height: 48px;
            padding-left: 12px;
            font-size: .8rem;
        }

        :where(html[data-bm-page="index"]) .bm-gestor-add-button{
            min-height: 56px;
            grid-template-columns: 36px minmax(0, 1fr) 20px;
            padding: 9px 10px;
        }

        :where(html[data-bm-page="index"]) .bm-gestor-add-button-icon{
            width: 36px;
            height: 36px;
        }
    }

    @media (max-width: 420px){
        :where(html[data-bm-page="index"]) .bm-gestor-add-button-copy small{
            display: none;
        }

        :where(html[data-bm-page="index"]) .bm-gestor-selected-name-actions{
            gap: 5px;
        }


        :where(html[data-bm-page="index"]) .bm-gestor-machine-heading{
            margin-bottom: 10px;
        }

        :where(html[data-bm-page="index"]) .bm-gestor-add-button{
            min-height: 52px;
        }
    }

    @media (max-width: 340px){
        :where(html[data-bm-page="index"]) .modal-content.dark-theme .bm-change-device-modal-footer{
            grid-template-columns: 1fr;
        }

        :where(html[data-bm-page="index"]) .modal-content.dark-theme .bm-change-device-modal-footer > button{
            width: 100% !important;
        }
    }

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:1826, instructor.php:12020, instructornuevo.php:1653 */
/* =========================================================
   BM INSTRUCTOR PRUEBA · DARK MODE MODERNO
   Solo capa visual: no cambia IDs, names, formularios, PHP ni JS.
   ========================================================= */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):root{
  --bm-bg-0:#050816;
  --bm-bg-1:#08111f;
  --bm-bg-2:#0d1728;
  --bm-bg-3:#111f34;
  --bm-bg-4:#162840;
  --bm-card:rgba(15, 23, 42, .92);
  --bm-card-2:rgba(17, 31, 52, .94);
  --bm-card-3:rgba(30, 41, 59, .72);
  --bm-border:rgba(148, 163, 184, .20);
  --bm-border-2:rgba(148, 163, 184, .34);
  --bm-text:#eef6ff;
  --bm-text-2:#dbeafe;
  --bm-muted:#9fb0c8;
  --bm-muted-2:#718096;
  --bm-primary:#38bdf8;
  --bm-primary-2:#2563eb;
  --bm-primary-3:#0ea5e9;
  --bm-success:#34d399;
  --bm-success-2:#10b981;
  --bm-warning:#fbbf24;
  --bm-danger:#fb7185;
  --bm-danger-2:#ef4444;
  --bm-info:#60a5fa;
  --bm-purple:#a78bfa;
  --bm-shadow:0 22px 70px rgba(0,0,0,.42);
  --bm-shadow-soft:0 14px 36px rgba(0,0,0,.25);
  --bm-radius-xl:22px;
  --bm-radius-lg:18px;
  --bm-radius-md:14px;
  --bm-radius-sm:10px;
  --bm-input-h:44px;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):is(html),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body{
  min-height:100%;
  background:
    radial-gradient(circle at 12% 0%, rgba(56,189,248,.18), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(167,139,250,.16), transparent 32%),
    linear-gradient(135deg, var(--bm-bg-0) 0%, var(--bm-bg-1) 44%, #020617 100%) !important;
  color:var(--bm-text) !important;
  color-scheme:dark;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .container-fluid{
  color:var(--bm-text) !important;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body{
  scrollbar-color:rgba(56,189,248,.55) rgba(15,23,42,.86);
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) ::-webkit-scrollbar{ width:12px; height:12px; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) ::-webkit-scrollbar-track{ background:rgba(15,23,42,.92); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(56,189,248,.72), rgba(37,99,235,.72));
  border:3px solid rgba(15,23,42,.92);
  border-radius:999px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, rgba(56,189,248,.95), rgba(37,99,235,.95)); }

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 16%, rgba(14,165,233,.12), transparent 28%),
    radial-gradient(circle at 92% 36%, rgba(168,85,247,.10), transparent 34%),
    transparent !important;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section{ padding:24px 0 38px; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .container-fluid{ max-width:1740px; }

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 20px !important;
  font-weight:850;
  letter-spacing:-.04em;
  font-size:clamp(1.65rem, 1.15rem + 1.6vw, 2.45rem);
  color:var(--bm-text) !important;
  text-shadow:0 10px 35px rgba(56,189,248,.12);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading::before{
  content:"";
  width:14px;
  height:38px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--bm-primary), var(--bm-primary-2));
  box-shadow:0 0 26px rgba(56,189,248,.42);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading::after{
  content:"";
  position:absolute;
  left:30px;
  right:0;
  bottom:-8px;
  height:1px;
  background:linear-gradient(90deg, rgba(56,189,248,.65), transparent);
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a{ color:#7dd3fc; text-decoration:none; transition:color .18s ease, opacity .18s ease, transform .18s ease; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a:hover{ color:#bae6fd; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) strong,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .fw-bold,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .fw-semibold{ color:var(--bm-text) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) em{ color:#c4b5fd; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) u{ text-decoration-color:rgba(56,189,248,.75); text-underline-offset:3px; }

/* PlainAdmin / layout common areas */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header.header-sticky,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header .header-left,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header .header-right,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-nav-wrapper,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-nav,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .navbar,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .dropdown-menu{
  background:rgba(8, 17, 31, .92) !important;
  color:var(--bm-text) !important;
  border-color:var(--bm-border) !important;
  backdrop-filter:blur(18px);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header{ box-shadow:0 14px 38px rgba(0,0,0,.30) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-nav-wrapper{ box-shadow:14px 0 48px rgba(0,0,0,.32) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-nav-wrapper a,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-nav a,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header a,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .dropdown-menu a{ color:var(--bm-text-2) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-nav-wrapper a:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-nav a:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header a:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .dropdown-menu a:hover{ color:#fff !important; background:rgba(56,189,248,.10) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .overlay{ background:rgba(2,6,23,.74) !important; backdrop-filter:blur(4px); }

/* Cards / containers */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{
  position:relative;
  background:
    linear-gradient(180deg, rgba(17,31,52,.96), rgba(8,17,31,.96)) !important;
  border:1px solid var(--bm-border) !important;
  border-radius:var(--bm-radius-xl) !important;
  box-shadow:var(--bm-shadow-soft);
  color:var(--bm-text) !important;
  overflow:hidden;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(56,189,248,.12), transparent 36%);
  opacity:.9;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean > *,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft > *,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form > *{ position:relative; z-index:1; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft{
  background:linear-gradient(180deg, rgba(15,23,42,.90), rgba(15,23,42,.70)) !important;
  border-radius:var(--bm-radius-lg) !important;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar{
  position:sticky;
  top:92px;
  max-height:calc(100vh - 118px);
  overflow:auto;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-heading{
  margin:14px 0 10px;
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#93c5fd !important;
}

/* Alerts */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .alert{
  border-radius:var(--bm-radius-lg) !important;
  border:1px solid var(--bm-border) !important;
  box-shadow:0 15px 38px rgba(0,0,0,.26);
  color:var(--bm-text) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .alert-info,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #instructor-refresh-hint{
  background:
    linear-gradient(135deg, rgba(14,165,233,.18), rgba(59,130,246,.09)) !important;
  border-color:rgba(56,189,248,.34) !important;
  color:#dff6ff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .alert-success{
  background:linear-gradient(135deg, rgba(16,185,129,.20), rgba(6,95,70,.10)) !important;
  border-color:rgba(52,211,153,.38) !important;
  color:#dcfff2 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .alert-danger{
  background:linear-gradient(135deg, rgba(239,68,68,.20), rgba(127,29,29,.10)) !important;
  border-color:rgba(251,113,133,.42) !important;
  color:#ffe4e6 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .alert strong{ color:#fff !important; }

/* Header student */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding:16px;
  border-radius:var(--bm-radius-lg);
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(15,23,42,.36));
  border:1px solid rgba(56,189,248,.18);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student .meta,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student .stats{
  color:var(--bm-text-2) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student .stats{
  padding:8px 12px;
  border:1px solid var(--bm-border);
  border-radius:999px;
  background:rgba(15,23,42,.72);
}

/* Sidebar students */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius:var(--bm-radius-md);
  background:rgba(15,23,42,.62);
  border:1px solid rgba(148,163,184,.14);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails li:hover{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.34);
  background:rgba(30,41,59,.72);
  box-shadow:0 12px 28px rgba(2,6,23,.28);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .email-link{
  flex:1;
  min-width:0;
  color:var(--bm-text-2) !important;
  font-weight:700;
  line-height:1.35;
  word-break:break-word;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .email-link:hover{ color:#fff !important; }

/* Text helpers */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .help-text,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .text-muted,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .small.text-muted{
  color:var(--bm-muted) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .badge-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .total-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  border-radius:999px;
  padding:6px 10px;
  font-size:.75rem;
  font-weight:800;
  color:#dff6ff !important;
  background:rgba(56,189,248,.13);
  border:1px solid rgba(56,189,248,.28);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .total-pill{ margin-left:10px; }

/* Inputs */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search-icon{
  position:absolute;
  z-index:3;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--bm-muted);
  pointer-events:none;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select{
  min-height:var(--bm-input-h);
  width:100%;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.26) !important;
  background-color:rgba(2,6,23,.62) !important;
  color:var(--bm-text) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search{
  padding:10px 14px 10px 42px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control::placeholder,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search::placeholder{ color:rgba(203,213,225,.55) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control:focus,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select:focus,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search:focus{
  outline:0 !important;
  border-color:rgba(56,189,248,.78) !important;
  background-color:rgba(15,23,42,.90) !important;
  color:#fff !important;
  box-shadow:0 0 0 .22rem rgba(56,189,248,.14), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select{
  --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393c5fd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control[readonly],
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select:disabled,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control:disabled,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button:disabled,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn.disabled,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) fieldset:disabled .form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) fieldset:disabled .form-select{
  opacity:.68 !important;
  cursor:not-allowed !important;
  background-color:rgba(15,23,42,.48) !important;
  color:rgba(226,232,240,.72) !important;
  border-color:rgba(148,163,184,.18) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-label{
  color:var(--bm-text-2) !important;
  font-weight:650;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check{
  padding:12px 14px 12px 42px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:var(--bm-radius-md);
  background:rgba(15,23,42,.40);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check:hover{
  border-color:rgba(56,189,248,.24);
  background:rgba(30,41,59,.50);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-input{
  background-color:rgba(2,6,23,.88) !important;
  border-color:rgba(148,163,184,.55) !important;
  box-shadow:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-input:checked{
  background-color:var(--bm-primary-2) !important;
  border-color:var(--bm-primary) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-input:focus{ box-shadow:0 0 0 .2rem rgba(56,189,248,.14) !important; }

/* Buttons */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn{
  border-radius:13px !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease, opacity .16s ease;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn:hover{ transform:translateY(-1px); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-sm,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-mini{ border-radius:11px !important; font-size:.82rem !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-primary{
  background:linear-gradient(135deg, var(--bm-primary), var(--bm-primary-2)) !important;
  border-color:rgba(56,189,248,.82) !important;
  color:#00111c !important;
  box-shadow:0 14px 30px rgba(37,99,235,.26), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-primary:hover{
  background:linear-gradient(135deg, #7dd3fc, #3b82f6) !important;
  color:#020617 !important;
  box-shadow:0 18px 38px rgba(37,99,235,.34) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-detail-ghost{
  background:rgba(56,189,248,.08) !important;
  border:1px solid rgba(56,189,248,.38) !important;
  color:#bdefff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-primary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-detail-ghost:hover{
  background:rgba(56,189,248,.18) !important;
  border-color:rgba(125,211,252,.70) !important;
  color:#fff !important;
  box-shadow:0 14px 28px rgba(14,165,233,.18);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-secondary{
  background:rgba(148,163,184,.08) !important;
  border:1px solid rgba(148,163,184,.32) !important;
  color:#dbeafe !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-secondary:hover{
  background:rgba(148,163,184,.17) !important;
  color:#fff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-danger,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-cancel-mini{
  background:rgba(251,113,133,.08) !important;
  border:1px solid rgba(251,113,133,.40) !important;
  color:#fecdd3 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-danger:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-cancel-mini:hover{
  background:rgba(251,113,133,.18) !important;
  border-color:rgba(253,164,175,.75) !important;
  color:#fff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-cancel-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 10px;
  border-radius:999px !important;
  font-size:.78rem;
  font-weight:800;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-detail-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 10px;
  border-radius:999px !important;
  font-size:.78rem;
  font-weight:800;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .action-col,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tpl-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tpl-actions form{ margin:0; }

/* Tabs */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 20px;
  padding:8px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  background:rgba(2,6,23,.40);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:9px 14px;
  border-radius:13px;
  color:var(--bm-muted) !important;
  font-weight:850;
  border:1px solid transparent;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a:hover{
  color:#fff !important;
  background:rgba(56,189,248,.10);
  border-color:rgba(56,189,248,.20);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a.active{
  color:#00111c !important;
  background:linear-gradient(135deg, var(--bm-primary), #60a5fa);
  box-shadow:0 12px 28px rgba(14,165,233,.24);
  border-color:rgba(125,211,252,.60);
}

/* Tables */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid rgba(148,163,184,.18);
  border-radius:var(--bm-radius-xl);
  background:rgba(2,6,23,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  color:var(--bm-text) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:15px 16px;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#dff6ff !important;
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.90)) !important;
  border-bottom:1px solid rgba(56,189,248,.20);
  white-space:nowrap;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody td{
  padding:15px 16px;
  border-bottom:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.32);
  color:var(--bm-text-2) !important;
  vertical-align:middle;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr:last-child td{ border-bottom:0; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr:hover td{
  background:rgba(30,41,59,.52);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .account-pending td,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-pending td{
  background:rgba(251,191,36,.055) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .account-notice-row td,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-notice-row td{
  padding:0 0 10px !important;
  background:transparent !important;
  border-bottom:0 !important;
}

/* Pending banners / chips */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:10px 0;
  padding:12px 14px;
  border-radius:var(--bm-radius-lg);
  background:
    linear-gradient(135deg, rgba(251,191,36,.16), rgba(146,64,14,.07)),
    rgba(15,23,42,.88);
  border:1px solid rgba(251,191,36,.34);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner .left,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner .left,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner .right,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner .icons{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.01em;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .chip-pending{
  color:#fffbeb !important;
  background:rgba(251,191,36,.16);
  border:1px solid rgba(251,191,36,.36);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .chip-normalcase{ text-transform:none; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-highlight{
  border-color:rgba(251,191,36,.45) !important;
  box-shadow:0 0 0 1px rgba(251,191,36,.16), 0 18px 40px rgba(0,0,0,.28) !important;
}

/* Empty state */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .empty-state{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:22px;
  border:1px solid rgba(56,189,248,.24);
  border-radius:var(--bm-radius-xl);
  background:linear-gradient(135deg, rgba(56,189,248,.11), rgba(15,23,42,.28));
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .empty-state .icon{
  width:56px;
  height:56px;
  flex:0 0 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(56,189,248,.18), rgba(37,99,235,.12));
  border:1px solid rgba(56,189,248,.28);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .empty-state .icon svg path{ stroke:#7dd3fc !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .empty-state ul,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .empty-state ul[style]{ color:var(--bm-text-2) !important; }

/* Blocks */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:14px 16px;
  border-radius:var(--bm-radius-lg);
  background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(14,165,233,.08));
  border:1px solid rgba(125,211,252,.20);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .border,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .rounded,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .bg-light{
  border-color:rgba(148,163,184,.18) !important;
  background:rgba(15,23,42,.48) !important;
  color:var(--bm-text-2) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .rounded{ border-radius:var(--bm-radius-lg) !important; }

/* Template editor sections */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:14px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-grid > .col-12{ grid-column:span 12; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-grid > .col-6{ grid-column:span 6; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-grid > .col-lg-6{ grid-column:span 6; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .mt-6{ margin-top:1.5rem !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section{
  position:relative;
  margin:18px 0;
  border-radius:var(--bm-radius-xl);
  background:
    linear-gradient(180deg, rgba(17,31,52,.92), rgba(8,17,31,.86));
  border:1px solid rgba(148,163,184,.19);
  box-shadow:0 16px 38px rgba(0,0,0,.24);
  overflow:hidden;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(56,189,248,.09), transparent 38%);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.44);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-title{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:#f8fafc !important;
  font-weight:900;
  letter-spacing:.02em;
  font-size:.97rem;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-title::before{
  content:"";
  width:9px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--bm-primary), var(--bm-purple));
  box-shadow:0 0 20px rgba(56,189,248,.35);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body{
  position:relative;
  z-index:1;
  padding:18px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off{
  opacity:.88;
  border-color:rgba(148,163,184,.12);
  background:linear-gradient(180deg, rgba(15,23,42,.78), rgba(8,17,31,.78));
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-body{ color:rgba(226,232,240,.72) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-body{
  filter:saturate(.70);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen{
  position:relative;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen::after{
  content:"Sección desactivada";
  position:absolute;
  right:18px;
  top:16px;
  padding:5px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
  color:#cbd5e1;
  background:rgba(15,23,42,.88);
  border:1px solid rgba(148,163,184,.20);
  pointer-events:none;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.is-locked::after,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-body.is-locked::after{
  content:"Hay cambios pendientes. Cancela o espera a que se apliquen para editar.";
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  padding:10px 12px;
  border-radius:var(--bm-radius-md);
  background:rgba(251,191,36,.14);
  border:1px solid rgba(251,191,36,.34);
  color:#fffbeb;
  font-size:.82rem;
  font-weight:800;
  pointer-events:none;
}

/* Custom switch */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:58px;
  height:32px;
  margin:0;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .switch input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .switch label{
  cursor:pointer;
  width:58px;
  height:32px;
  border-radius:999px;
  background:rgba(71,85,105,.95);
  border:1px solid rgba(148,163,184,.32);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.38);
  transition:background .20s ease, border-color .20s ease, box-shadow .20s ease;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .switch label::after{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:24px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff,#cbd5e1);
  box-shadow:0 6px 14px rgba(0,0,0,.38);
  transition:transform .20s ease;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .switch input:checked + label{
  background:linear-gradient(135deg, var(--bm-success), var(--bm-primary-3));
  border-color:rgba(125,211,252,.70);
  box-shadow:0 0 0 4px rgba(56,189,248,.10), inset 0 1px 0 rgba(255,255,255,.28);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .switch input:checked + label::after{ transform:translateX(26px); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .switch input:focus + label{ box-shadow:0 0 0 4px rgba(56,189,248,.15), inset 0 2px 8px rgba(0,0,0,.24); }

/* Instruments */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-box{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-input{ flex:1; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-add{ white-space:nowrap; min-height:44px; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-list-wrap{
  border:1px solid rgba(148,163,184,.18);
  border-radius:var(--bm-radius-lg);
  background:rgba(2,6,23,.35);
  overflow:hidden;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-list-head{
  padding:11px 14px;
  font-weight:900;
  color:#dff6ff;
  background:rgba(15,23,42,.60);
  border-bottom:1px solid rgba(148,163,184,.14);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-list{
  list-style:none;
  margin:0;
  padding:10px;
  max-height:220px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(15,23,42,.68);
  border:1px solid rgba(148,163,184,.14);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-code{
  font-weight:900;
  letter-spacing:.06em;
  color:#f8fafc;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-del{
  border:1px solid rgba(251,113,133,.35);
  background:rgba(251,113,133,.08);
  color:#fecdd3;
  border-radius:999px;
  padding:5px 9px;
  font-weight:850;
  font-size:.76rem;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-del:hover{ background:rgba(251,113,133,.18); color:#fff; }

/* Time ranges & day chips */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #timeRanges{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .time-row{
  display:grid;
  grid-template-columns:auto minmax(72px, 1fr) minmax(72px, 1fr) auto minmax(72px, 1fr) minmax(72px, 1fr) auto;
  align-items:center;
  gap:8px;
  padding:12px;
  border-radius:var(--bm-radius-md);
  background:rgba(2,6,23,.38);
  border:1px solid rgba(148,163,184,.16);
  color:var(--bm-text-2);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .time-row span{ color:var(--bm-muted); font-weight:800; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .day-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:4px 6px 4px 0;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.20);
  background:rgba(15,23,42,.48);
  color:var(--bm-text-2);
  font-weight:800;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .day-chip:hover{ transform:translateY(-1px); border-color:rgba(56,189,248,.35); background:rgba(56,189,248,.10); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .day-chip:has(input:checked){ border-color:rgba(52,211,153,.55); background:rgba(16,185,129,.14); color:#ecfdf5; }

/* Config */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{ padding:16px; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-body{
  position:relative;
  display:block;
  border:0;
  padding:0;
  margin:0;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-pending{
  border-color:rgba(251,191,36,.34) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  padding:18px;
  border-radius:var(--bm-radius-xl);
  border:1px solid rgba(148,163,184,.20);
  color:var(--bm-text) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.25);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card .title{
  margin:0 0 4px;
  font-size:1.05rem;
  font-weight:900;
  color:#fff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card .desc{ color:var(--bm-text-2) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-on{
  background:linear-gradient(135deg, rgba(16,185,129,.22), rgba(14,165,233,.10)) !important;
  border-color:rgba(52,211,153,.44) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off{
  background:linear-gradient(135deg, rgba(251,113,133,.20), rgba(127,29,29,.10)) !important;
  border-color:rgba(251,113,133,.46) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off .title{ color:#ffe4e6 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off .desc,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off .help-text,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off p{ color:#fecdd3 !important; }

/* Flush pending */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .flush-pending{
  opacity:.72 !important;
  filter:saturate(.7) grayscale(.10) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .flush-pending .btn{ pointer-events:none; }

/* Modals */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal{ color:var(--bm-text) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-backdrop.show{ opacity:.78 !important; background:#020617 !important; backdrop-filter:blur(8px); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog{ filter:drop-shadow(0 30px 70px rgba(0,0,0,.55)); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{
  color:var(--bm-text) !important;
  background:
    linear-gradient(180deg, rgba(17,31,52,.98), rgba(8,17,31,.98)) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  border-radius:24px !important;
  box-shadow:var(--bm-shadow) !important;
  overflow:hidden;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer{
  border-color:rgba(148,163,184,.16) !important;
  background:rgba(15,23,42,.55) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-title{ color:#fff !important; font-weight:900; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-body{ color:var(--bm-text-2) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-close{
  filter:invert(1) grayscale(1) brightness(1.8);
  opacity:.78 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-close:hover{ opacity:1 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sticky-footer{
  position:sticky;
  bottom:0;
  z-index:4;
  backdrop-filter:blur(14px);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  margin-bottom:14px;
  border-radius:var(--bm-radius-xl);
  border:1px solid rgba(148,163,184,.18);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero .icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  font-size:1.3rem;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero .title{ margin:0 0 5px; font-weight:900; color:#fff !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero .desc{ margin:0; color:var(--bm-text-2) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero--success{ background:linear-gradient(135deg, rgba(16,185,129,.20), rgba(6,95,70,.08)); border-color:rgba(52,211,153,.34); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero--info{ background:linear-gradient(135deg, rgba(59,130,246,.20), rgba(30,64,175,.08)); border-color:rgba(96,165,250,.34); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero--error{ background:linear-gradient(135deg, rgba(239,68,68,.20), rgba(127,29,29,.08)); border-color:rgba(251,113,133,.40); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-modal .modal-body{ background:rgba(2,6,23,.22); }

/* Pending detail cards generated by JS */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .kv,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .details-raw,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .notice{
  color:var(--bm-text-2) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-modal .card{
  margin-bottom:12px;
  padding:14px;
  border-radius:var(--bm-radius-lg);
  background:rgba(15,23,42,.72) !important;
  border:1px solid rgba(148,163,184,.18) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-modal .title{
  font-weight:900;
  color:#fff !important;
  margin-bottom:8px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .notice,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-modal .notice{
  padding:10px 12px;
  margin:8px 0;
  border-radius:var(--bm-radius-md);
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.20);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .kv,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-modal .kv{
  display:grid;
  grid-template-columns:minmax(160px, .55fr) minmax(0, 1fr);
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid rgba(148,163,184,.12);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .k,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-modal .k{ color:#93c5fd !important; font-weight:900; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .v,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-modal .v{ color:var(--bm-text-2) !important; word-break:break-word; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .details-raw{
  margin-top:10px;
  padding:12px;
  border-radius:var(--bm-radius-md);
  background:rgba(2,6,23,.74);
  border:1px solid rgba(148,163,184,.16);
  max-height:260px;
  overflow:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.82rem;
  white-space:pre-wrap;
}

/* Raw Bootstrap table fallbacks */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table > :not(caption) > * > *{
  color:var(--bm-text-2) !important;
  background-color:transparent !important;
  border-color:rgba(148,163,184,.14) !important;
}

/* Keep everything readable even with inline light colors from old snippets */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean [style*="color:#374151"],
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean [style*="color: #374151"],
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content [style*="color:#374151"],
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content [style*="color: #374151"]{
  color:var(--bm-text-2) !important;
}

/* Responsive */
@media (max-width: 1199.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar{ position:relative; top:auto; max-height:420px; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean{ min-width:700px; }
}
@media (max-width: 767.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section{ padding:14px 0 26px; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .container-fluid{ padding-left:12px; padding-right:12px; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading{ font-size:1.55rem; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{ border-radius:18px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .block-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card{
    align-items:flex-start;
    flex-direction:column;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs{ overflow:auto; flex-wrap:nowrap; padding-bottom:9px; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a{ white-space:nowrap; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-grid{ grid-template-columns:1fr; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-grid > .col-6,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-grid > .col-lg-6,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-grid > .col-12{ grid-column:1 / -1; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-box{ flex-direction:column; align-items:stretch; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .time-row{
    grid-template-columns:1fr 1fr;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .time-row span{ grid-column:1 / -1; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .time-row button{ grid-column:1 / -1; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog{ margin:10px; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #pendingDetailBody .kv,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-modal .kv{ grid-template-columns:1fr; }
}

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:4369, instructor.php:14529, instructornuevo.php:4196 */
/* Refuerzo local dark mode para la tarjeta de protección. */
						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off{
						  background:linear-gradient(135deg, rgba(251,113,133,.20), rgba(127,29,29,.10)) !important;
						  border:1px solid rgba(251,113,133,.46) !important;
						  box-shadow:0 18px 42px rgba(0,0,0,.25) !important;
						}
						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off::after{
						  background:none !important;
						  opacity:0 !important;
						}
						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off .title{ color:#ffe4e6 !important; }
						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off .desc,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off p,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off .help-text{ color:#fecdd3 !important; }

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:4509, instructor.php:14621, instructornuevo.php:4336 */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-workspace{
                        display:grid;
                        grid-template-columns:300px minmax(0,1fr);
                        gap:14px;
                        align-items:start;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-side,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-editor-card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-placeholder-card{
                        border:1px solid rgba(148,163,184,.24);
                        border-radius:18px;
                        background:rgba(15,23,42,.22);
                        padding:16px;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-mode-grid{
                        display:grid;
                        grid-template-columns:1fr 1fr;
                        gap:8px;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-mode-btn{
                        width:100%;
                        min-height:40px;
                        border-radius:12px;
                        font-weight:700;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-mode-btn.is-active-create,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-mode-btn.is-active-edit{
                        color:#fff !important;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-mode-btn.is-active-create{
                        background:#2563eb !important;
                        border-color:#1d4ed8 !important;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-mode-btn.is-active-edit{
                        background:#059669 !important;
                        border-color:#047857 !important;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-mode-badge{
                        display:inline-flex;
                        align-items:center;
                        border:1px solid rgba(148,163,184,.28);
                        border-radius:999px;
                        padding:5px 10px;
                        font-size:.78rem;
                        font-weight:800;
                        background:rgba(15,23,42,.32);
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-context-box{
                        border:1px solid rgba(148,163,184,.18);
                        border-radius:14px;
                        padding:11px;
                        background:rgba(15,23,42,.18);
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-rules-toolbar{
                        display:flex;
                        justify-content:space-between;
                        align-items:center;
                        gap:10px;
                        flex-wrap:wrap;
                        margin-bottom:10px;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-rule-row{
                        display:grid;
                        grid-template-columns:auto minmax(0,1fr) auto;
                        gap:10px;
                        align-items:start;
                        padding:10px;
                        border:1px solid rgba(148,163,184,.2);
                        border-radius:14px;
                        background:rgba(15,23,42,.14);
                        margin-bottom:10px;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-rule-num{
                        width:30px;
                        height:30px;
                        border-radius:999px;
                        display:inline-flex;
                        align-items:center;
                        justify-content:center;
                        font-weight:800;
                        font-size:.82rem;
                        border:1px solid rgba(148,163,184,.28);
                        color:inherit;
                      }
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-editor-actions{
                        display:flex;
                        justify-content:space-between;
                        align-items:center;
                        gap:10px;
                        flex-wrap:wrap;
                        margin-top:14px;
                      }
					  					  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-pending-notice{
						  display:flex;
						  align-items:flex-start;
						  justify-content:space-between;
						  gap:14px;
						  flex-wrap:wrap;
						  margin-bottom:16px;
						  border:1px solid rgba(217,119,6,.34);
						  border-left:4px solid rgba(245,158,11,.82);
						  border-radius:16px;
						  background:linear-gradient(135deg, rgba(92,52,18,.44), rgba(15,23,42,.58));
						  color:#f8fafc;
						  box-shadow:0 14px 34px rgba(0,0,0,.22);
						  padding:14px 16px;
						}

						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-pending-notice.is-hidden{
						  display:none !important;
						}

						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-pending-notice .small{
						  color:#fcd34d;
						}

						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-reset-draft-btn{
						  border:1px solid rgba(245,158,11,.50) !important;
						  border-radius:12px !important;
						  background:linear-gradient(135deg, rgba(30,41,59,.92), rgba(92,52,18,.58)) !important;
						  color:#fffbeb !important;
						  font-weight:800 !important;
						  padding:7px 12px !important;
						  box-shadow:0 10px 24px rgba(0,0,0,.24);
						}

						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-reset-draft-btn:hover{
						  border-color:rgba(251,191,36,.88) !important;
						  background:linear-gradient(135deg, rgba(120,53,15,.72), rgba(30,41,59,.94)) !important;
						  color:#ffffff !important;
						  transform:translateY(-1px);
						}

						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-pending-shell{
						  position:relative;
						  border-radius:18px;
						  isolation:isolate;
						}

						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-pending-shell.is-remote-pending{
						  overflow:hidden;
						}

						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-pending-shell.is-remote-pending::after{
						  content:"";
						  position:absolute;
						  inset:0;
						  z-index:20;
						  border-radius:18px;
						  background:rgba(0,0,0,.56);
						  backdrop-filter:blur(1.8px);
						  pointer-events:none;
						}

						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-pending-shell.is-remote-pending::before{
						  content:"Cambios enviados y pendientes de aplicar";
						  position:absolute;
						  top:50%;
						  left:50%;
						  transform:translate(-50%, -50%);
						  z-index:21;
						  max-width:calc(100% - 42px);
						  padding:12px 16px;
						  border:1px solid rgba(245,158,11,.54);
						  border-radius:999px;
						  background:rgba(15,23,42,.92);
						  color:#fef3c7;
						  font-size:.86rem;
						  font-weight:900;
						  text-align:center;
						  box-shadow:0 18px 42px rgba(0,0,0,.40);
						  pointer-events:none;
						}
                      :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-empty-mini{
                        border:1px dashed rgba(148,163,184,.32);
                        border-radius:14px;
                        padding:14px;
                        text-align:center;
                      }
                      @media (max-width: 920px){
                        :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-workspace{ grid-template-columns:1fr; }
                      }
                      @media (max-width: 620px){
                        :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-mode-grid{ grid-template-columns:1fr; }
                        :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-rule-row{ grid-template-columns:1fr; }
                        :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checklist-rule-num{ width:auto; }
                      }

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:5607, instructor.php:15719, instructornuevo.php:5434 */
/* Estado visual cuando hay un refresco pendiente. */
						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .flush-pending{ opacity:.72; filter:saturate(.7) grayscale(.10); }
						:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .flush-pending .btn{ pointer-events:none; }

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:6048, instructor.php:16160, instructornuevo.php:5875 */
/* Refuerzo final: queda después de estilos inline antiguos para asegurar contraste en todos los textos. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body *{ border-color:rgba(148,163,184,.20); }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper p,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper li,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper td,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper th,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper span,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper div{
  color:inherit;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .table-wrap,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .template-section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .config-form,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .modal-content{
  color:var(--bm-text) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .bg-light,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .border.rounded,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper [class*="bg-light"]{
  background:rgba(15,23,42,.48) !important;
  color:var(--bm-text-2) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off{
  background:linear-gradient(135deg, rgba(251,113,133,.20), rgba(127,29,29,.10)) !important;
  border-color:rgba(251,113,133,.46) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-on{
  background:linear-gradient(135deg, rgba(16,185,129,.22), rgba(14,165,233,.10)) !important;
  border-color:rgba(52,211,153,.44) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content *:not(.btn){
  color:var(--bm-text) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .help-text,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .desc,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .details-raw,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .v{
  color:var(--bm-text-2) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-primary *{ color:#00111c !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-outline-secondary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-outline-secondary *,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-detail-ghost,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-detail-ghost *,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-outline-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-outline-primary *,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-outline-danger,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-outline-danger *,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-cancel-mini,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-cancel-mini *{ color:inherit; }

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:6108, instructor.php:16220, instructornuevo.php:5935 */
/* Paleta más sobria: moderno, pero sin brillo ni sombras exageradas. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):root{
  --bm-bg-0:#070b14;
  --bm-bg-1:#0b1220;
  --bm-bg-2:#101a2b;
  --bm-bg-3:#152238;
  --bm-card:rgba(13, 20, 34, .96);
  --bm-card-2:rgba(17, 27, 45, .94);
  --bm-border:rgba(148, 163, 184, .17);
  --bm-border-2:rgba(148, 163, 184, .26);
  --bm-text:#eef4ff;
  --bm-text-2:#d8e3f3;
  --bm-muted:#93a4ba;
  --bm-primary:#38bdf8;
  --bm-primary-2:#2563eb;
  --bm-success:#34d399;
  --bm-warning:#fbbf24;
  --bm-danger:#fb7185;
  --bm-shadow:0 16px 38px rgba(0,0,0,.30);
  --bm-shadow-soft:0 8px 22px rgba(0,0,0,.22);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):is(html),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body{
  background:
    radial-gradient(circle at 15% 0%, rgba(56,189,248,.075), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(99,102,241,.055), transparent 30%),
    linear-gradient(135deg, var(--bm-bg-0) 0%, var(--bm-bg-1) 55%, #050814 100%) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper{
  background:transparent !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading{
  text-shadow:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading::before{
  box-shadow:none !important;
  background:linear-gradient(180deg, rgba(56,189,248,.92), rgba(37,99,235,.82)) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading::after{
  opacity:.45 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{
  box-shadow:var(--bm-shadow-soft) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section::before{
  opacity:.22 !important;
  background:linear-gradient(135deg, rgba(255,255,255,.045), transparent 38%) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .alert,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card{
  box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-primary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a.active{
  box-shadow:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails li:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .day-chip:hover{
  transform:none !important;
}

/* Secciones de plantilla: jerarquía clara y armónica. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .modal-body{
  background:rgba(2,6,23,.12) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section{
  margin:16px 0 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(10,17,30,.92)) !important;
  border:1px solid rgba(148,163,184,.18) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header{
  min-height:66px;
  padding:14px 16px !important;
  background:rgba(15,23,42,.60) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-title{
  font-size:.95rem !important;
  letter-spacing:.01em !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-title::before{
  width:6px !important;
  height:22px !important;
  box-shadow:none !important;
  background:linear-gradient(180deg, rgba(56,189,248,.88), rgba(99,102,241,.80)) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body{
  padding:16px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-header .help-text{
  min-width:92px;
  text-align:right;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-header .help-text.is-on-label{
  color:#86efac !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-header .help-text.is-off-label{
  color:#fca5a5 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off{
  opacity:1 !important;
  border-color:rgba(248,113,113,.30) !important;
  border-style:dashed !important;
  background:linear-gradient(180deg, rgba(25,30,42,.70), rgba(10,14,24,.70)) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off::before{
  opacity:.06 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-header{
  background:linear-gradient(90deg, rgba(127,29,29,.22), rgba(15,23,42,.50)) !important;
  border-bottom-color:rgba(248,113,113,.22) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-title{
  color:rgba(226,232,240,.70) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-title::before{
  background:rgba(248,113,113,.70) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-body{
  filter:none !important;
  opacity:.48;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen::after{
  content:"Desactivada" !important;
  top:14px !important;
  right:14px !important;
  color:#fee2e2 !important;
  background:rgba(127,29,29,.50) !important;
  border-color:rgba(248,113,113,.32) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.is-locked::after,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-body.is-locked::after{
  box-shadow:none !important;
}

/* Campos: evitar huecos, cajas vacías y layouts sin armonía. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .metric-fields{
  align-items:end;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .metric-fields .form-label{
  min-height:38px;
  display:flex;
  align-items:flex-end;
  line-height:1.18;
  margin-bottom:8px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .metric-fields--single .form-label{
  min-height:auto;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-body > .col-12,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-body > .col-12.col-md-4{
  max-width:100%;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .row.g-2{
  --bs-gutter-x:1rem;
  --bs-gutter-y:1rem;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .form-check:has(input[hidden]){
  display:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .col-12.col-md-4:has(.form-check input[hidden]){
  display:none !important;
}

/* Form checks y tarjetas: tamaños consistentes. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check{
  min-height:52px;
  display:flex;
  align-items:center;
  margin-bottom:0 !important;
  background:rgba(15,23,42,.34) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-label{
  line-height:1.28;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{
  padding:18px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:14px !important;
  align-items:stretch;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12:not(:has(> h5)){
  height:100%;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12.col-lg-6{
  grid-column:span 6;
  display:flex;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check{
  width:100%;
  height:100%;
  min-height:68px;
  padding:14px 16px 14px 44px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid h5{
  margin:14px 0 2px !important;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(30,41,59,.36);
  border:1px solid rgba(148,163,184,.14);
  color:#f8fafc !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12:first-child h5{
  margin-top:0 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card{
  min-height:108px;
  margin-bottom:16px !important;
  padding:18px !important;
  border-radius:18px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-on{
  background:linear-gradient(135deg, rgba(16,185,129,.13), rgba(14,165,233,.055)) !important;
  border-color:rgba(52,211,153,.30) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off{
  background:linear-gradient(135deg, rgba(239,68,68,.12), rgba(30,41,59,.34)) !important;
  border-color:rgba(248,113,113,.34) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off .title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off .desc,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off .help-text,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off p{
  color:#f1f5f9 !important;
}

/* Botones y acciones: alineación más limpia. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .block-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner{
  border-radius:16px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tpl-actions,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .action-col,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner .right,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner .icons{
  align-items:center !important;
  gap:8px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer.sticky-footer,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sticky-footer{
  background:rgba(8,17,31,.92) !important;
  border-top:1px solid rgba(148,163,184,.16) !important;
  justify-content:flex-end !important;
  gap:10px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .text-end.mt-3{
  display:flex;
  justify-content:flex-end;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.12);
}

@media (max-width: 991.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12.col-lg-6{
    grid-column:1 / -1;
  }
}
@media (max-width: 767.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header{
    align-items:flex-start;
    flex-direction:column;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-header .help-text{
    min-width:0;
    text-align:left;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .metric-fields .form-label{
    min-height:auto;
  }
}


/* =========================================================
   FIX FINAL: CHECKBOXES + LABELS
   - Evita que el checkbox quede flotando sobre el texto.
   - Mantiene los inputs y names intactos.
   - Aplica a varias zonas: Gestor emocional, noticias, ATM,
     días operativos y cualquier .form-check normal.
========================================================= */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check{
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:11px !important;
  width:100% !important;
  min-height:0 !important;
  padding:13px 15px !important;
  margin:0 !important;
  text-align:left !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check > .form-check-input{
  float:none !important;
  position:relative !important;
  flex:0 0 auto !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  margin:2px 0 0 0 !important;
  transform:none !important;
  vertical-align:top !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check > .form-check-label{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.35 !important;
  text-align:left !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check{
  align-items:flex-start !important;
  min-height:74px !important;
  height:100% !important;
  padding:16px 17px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check > .form-check-input{
  margin-top:3px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check > .form-check-label{
  font-size:.96rem !important;
  font-weight:760 !important;
  letter-spacing:-.015em !important;
  color:#dbeafe !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check:hover > .form-check-label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check:hover > .form-check-label{
  color:#f8fafc !important;
}

/* Los checks de días no usan label propio; los tratamos como chips compactos. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check.form-check-inline{
  display:inline-flex !important;
  width:auto !important;
  min-height:38px !important;
  padding:9px 12px !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check.form-check-inline > .form-check-input{
  margin-top:0 !important;
}

/* No tocar los switches grandes: esos tienen su propio diseño. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .switch .form-check-input,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .switch input[type="checkbox"]{
  position:absolute !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
}

/* Mejor lectura en móviles o cajas angostas. */
@media (max-width: 575.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check{
    padding:12px 13px !important;
    gap:10px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check > .form-check-label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check > .form-check-label{
    font-size:.93rem !important;
    line-height:1.32 !important;
  }
}

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:6511, instructor.php:16623, instructornuevo.php:6338 */
/* =========================================================
   1) PLANTILLAS: evita que la placa de estado tape textos.
   La placa flotante dentro del body era la causa del cruce con
   textos explicativos. El estado queda únicamente en el header.
========================================================= */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-body.is-frozen::after{
  content:none !important;
  display:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-body.is-frozen{
  padding-top:16px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header > .d-flex{
  margin-left:auto !important;
  flex:0 0 auto !important;
  align-items:center !important;
  gap:9px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:104px !important;
  height:30px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  font-size:.72rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
  background:rgba(15,23,42,.72) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text.is-on-label{
  color:#bbf7d0 !important;
  background:rgba(22,101,52,.22) !important;
  border-color:rgba(74,222,128,.30) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text.is-off-label{
  color:#fecaca !important;
  background:rgba(127,29,29,.30) !important;
  border-color:rgba(248,113,113,.34) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off{
  border-color:rgba(248,113,113,.30) !important;
  background:linear-gradient(180deg, rgba(21,25,38,.86), rgba(9,13,23,.86)) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-header{
  background:linear-gradient(90deg, rgba(127,29,29,.18), rgba(15,23,42,.56)) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body{
  opacity:.58 !important;
  filter:saturate(.75) grayscale(.12) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body input:not([type="hidden"]),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body textarea,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body button{
  cursor:not-allowed !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-body > .help-text:first-child,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-body .help-text.mb-2:first-child{
  max-width:calc(100% - 0px) !important;
  margin-right:0 !important;
  padding-right:0 !important;
}

/* =========================================================
   2) GESTOR EMOCIONAL: elimina huecos, fuerza ancho real y
   ordena las tarjetas en una grilla de 2 columnas homogénea.
========================================================= */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(280px, 1fr)) !important;
  gap:12px 16px !important;
  align-items:stretch !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > [class*="col-"]{
  width:100% !important;
  max-width:none !important;
  flex:initial !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin:0 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12:has(> h5){
  grid-column:1 / -1 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12.col-6:not(.col-lg-6){
  grid-column:1 / -1 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid h5{
  display:flex !important;
  align-items:center !important;
  min-height:44px !important;
  margin:6px 0 0 !important;
  padding:10px 14px !important;
  border-radius:14px !important;
  background:rgba(30,41,59,.38) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  font-size:.98rem !important;
  line-height:1.15 !important;
  color:#f8fafc !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12:first-child h5{
  margin-top:0 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:12px !important;
  width:100% !important;
  height:100% !important;
  min-height:78px !important;
  padding:16px 18px !important;
  border-radius:16px !important;
  background:rgba(15,23,42,.48) !important;
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check:hover{
  background:rgba(17,27,45,.68) !important;
  border-color:rgba(148,163,184,.30) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check > .form-check-input{
  flex:0 0 18px !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  margin:2px 0 0 0 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check > .form-check-label{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.32 !important;
  font-size:.96rem !important;
  font-weight:760 !important;
  letter-spacing:-.015em !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
  color:#dbeafe !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check > .form-check-label br{
  display:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .protect-card{
  margin-bottom:14px !important;
  min-height:96px !important;
  border-radius:18px !important;
  box-shadow:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .config-body{
  display:block !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .text-end.mt-3{
  margin-top:14px !important;
}

/* =========================================================
   3) CHECKBOXES GENERALES: una sola regla estable para no
   volver a montar checkbox encima de texto en ninguna zona.
========================================================= */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .form-check:not(.form-check-inline){
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:11px !important;
  text-align:left !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .form-check:not(.form-check-inline) > .form-check-input{
  float:none !important;
  position:relative !important;
  flex:0 0 18px !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  margin:2px 0 0 0 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .form-check:not(.form-check-inline) > .form-check-label{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.35 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

@media (max-width: 991.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid{
    grid-template-columns:1fr !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12.col-lg-6,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12.col-6,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid > .col-12:has(> h5){
    grid-column:1 / -1 !important;
  }
}
@media (max-width: 575.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header{
    align-items:flex-start !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header > .d-flex{
    margin-left:0 !important;
    width:100% !important;
    justify-content:space-between !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text{
    min-width:112px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check{
    min-height:auto !important;
    padding:14px 15px !important;
  }
}

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:6749, instructor.php:16861, instructornuevo.php:6576 */
/*
  Capa final 100% visual.
  - No cambia IDs, names, actions ni payloads.
  - Resuelve el correo/MAC vertical en sidebar.
  - Convierte tablas en tarjetas legibles en celulares.
  - Reduce degradados repetitivos y aumenta jerarquía visual sin volverlo arcoíris.
*/
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):root{
  --bm-bg-0:#060914;
  --bm-bg-1:#0a1020;
  --bm-surface-0:#0b1322;
  --bm-surface-1:#101b2d;
  --bm-surface-2:#142238;
  --bm-surface-3:#182944;
  --bm-line:rgba(148,163,184,.18);
  --bm-line-strong:rgba(148,163,184,.30);
  --bm-cyan:#38bdf8;
  --bm-blue:#3b82f6;
  --bm-indigo:#818cf8;
  --bm-teal:#2dd4bf;
  --bm-amber:#fbbf24;
  --bm-rose:#fb7185;
  --bm-radius-xl:20px;
  --bm-radius-lg:16px;
  --bm-radius-md:13px;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) *,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) *::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) *::after{ box-sizing:border-box; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .row,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper [class^="col-"],
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper [class*=" col-"]{ min-width:0; }

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):is(html),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body{
  background:
    radial-gradient(circle at 8% -8%, rgba(56,189,248,.10), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(129,140,248,.08), transparent 30%),
    linear-gradient(180deg, var(--bm-bg-0) 0%, var(--bm-bg-1) 100%) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section{ padding-top:clamp(14px, 2vw, 26px) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .container-fluid{ width:100%; max-width:1680px; }

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{
  background:var(--bm-surface-0) !important;
  border:1px solid var(--bm-line) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.24) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section::before{
  opacity:.10 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{ background:var(--bm-surface-1) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap{ background:rgba(11,19,34,.76) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section{ background:var(--bm-surface-1) !important; }

/* Diferenciación sobria entre zonas: línea lateral, no gradientes pesados. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean{ border-left:1px solid rgba(56,189,248,.30) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft{ border-left:1px solid rgba(129,140,248,.30) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{ border-left:3px solid rgba(45,212,191,.58) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section{ border-left:3px solid rgba(56,189,248,.48) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+2){ border-left-color:rgba(129,140,248,.48) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+3){ border-left-color:rgba(45,212,191,.48) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+4){ border-left-color:rgba(251,191,36,.42) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off{ border-left-color:rgba(251,113,133,.54) !important; }

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading{
  width:100%;
  font-size:clamp(1.35rem, 4.2vw, 2.35rem) !important;
  line-height:1.1 !important;
  margin-bottom:16px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading::before{ height:clamp(26px, 6vw, 36px) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #instructor-refresh-hint{
  line-height:1.48 !important;
  border-radius:var(--bm-radius-lg) !important;
  background:rgba(12,25,43,.88) !important;
  border-color:rgba(56,189,248,.28) !important;
}

/* Sidebar alumnos: evita correo vertical y ordena email / mac / botón. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  scrollbar-gutter:stable;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar .d-flex.align-items-center.mb-2{
  gap:10px;
  min-width:0;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar .d-flex.align-items-center.mb-2 > div{ min-width:0; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .total-pill{ flex:0 0 auto; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails{ width:100%; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails li,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center !important;
  gap:10px !important;
  width:100%;
  min-width:0;
  padding:11px !important;
  background:rgba(16,27,45,.72) !important;
  border:1px solid rgba(148,163,184,.14) !important;
  border-left:3px solid transparent !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item.is-selected{
  border-left-color:rgba(56,189,248,.78) !important;
  background:rgba(18,36,58,.92) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .email-link{
  display:flex !important;
  flex-direction:column;
  gap:3px;
  min-width:0 !important;
  max-width:100%;
  overflow:hidden;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-email-text{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#eef6ff !important;
  font-weight:820;
  letter-spacing:-.01em;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-device-text{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#93a4ba !important;
  font-size:.78rem;
  font-weight:720;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:max-content;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action .badge-soft{ white-space:nowrap; }

/* Header y pestañas más adaptables. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student{
  background:var(--bm-surface-1) !important;
  border:1px solid rgba(56,189,248,.20) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student .meta{
  min-width:0;
  overflow-wrap:anywhere;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student .stats{ flex:0 0 auto; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs{
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  background:rgba(8,14,26,.72) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a{ flex:0 0 auto; }

/* Tablas: desktop limpio, mobile como tarjetas. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--bm-radius-lg) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean{
  width:100%;
  min-width:720px;
  table-layout:auto;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean th,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean td{
  word-break:normal !important;
  overflow-wrap:anywhere;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean td[style*="min-width"]{ min-width:0 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .form-select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .form-control{ min-width:0; max-width:100%; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .action-col,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions{ min-width:0; }

/* Inputs y botones táctiles. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn{ max-width:100%; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search{ font-size:16px; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-mini,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-sm{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .action-col,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tpl-actions,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner .right,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner .icons{ min-width:0; }

/* Modales más usables en celulares. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog{
  max-width:min(1120px, calc(100vw - 22px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{
  max-height:calc(100dvh - 18px);
  overflow:hidden;
  border-radius:18px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer{ flex-shrink:0; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-body{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer.sticky-footer,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sticky-footer{ flex-wrap:wrap; }

/* Plantillas y config: grillas fluidas, sin huecos raros. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .row,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid{ min-width:0; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .metric-fields{ display:flex; flex-wrap:wrap; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .metric-fields > [class^="col-"],
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .metric-fields > [class*=" col-"]{ min-width:0; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .block-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner{ background:var(--bm-surface-1) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-on,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off{
  background:var(--bm-surface-1) !important;
  box-shadow:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-on{ border-color:rgba(45,212,191,.34) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off{ border-color:rgba(251,113,133,.34) !important; }

@media (min-width: 992px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar{ max-height:calc(100dvh - 118px) !important; }
}

@media (max-width: 1199.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean{ min-width:680px; }
}

@media (max-width: 991.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar{
    position:relative !important;
    top:auto !important;
    max-height:none !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item{
    grid-template-columns:minmax(0,1fr) !important;
    align-items:stretch !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action{
    justify-content:flex-start;
    min-width:0;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action .badge-soft{ width:100%; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student{
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    align-items:start !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student .stats{ width:100%; justify-content:center; }
}

@media (max-width: 767.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section{ padding:12px 0 24px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .container-fluid{ padding-left:10px !important; padding-right:10px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #instructor-refresh-hint{ font-size:.93rem; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{ padding:14px !important; border-radius:16px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar .d-flex.align-items-center.mb-2{
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .total-pill{
    margin-left:0 !important;
    width:100%;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails{ grid-template-columns:1fr; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs{
    gap:7px;
    padding:7px;
    margin-bottom:14px;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a{
    min-height:38px;
    padding:8px 12px;
    font-size:.88rem;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header{
    gap:10px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-body{ padding:14px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid{ gap:10px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog{ margin:9px auto !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{ max-height:calc(100dvh - 18px); }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer.sticky-footer .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sticky-footer .btn{ flex:1 1 160px; }
}

@media (max-width: 640px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap{
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean{
    min-width:0 !important;
    display:block;
    width:100%;
    border-spacing:0;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean thead{ display:none !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody{ display:block; width:100%; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr{
    display:block;
    width:100%;
    margin:0 0 12px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:16px;
    overflow:hidden;
    background:var(--bm-surface-1) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr.account-notice-row,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr.template-notice-row{
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent !important;
    margin:-2px 0 12px;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr.account-notice-row td,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr.template-notice-row td{
    display:block !important;
    padding:0 !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody td{
    display:grid !important;
    grid-template-columns:minmax(105px, 36%) minmax(0,1fr);
    gap:10px;
    align-items:start;
    width:100% !important;
    min-width:0 !important;
    padding:12px 13px !important;
    border-bottom:1px solid rgba(148,163,184,.12) !important;
    background:transparent !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr td:last-child{ border-bottom:0 !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody td::before{
    content:attr(data-label);
    color:#93a4ba;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.045em;
    text-transform:uppercase;
    line-height:1.25;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody td[colspan]{
    display:block !important;
    text-align:left;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody td[colspan]::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr.account-notice-row td::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr.template-notice-row td::before{ display:none !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .action-col,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions{
    flex-direction:column;
    align-items:stretch !important;
    width:100%;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .action-col .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions form,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions form button,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean input{ width:100%; }
}

@media (max-width: 575.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-heading{ font-size:1.32rem !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-email-text{ font-size:.93rem; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-device-text{ font-size:.75rem; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item{ padding:10px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student{ padding:13px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student .stats{
    border-radius:14px !important;
    white-space:normal;
    text-align:center;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner{ padding:11px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer{ padding-left:14px !important; padding-right:14px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody td{
    grid-template-columns:1fr;
    gap:5px;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody td::before{ font-size:.69rem; }
}

@media (max-width: 380px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-sm,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-mini{ width:100%; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action{ width:100%; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .badge-soft{ width:100%; }
}

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:7200, instructor.php:17312, instructornuevo.php:7027 */
/* =========================================================
   V5 · Escala + contraste visual.
   - Paginación/scroll real del sidebar de alumnos.
   - Más contraste entre zonas sin convertir el dark mode en arcoíris.
   - Modales con jerarquía más clara.
   ========================================================= */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):root{
  --bm-page:#050814;
  --bm-shell:#071120;
  --bm-sidebar:#071827;
  --bm-zone-a:#0b1628;
  --bm-zone-b:#101d33;
  --bm-zone-c:#13243b;
  --bm-zone-d:#0d2330;
  --bm-zone-e:#1b2037;
  --bm-stroke-a:rgba(125,211,252,.34);
  --bm-stroke-b:rgba(129,140,248,.34);
  --bm-stroke-c:rgba(45,212,191,.32);
  --bm-stroke-d:rgba(251,191,36,.28);
  --bm-stroke-danger:rgba(251,113,133,.40);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper{
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,.10), transparent 27%),
    radial-gradient(circle at 100% 0%, rgba(129,140,248,.08), transparent 30%),
    linear-gradient(180deg, #050814 0%, #08111f 48%, #030712 100%) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #instructor-refresh-hint{
  background:linear-gradient(90deg, rgba(8,30,49,.96), rgba(17,24,39,.96)) !important;
  border:1px solid rgba(56,189,248,.38) !important;
  border-left:5px solid #38bdf8 !important;
  box-shadow:0 16px 34px rgba(2,6,23,.30) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar.card-clean{
  background:var(--bm-sidebar) !important;
  border:1px solid rgba(56,189,248,.24) !important;
  border-left:4px solid rgba(56,189,248,.68) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.34) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean:not(.sidebar){
  background:var(--bm-zone-a) !important;
  border-color:rgba(129,140,248,.25) !important;
  border-left:4px solid rgba(129,140,248,.58) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft{
  background:var(--bm-zone-b) !important;
  border-color:rgba(56,189,248,.22) !important;
  border-left:4px solid rgba(56,189,248,.48) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap{
  background:var(--bm-zone-b) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.25) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean thead th{
  background:#17243a !important;
  color:#eaf6ff !important;
  border-bottom:1px solid rgba(125,211,252,.24) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr:nth-child(odd){ background:rgba(15,23,42,.56) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr:nth-child(even){ background:rgba(30,41,59,.32) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr:hover{ background:rgba(56,189,248,.08) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student{
  background:#0e2036 !important;
  border:1px solid rgba(45,212,191,.28) !important;
  border-left:5px solid rgba(45,212,191,.74) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.25) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs{
  background:#081827 !important;
  border-color:rgba(125,211,252,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a{
  background:rgba(15,23,42,.68) !important;
  border-color:rgba(148,163,184,.14) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a.active{
  background:#38bdf8 !important;
  color:#02111d !important;
  box-shadow:0 13px 28px rgba(56,189,248,.24) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section{
  background:var(--bm-zone-b) !important;
  border:1px solid var(--bm-stroke-a) !important;
  border-left:5px solid rgba(56,189,248,.68) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.23) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+2){
  background:var(--bm-zone-e) !important;
  border-color:var(--bm-stroke-b) !important;
  border-left-color:rgba(129,140,248,.74) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+3){
  background:var(--bm-zone-d) !important;
  border-color:var(--bm-stroke-c) !important;
  border-left-color:rgba(45,212,191,.70) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+4){
  background:#171b2d !important;
  border-color:var(--bm-stroke-d) !important;
  border-left-color:rgba(251,191,36,.62) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off{
  background:#211827 !important;
  border-color:var(--bm-stroke-danger) !important;
  border-left-color:rgba(251,113,133,.76) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .block-header{
  background:rgba(2,6,23,.28) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{
  background:#0d1c2e !important;
  border:1px solid rgba(45,212,191,.26) !important;
  border-left:5px solid rgba(45,212,191,.75) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card{
  background:#101b2e !important;
  border-color:rgba(148,163,184,.22) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-on{
  background:#0d2a2a !important;
  border-color:rgba(45,212,191,.40) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off{
  background:#2a1823 !important;
  border-color:rgba(251,113,133,.44) !important;
}
/* Sidebar escalable */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-panel-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-search-wrap{
  position:relative;
  min-width:0;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-search-form{ margin:0; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-total-pill{
  margin-left:0 !important;
  background:#10243a !important;
  border-color:rgba(56,189,248,.36) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:12px 0 8px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-count-meta{
  color:#9fb5d1 !important;
  font-size:.75rem;
  font-weight:800;
  white-space:nowrap;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-card{
  margin:8px 0 12px;
  padding:12px;
  border-radius:14px;
  background:#0b2a35;
  border:1px solid rgba(45,212,191,.34);
  border-left:4px solid rgba(45,212,191,.86);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-kicker{
  color:#99f6e4 !important;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:3px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-email{
  color:#f8fbff !important;
  font-weight:850;
  overflow-wrap:anywhere;
  line-height:1.25;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-mac,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-note{
  color:#b6c8de !important;
  font-size:.78rem;
  margin-top:4px;
  overflow-wrap:anywhere;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 10px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:850;
  border:1px solid rgba(56,189,248,.26);
  background:#0c2034;
  color:#dff6ff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-btn:hover{
  background:#113151;
  border-color:rgba(125,211,252,.54);
  color:#fff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-btn.is-disabled{
  opacity:.46;
  cursor:not-allowed;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-status{
  background:#121b2d;
  color:#b6c8de !important;
  border-color:rgba(148,163,184,.18);
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails{
  max-height:min(54vh, 560px);
  overflow:auto;
  padding-right:4px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails .empty-student-row{
  display:block !important;
  background:#111827 !important;
  border-style:dashed !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item{
  background:#0d1b2e !important;
  border-color:rgba(148,163,184,.18) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item:nth-child(even){ background:#102035 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item.is-selected{
  background:#0b2a35 !important;
  border-color:rgba(45,212,191,.45) !important;
  box-shadow:0 10px 24px rgba(45,212,191,.08) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-email-text{ color:#f8fbff !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-device-text{ color:#a9bdd5 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-help{
  padding:10px 11px;
  border-radius:12px;
  background:#0a1526;
  border:1px solid rgba(148,163,184,.14);
}
/* Modales: más contraste entre cabecera, cuerpo y footer */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-backdrop.show{ opacity:.74 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{
  background:#081120 !important;
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.60) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-header{
  background:#0f2035 !important;
  border-bottom:1px solid rgba(125,211,252,.20) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-body{
  background:#0a1424 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer.sticky-footer{
  background:#0f1b2d !important;
  border-top:1px solid rgba(148,163,184,.16) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-title{ color:#f8fbff !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero{
  border-radius:18px !important;
  border:1px solid rgba(125,211,252,.20) !important;
  background:#102035 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.success{
  background:#0b2b2a !important;
  border-color:rgba(45,212,191,.38) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.error,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.danger{
  background:#2a1823 !important;
  border-color:rgba(251,113,133,.42) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.info{
  background:#0c2038 !important;
  border-color:rgba(56,189,248,.38) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-primary{
  background:#38bdf8 !important;
  border-color:#7dd3fc !important;
  color:#03111f !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-detail-ghost{
  background:#10243a !important;
  border-color:rgba(56,189,248,.42) !important;
  color:#dff6ff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-secondary{
  background:#182338 !important;
  border-color:rgba(148,163,184,.28) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-danger,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-cancel-mini{
  background:#2a1823 !important;
  border-color:rgba(251,113,133,.44) !important;
}
@media (max-width: 991.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-panel-head{ grid-template-columns:1fr; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-total-pill{ width:100%; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails{
    display:block !important;
    max-height:40vh;
    overflow:auto;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item{ margin-bottom:8px; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar.card-clean{ max-height:none !important; }
}
@media (max-width: 575.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-pagination{ align-items:stretch; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-status{ flex:1 1 100%; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails{ max-height:36vh; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-heading-row{ align-items:flex-start; flex-direction:column; }
}

/* Ajuste final: más contraste real entre zonas y estado de carga del listado de alumnos. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):root{
  --bm-surface-sidebar:#061a2b;
  --bm-surface-main:#0b1424;
  --bm-surface-panel:#12213a;
  --bm-surface-panel-alt:#18233e;
  --bm-surface-panel-cool:#0b2730;
  --bm-surface-panel-warm:#201c31;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar.card-clean{
  background:var(--bm-surface-sidebar) !important;
  border-color:rgba(56,189,248,.42) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean:not(.sidebar){
  background:var(--bm-surface-main) !important;
  border-color:rgba(129,140,248,.34) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap{
  background:var(--bm-surface-panel) !important;
  border-color:rgba(56,189,248,.30) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+1){ background:var(--bm-surface-panel) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+2){ background:var(--bm-surface-panel-alt) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+3){ background:var(--bm-surface-panel-cool) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+4){ background:var(--bm-surface-panel-warm) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{
  background:#0b2630 !important;
  border-color:rgba(45,212,191,.40) !important;
  box-shadow:0 20px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student{
  background:#102742 !important;
  border-color:rgba(45,212,191,.42) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{
  background:#07101d !important;
  border-color:rgba(125,211,252,.36) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-header{ background:#10243a !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-body{ background:#091827 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer.sticky-footer{ background:#111f34 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero{ background:#13243b !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item{
  background:#10233a !important;
  border-color:rgba(125,211,252,.24) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item:nth-child(even){ background:#152b45 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item:hover{
  background:#173655 !important;
  border-color:rgba(125,211,252,.45) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item.is-selected{
  background:#0d3438 !important;
  border-color:rgba(45,212,191,.62) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-btn{
  background:#12304e !important;
  border-color:rgba(56,189,248,.42) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-btn:hover{ background:#18466f !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-status{ background:#111d31 !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #bm-students-sidebar-card{ position:relative; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #bm-students-sidebar-card.is-loading-students::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(3,7,18,.34);
  backdrop-filter:blur(1.5px);
  pointer-events:none;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #bm-students-sidebar-card.is-loading-students::before{
  content:"Actualizando…";
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:9px 13px;
  border-radius:999px;
  background:#0f2b45;
  border:1px solid rgba(125,211,252,.44);
  color:#e0f2fe;
  font-size:.78rem;
  font-weight:900;
  box-shadow:0 14px 32px rgba(0,0,0,.38);
}

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:7627, instructor.php:17739, instructornuevo.php:7454 */
/* =========================================================
   V6 · Contraste sobrio y consistente
   - Misma función = mismo color.
   - El contraste sale de superficies, bordes, sombra y espaciado.
   - El color se reserva para estados: activo, desactivado, peligro, éxito y acción.
   ========================================================= */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):root{
  --bm-page-bg:#050812;
  --bm-shell-bg:#070d19;
  --bm-surface-sidebar:#081320;
  --bm-surface-main:#0c1524;
  --bm-surface-card:#111d31;
  --bm-surface-card-2:#16233a;
  --bm-surface-raised:#1b2a44;
  --bm-surface-modal:#08111f;
  --bm-border-soft:rgba(148,163,184,.16);
  --bm-border:rgba(148,163,184,.25);
  --bm-border-strong:rgba(148,163,184,.36);
  --bm-text-main:#eef4ff;
  --bm-text-secondary:#cbd7e8;
  --bm-text-muted:#93a4ba;
  --bm-accent:#38bdf8;
  --bm-accent-strong:#0ea5e9;
  --bm-success:#22c55e;
  --bm-danger:#f43f5e;
  --bm-warning:#f59e0b;
  --bm-radius-xl:20px;
  --bm-radius-lg:16px;
  --bm-radius-md:12px;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):is(html),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body .main-wrapper{
  background:
    radial-gradient(circle at 14% -10%, rgba(56,189,248,.075), transparent 28%),
    linear-gradient(180deg, var(--bm-page-bg) 0%, #08101e 48%, #040711 100%) !important;
  color:var(--bm-text-main) !important;
}

/* Superficies: contraste sobrio, sin arcoíris. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar.card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .block-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner{
  background-image:none !important;
  color:var(--bm-text-main) !important;
  border-color:var(--bm-border-soft) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar.card-clean{
  background:var(--bm-surface-sidebar) !important;
  border:1px solid rgba(56,189,248,.22) !important;
  border-left:4px solid rgba(56,189,248,.58) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean:not(.sidebar){
  background:var(--bm-surface-main) !important;
  border:1px solid var(--bm-border-soft) !important;
  border-left:4px solid rgba(148,163,184,.32) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap{
  background:var(--bm-surface-card) !important;
  border:1px solid var(--bm-border) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{
  background:var(--bm-surface-card) !important;
  border:1px solid var(--bm-border) !important;
  border-left:4px solid rgba(56,189,248,.48) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student{
  background:var(--bm-surface-card-2) !important;
  border:1px solid rgba(56,189,248,.24) !important;
  border-left:4px solid rgba(56,189,248,.56) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.24) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content::before{
  opacity:0 !important;
  content:none !important;
}

/* Plantillas: todos los bloques equivalentes iguales. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+1),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+2),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+3),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section:nth-of-type(4n+4),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section:nth-of-type(4n+1),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section:nth-of-type(4n+2),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section:nth-of-type(4n+3),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section:nth-of-type(4n+4){
  background:var(--bm-surface-card) !important;
  border:1px solid var(--bm-border) !important;
  border-left:4px solid rgba(56,189,248,.48) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header{
  background:var(--bm-surface-card-2) !important;
  border-bottom:1px solid var(--bm-border-soft) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-body{
  background:rgba(8,13,25,.22) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-title{
  color:var(--bm-text-main) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-title::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-title::before{
  background:var(--bm-accent) !important;
  box-shadow:none !important;
}

/* Estados de plantilla: activo y desactivado consistentes en todos los bloques. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header .help-text{
  background:#0b1322 !important;
  border:1px solid var(--bm-border) !important;
  color:var(--bm-text-secondary) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text.is-on-label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header .help-text.is-on-label{
  color:#dcfce7 !important;
  background:rgba(34,197,94,.16) !important;
  border-color:rgba(34,197,94,.36) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text.is-off-label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header .help-text.is-off-label{
  color:#ffe4e6 !important;
  background:rgba(244,63,94,.14) !important;
  border-color:rgba(244,63,94,.34) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off{
  background:#101827 !important;
  border:1px dashed rgba(244,63,94,.32) !important;
  border-left:4px solid rgba(244,63,94,.58) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-header{
  background:#141a28 !important;
  border-bottom-color:rgba(244,63,94,.16) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-title{
  color:rgba(226,232,240,.74) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-title::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-title::before{
  background:rgba(244,63,94,.68) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-body{
  opacity:.64 !important;
  filter:none !important;
}

/* Gestor emocional: tarjetas homogéneas, no multicolor. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid h5{
  background:var(--bm-surface-card-2) !important;
  border:1px solid var(--bm-border-soft) !important;
  color:var(--bm-text-main) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .form-check:not(.form-check-inline){
  background:#0d1727 !important;
  border:1px solid var(--bm-border-soft) !important;
  color:var(--bm-text-secondary) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper .form-check:not(.form-check-inline):hover{
  background:#132035 !important;
  border-color:var(--bm-border-strong) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-input:checked{
  background-color:var(--bm-accent-strong) !important;
  border-color:var(--bm-accent) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-on,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off{
  background:var(--bm-surface-card-2) !important;
  border:1px solid var(--bm-border) !important;
  border-left:4px solid rgba(148,163,184,.38) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-on{ border-left-color:rgba(34,197,94,.68) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card.is-off{ border-left-color:rgba(244,63,94,.68) !important; }

/* Alumnos: lista compacta y sobria. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-total-pill,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-status{
  background:#0d1727 !important;
  border-color:var(--bm-border-soft) !important;
  color:var(--bm-text-secondary) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-btn{
  background:#102033 !important;
  border-color:rgba(56,189,248,.28) !important;
  color:#dff6ff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-btn:hover{
  background:#17314d !important;
  border-color:rgba(56,189,248,.50) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item:nth-child(even){
  background:#0d1727 !important;
  border-color:var(--bm-border-soft) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item:hover{
  background:#142238 !important;
  border-color:rgba(56,189,248,.34) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-item.is-selected{
  background:#10263a !important;
  border-color:rgba(56,189,248,.42) !important;
  border-left-color:rgba(56,189,248,.78) !important;
  box-shadow:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-card{
  background:#102033 !important;
  border:1px solid rgba(56,189,248,.26) !important;
  border-left:4px solid rgba(56,189,248,.68) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-kicker{ color:#bae6fd !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-email{ color:var(--bm-text-main) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-mac{ color:var(--bm-text-muted) !important; }

/* Tablas y pestañas: un solo patrón visual. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs{
  background:#081320 !important;
  border:1px solid var(--bm-border-soft) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a{
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--bm-text-secondary) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a:hover{
  background:#111d31 !important;
  border-color:var(--bm-border-soft) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a.active{
  background:var(--bm-accent) !important;
  border-color:var(--bm-accent) !important;
  color:#04111d !important;
  box-shadow:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean thead th{
  background:#16233a !important;
  color:var(--bm-text-main) !important;
  border-bottom:1px solid var(--bm-border) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr:nth-child(odd),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr:nth-child(even){
  background:#0f1a2b !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean tbody tr:hover{ background:#142238 !important; }

/* Botones: color por función, no decorativo. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-primary{
  background:var(--bm-accent) !important;
  border-color:#7dd3fc !important;
  color:#03111f !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-primary:hover{
  background:#7dd3fc !important;
  border-color:#bae6fd !important;
  color:#03111f !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-detail-ghost{
  background:#102033 !important;
  border-color:rgba(56,189,248,.36) !important;
  color:#dff6ff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-primary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-detail-ghost:hover{
  background:#17314d !important;
  border-color:rgba(56,189,248,.56) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-secondary{
  background:#151f32 !important;
  border-color:var(--bm-border) !important;
  color:var(--bm-text-secondary) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-danger,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-cancel-mini{
  background:rgba(244,63,94,.10) !important;
  border-color:rgba(244,63,94,.38) !important;
  color:#ffe4e6 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-danger:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-cancel-mini:hover{
  background:rgba(244,63,94,.18) !important;
  border-color:rgba(244,63,94,.55) !important;
}

/* Modales: centrados horizontal y verticalmente también en móvil. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal.show{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal.show .modal-dialog,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog.modal-dialog-scrollable,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog.modal-dialog-centered{
  width:min(1120px, calc(100vw - 20px)) !important;
  max-width:min(1120px, calc(100vw - 20px)) !important;
  min-height:0 !important;
  max-height:calc(100dvh - 20px) !important;
  margin:auto !important;
  display:flex !important;
  align-items:center !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog.modal-md{ width:min(560px, calc(100vw - 20px)) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog.modal-lg{ width:min(900px, calc(100vw - 20px)) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog.modal-xl{ width:min(1180px, calc(100vw - 20px)) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{
  width:100% !important;
  max-height:calc(100dvh - 20px) !important;
  background:var(--bm-surface-modal) !important;
  border:1px solid rgba(56,189,248,.26) !important;
  border-radius:18px !important;
  box-shadow:0 28px 80px rgba(0,0,0,.58) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-header{
  background:#111d31 !important;
  border-bottom:1px solid var(--bm-border-soft) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-body{
  background:#0b1424 !important;
  overflow:auto !important;
  min-height:0 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer.sticky-footer{
  background:#111d31 !important;
  border-top:1px solid var(--bm-border-soft) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.success,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.info,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.error,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.danger{
  background:#111d31 !important;
  border:1px solid var(--bm-border) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.success{ border-left:4px solid rgba(34,197,94,.72) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.info{ border-left:4px solid rgba(56,189,248,.72) !important; }
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.error,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-hero.danger{ border-left:4px solid rgba(244,63,94,.72) !important; }

/* Mobile: modal realmente usable y centrado. */
@media (max-width: 767.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal.show{ padding:8px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal.show .modal-dialog,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog.modal-dialog-scrollable,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog.modal-dialog-centered{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
    margin:auto !important;
    align-items:center !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{ max-height:calc(100dvh - 16px) !important; border-radius:16px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-header{ padding:13px 14px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-body{ padding:14px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer.sticky-footer{ padding:12px 14px !important; }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section{ border-left-width:3px !important; }
}

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:8024, instructor.php:18136, instructornuevo.php:7851 */
/* =========================================================
   V7 · Ajustes finales solicitados
   - Sidebar de alumnos alineado con la columna principal.
   - Acciones al 100% en pantallas pequeñas.
   - Headers de secciones de plantilla ordenados en móvil.
   ========================================================= */

/* Alineación general de las dos columnas principales */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section > .container-fluid > .row.g-3{
  align-items:flex-start !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section > .container-fluid > .row.g-3 > [class*="col-lg-3"],
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section > .container-fluid > .row.g-3 > [class*="col-lg-9"]{
  align-self:flex-start !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #bm-students-sidebar-card{
  margin-top:0 !important;
}
@media (min-width: 992px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #bm-students-sidebar-card.sidebar,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar.card-clean{
    position:sticky !important;
    top:18px !important;
  }
}

/* En el panel de alumnos no debe sentirse separado ni hundido respecto al contenido. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-panel-head,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar-heading-row,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-pagination{
  margin-top:0 !important;
}

/* Formularios de cuenta: plantilla vinculada + acción deben ocupar bien el ancho disponible. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean td form.d-flex.align-items-center{
  width:100% !important;
  gap:10px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .bm-template-select{
  width:100% !important;
  max-width:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .action-col,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions{
  width:100% !important;
}

/* Header de secciones: patrón único y serio. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  text-align:left !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-title{
  margin:0 !important;
  min-width:0 !important;
  text-align:left !important;
  line-height:1.18 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header > .d-flex,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header > .d-flex{
  justify-self:end !important;
  align-self:center !important;
  flex:0 0 auto !important;
  margin:0 !important;
  min-width:0 !important;
}

@media (max-width: 767.98px){
  /* Evita que el sidebar deje un hueco raro sobre el contenido en móvil/tablet. */
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #bm-students-sidebar-card.sidebar,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar.card-clean{
    position:relative !important;
    top:auto !important;
    margin-top:0 !important;
  }

  /* En teléfono, los controles de acciones deben ocupar todo el ancho y verse uniformes. */
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean td form.d-flex.align-items-center{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    gap:10px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean td form.d-flex.align-items-center .form-select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean td form.d-flex.align-items-center .bm-template-select{
    width:100% !important;
    max-width:none !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .action-col,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner .right{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:8px !important;
    width:100% !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .action-col .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions form,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-clean .tpl-actions form button,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner .right .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner .right form,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner .right form button,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-detail-ghost,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-cancel-mini{
    width:100% !important;
    max-width:none !important;
  }

  /* Header de las secciones dentro del modal: título arriba, estado debajo, ambos alineados. */
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header{
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:stretch !important;
    padding:14px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header > .d-flex,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header > .d-flex{
    width:100% !important;
    justify-self:stretch !important;
    justify-content:space-between !important;
    padding:9px 10px !important;
    border-radius:12px !important;
    background:#0d1727 !important;
    border:1px solid rgba(148,163,184,.22) !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header .help-text,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text{
    margin:0 !important;
    text-align:left !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .switch,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .switch{
    flex:0 0 auto !important;
  }
}

@media (max-width: 575.98px){
  /* Botones de navegación/alumnos uniformes en teléfono. */
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action .btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-list-action .badge-soft{
    width:100% !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-pagination{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-btn,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-page-status{
    width:100% !important;
    justify-content:center !important;
  }

  /* Evita que títulos largos empujen o descoordinen el switch. */
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-title{
    font-size:.92rem !important;
    letter-spacing:.02em !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }
}

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:9684, instructor.php:19704, instructornuevo.php:9417 */
/*
  Objetivo: contraste por jerarquía, no por arcoíris.
  Escala única:
  - Fondo general: muy oscuro.
  - Tarjetas/secciones: más claras.
  - Cuerpos internos: superficie intermedia.
  - Inputs/controles: claramente más claros y con borde visible.
  - Estados funcionales: azul acción, verde activado, gris/rojo suave desactivado, rojo peligro.
*/
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):root{
  --bm-final-bg:#050914;
  --bm-final-page:#07101d;
  --bm-final-sidebar:#0d1728;
  --bm-final-card:#121f33;
  --bm-final-card-2:#172840;
  --bm-final-card-3:#1d314d;
  --bm-final-input:#223653;
  --bm-final-input-focus:#2a4365;
  --bm-final-input-disabled:#141f31;
  --bm-final-border:#38506f;
  --bm-final-border-soft:#2a3d59;
  --bm-final-text:#f3f7ff;
  --bm-final-text-2:#d7e2f2;
  --bm-final-muted:#aab9cc;
  --bm-final-primary:#3b82f6;
  --bm-final-primary-hover:#60a5fa;
  --bm-final-primary-soft:#153763;
  --bm-final-success:#22c55e;
  --bm-final-success-soft:#173b2a;
  --bm-final-danger:#ef4444;
  --bm-final-danger-soft:#3a1720;
  --bm-final-warning:#f59e0b;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]):is(html),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body{
  background:var(--bm-final-bg) !important;
  color:var(--bm-final-text) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .main-wrapper,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .container-fluid{
  background:var(--bm-final-page) !important;
  color:var(--bm-final-text) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section{
  background:
    linear-gradient(180deg, rgba(7,16,29,.98), rgba(5,9,20,.98)) !important;
}

/* Contenedores principales: claramente separados del fondo. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .students-panel,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .bm-students-panel,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .active-student-card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .pending-row-banner,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .protect-card{
  background:var(--bm-final-card) !important;
  border:1px solid var(--bm-final-border-soft) !important;
  color:var(--bm-final-text) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.34) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form{
  border-top-color:rgba(115,145,185,.52) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-grid h5,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .header-student,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails li,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .email-row,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-row,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .history-card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .account-card,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-card{
  background:var(--bm-final-card-2) !important;
  border:1px solid var(--bm-final-border-soft) !important;
  color:var(--bm-final-text) !important;
}

/* Sidebar/listado de alumnos: zona propia, no una masa oscura infinita. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .sidebar{
  background:var(--bm-final-sidebar) !important;
  border-color:var(--bm-final-border) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails li,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .email-row,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-row,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-card{
  background:#16243a !important;
  border-color:#334965 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .list-emails li:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .email-row:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-row:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-card:hover{
  background:#1c2d48 !important;
  border-color:#4c6b92 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .email-link,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-email,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .student-meta,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .mac-text{
  color:var(--bm-final-text) !important;
}

/* Inputs y selects: SIEMPRE más claros que el fondo y que las tarjetas. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) textarea.form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) input[type="text"].form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) input[type="number"].form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) input[type="search"].form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) input[type="email"].form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) input[type="tel"].form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) input[type="url"].form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #template_name,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #instInput,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-input{
  background:var(--bm-final-input) !important;
  color:var(--bm-final-text) !important;
  border:1px solid var(--bm-final-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.02) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) textarea.form-control:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #template_name:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #instInput:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-input:hover{
  background:#273c5d !important;
  border-color:#58759b !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search:focus,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control:focus,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select:focus,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) textarea.form-control:focus,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #template_name:focus,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #instInput:focus,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-input:focus{
  background:var(--bm-final-input-focus) !important;
  border-color:#7fb3e8 !important;
  color:#ffffff !important;
  box-shadow:0 0 0 .22rem rgba(59,130,246,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control::placeholder,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search::placeholder{
  color:#c2d0e4 !important;
  opacity:.74 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) label{
  color:var(--bm-final-text-2) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .help-text,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .text-muted,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .small.text-muted,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .desc,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .subtle,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .meta{
  color:var(--bm-final-muted) !important;
}

/* Checks: el contenedor también debe distinguirse de la caja donde vive. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .day-chip,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .news-grid .form-check,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checkbox-card{
  background:#1b2d47 !important;
  border:1px solid #3a5272 !important;
  color:var(--bm-final-text) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .form-check:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .day-chip:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .news-grid .form-check:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .checkbox-card:hover{
  background:#223756 !important;
  border-color:#55749c !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-input{
  background-color:#0a1220 !important;
  border:2px solid #7890ad !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-input:checked{
  background-color:var(--bm-final-primary) !important;
  border-color:#93c5fd !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-check-input:focus{
  box-shadow:0 0 0 .22rem rgba(59,130,246,.25) !important;
}

/* Botones: acciones visibles y no confundibles con el fondo. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button.btn-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a.btn-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-primary{
  background:var(--bm-final-primary) !important;
  border:1px solid #93c5fd !important;
  color:#ffffff !important;
  box-shadow:0 10px 24px rgba(59,130,246,.22) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-primary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button.btn-primary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a.btn-primary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content .btn-primary:hover{
  background:var(--bm-final-primary-hover) !important;
  border-color:#bfdbfe !important;
  color:#06111f !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-detail-ghost,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-add,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #btnAddRange,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button.btn-outline-primary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a.btn-outline-primary{
  background:#173b65 !important;
  border:1px solid #5fa8e8 !important;
  color:#e8f5ff !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-primary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-detail-ghost:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-add:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #btnAddRange:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button.btn-outline-primary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a.btn-outline-primary:hover{
  background:#245587 !important;
  border-color:#9bd3ff !important;
  color:#ffffff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-secondary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a.btn-outline-secondary,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button.btn-outline-secondary{
  background:#202e43 !important;
  border:1px solid #5b708f !important;
  color:#edf4ff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-secondary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a.btn-outline-secondary:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button.btn-outline-secondary:hover{
  background:#2b3d59 !important;
  border-color:#8399b8 !important;
  color:#ffffff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-danger,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-cancel-mini,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button.btn-outline-danger,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a.btn-outline-danger{
  background:#3a1720 !important;
  border:1px solid #fb7185 !important;
  color:#ffe4e6 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-outline-danger:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn-cancel-mini:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button.btn-outline-danger:hover,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) a.btn-outline-danger:hover{
  background:#5b1e2b !important;
  border-color:#fecdd3 !important;
  color:#ffffff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) button:disabled,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn:disabled,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .btn.disabled,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control:disabled,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select:disabled,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control[readonly]{
  background:var(--bm-final-input-disabled) !important;
  border-color:#29384d !important;
  color:#8fa0b8 !important;
  opacity:1 !important;
  box-shadow:none !important;
}

/* FIX UI: scroll visible para combobox/selects con muchos datos.
   Mantiene el dark mode, pero fuerza contraste del scrollbar del desplegable/lista. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select[size],
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select[multiple],
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .bm-template-select{
  scrollbar-width:thin !important;
  scrollbar-color:#93c5fd #0a1220 !important;
  color-scheme:dark !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select option{
  background-color:#0f1d33 !important;
  color:#f3f7ff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select option:checked,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select option:focus{
  background:#285c9a !important;
  color:#ffffff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select option:hover{
  background:#223f66 !important;
  color:#ffffff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select::-webkit-scrollbar{
  width:14px !important;
  height:14px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select::-webkit-scrollbar-track{
  background:#0a1220 !important;
  border-left:1px solid #38506f !important;
  border-radius:999px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #bfdbfe, #3b82f6) !important;
  border:3px solid #0a1220 !important;
  border-radius:999px !important;
  min-height:32px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #ffffff, #60a5fa) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) select.form-select::-webkit-scrollbar-corner{
  background:#0a1220 !important;
}

/* Tabs: seleccionado inequívoco. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs{
  background:#101b2d !important;
  border-color:#314864 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a{
  color:#c7d5e8 !important;
  background:transparent !important;
  border-color:transparent !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a.active{
  background:#285c9a !important;
  border-color:#7eb9f2 !important;
  color:#ffffff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .tabs a:hover:not(.active){
  background:#1b2d47 !important;
  border-color:#456486 !important;
  color:#ffffff !important;
}

/* Plantillas: bloques iguales por función, con contraste por superficie. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section{
  background:#132238 !important;
  border:1px solid #3a5272 !important;
  border-left:4px solid #4f8dcc !important;
  box-shadow:0 14px 34px rgba(0,0,0,.30) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header{
  background:#1b2c46 !important;
  border-bottom:1px solid #3c5678 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-body{
  background:#101b2d !important;
  border-top:1px solid rgba(255,255,255,.035) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-title{
  color:var(--bm-final-text) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-title::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-title::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-title::before{
  background:#60a5fa !important;
}

/* Estado Activado/Desactivado: mismo patrón en todas las secciones. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header .help-text{
  background:#152338 !important;
  border:1px solid #405a7a !important;
  color:#dbeafe !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text.is-on-label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header .help-text.is-on-label{
  background:var(--bm-final-success-soft) !important;
  border-color:#3f8d5a !important;
  color:#dcfce7 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-header .help-text.is-off-label,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-header .help-text.is-off-label{
  background:#222a36 !important;
  border-color:#64748b !important;
  color:#cbd5e1 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off{
  background:#101722 !important;
  border:1px dashed #526172 !important;
  border-left:4px solid #64748b !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-header,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-header{
  background:#17202c !important;
  border-bottom-color:#384658 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-title,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-title{
  color:#b8c4d3 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-title::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-title::before{
  background:#64748b !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body{
  background:#0d1420 !important;
  opacity:1 !important;
  filter:none !important;
  position:relative !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-body > *,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body > *{
  opacity:.50 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-body::before,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  background:rgba(5,9,20,.18);
  cursor:not-allowed;
  border-radius:0 0 16px 16px;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-body::after,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body::after,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen::after,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .section-body.is-frozen::after{
  content:"Sección desactivada" !important;
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  z-index:21 !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:28px !important;
  padding:0 11px !important;
  border-radius:999px !important;
  background:#263244 !important;
  border:1px solid #64748b !important;
  color:#e2e8f0 !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-body.is-frozen::after{
  display:inline-flex !important;
}

/* Bloqueo visual y funcional: el body desactivado no recibe clicks. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body{
  pointer-events:none !important;
  user-select:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen *,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body *{
  pointer-events:none !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen input:not([type="hidden"]),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen textarea,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen button,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body input:not([type="hidden"]),
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body textarea,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body button{
  cursor:not-allowed !important;
}

/* Instrumentos seleccionados: contenedor y chips claramente visibles. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-list-wrap{
  background:#14233a !important;
  border:1px solid #425c7d !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-list-head{
  background:#1e314e !important;
  color:#f3f7ff !important;
  border-bottom:1px solid #4a6689 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-list{
  background:#0f1a2b !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-list li{
  background:#223855 !important;
  border:1px solid #55749c !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-code{
  color:#ffffff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-del{
  background:#3a1720 !important;
  border-color:#fb7185 !important;
  color:#ffe4e6 !important;
}

/* Tablas: encabezado, cuerpo y hover diferenciados. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) table{
  color:var(--bm-final-text) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table thead th,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) table thead th{
  background:#1d314d !important;
  color:#ffffff !important;
  border-bottom:1px solid #58759b !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table tbody td,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) table tbody td{
  background:#111f33 !important;
  border-color:#2f4562 !important;
  color:#eaf1fb !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table tbody tr:hover td,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) table tbody tr:hover td{
  background:#1a2c46 !important;
}

/* FIX UI: los modales siempre deben quedar por encima del widget flotante
   “Habla con BRUNO MEZA” incluido desde footer.php/chatgpt.php. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-backdrop{
  z-index:29990 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal.show{
  z-index:30000 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body.modal-open .bm-floating,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body.modal-open .bm-actions,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) body.modal-open .bm-chatbox{
  z-index:1000 !important;
  pointer-events:none !important;
}

/* Modales: centrados reales y con contraste interno. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal{
  --bs-modal-bg:var(--bm-final-card) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal.show{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog-centered,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog-scrollable{
  margin:auto !important;
  max-height:calc(100dvh - 24px) !important;
  width:min(100%, var(--bs-modal-width, 900px)) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog-scrollable .modal-content,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content{
  max-height:calc(100dvh - 24px) !important;
  background:#101b2d !important;
  border:1px solid #45617f !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-header{
  background:#1b2d47 !important;
  border-bottom:1px solid #45617f !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-body{
  background:#0c1524 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-footer{
  background:#14233a !important;
  border-top:1px solid #45617f !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-title{
  color:#ffffff !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-backdrop.show{
  opacity:.78 !important;
}

/* Responsive: mantener contraste en móvil sin aplastar formularios. */
@media (max-width: 575.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-clean,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .card-soft,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .table-wrap,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section{
    border-color:#405a7a !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section .section-body,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section .section-body{
    padding:14px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-control,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .form-select,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .input-search{
    min-height:46px !important;
    font-size:1rem !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .inst-box{
    gap:8px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal.show{
    align-items:center !important;
    padding:8px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog-centered,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog-scrollable{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-content,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .modal-dialog-scrollable .modal-content{
    max-height:calc(100dvh - 16px) !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .template-section.off .section-body::after,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #tplEditorModal .template-section.off .section-body::after,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .section-body.is-frozen::after{
    top:8px !important;
    right:8px !important;
    font-size:.66rem !important;
  }
}

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:10331, instructornuevo.php:10064 */
/*
  Capa exclusivamente visual para la pestaña Gestor emocional.
  No modifica nombres, IDs, acciones, valores ni lógica de guardado.
*/
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-sections{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  min-width:0 !important;
  gap:16px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:18px !important;
  border-radius:18px !important;
  background:#14233a !important;
  border:1px solid #354d6d !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
  overflow:hidden !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section-header{
  display:flex !important;
  align-items:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  gap:13px !important;
  margin:0 0 14px !important;
  padding:0 0 14px !important;
  border-bottom:1px solid rgba(107,137,176,.28) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 36px !important;
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  border-radius:11px !important;
  background:#203a5c !important;
  border:1px solid #48698f !important;
  color:#dceeff !important;
  font-size:.82rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section-icon svg{
  width:19px !important;
  height:19px !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section-heading{
  flex:1 1 auto !important;
  min-width:0 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section-heading h5{
  display:block !important;
  min-height:0 !important;
  margin:0 0 4px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#f8fbff !important;
  font-size:1.02rem !important;
  font-weight:850 !important;
  line-height:1.25 !important;
  letter-spacing:-.015em !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section-heading p{
  margin:0 !important;
  color:#aebed2 !important;
  font-size:.88rem !important;
  line-height:1.45 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-options-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  width:100% !important;
  min-width:0 !important;
  gap:12px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-options-grid--single{
  grid-template-columns:minmax(0, 1fr) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form label.bm-config-option.form-check{
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:82px !important;
  margin:0 !important;
  padding:16px 17px !important;
  gap:12px !important;
  border-radius:14px !important;
  background:#1b2d47 !important;
  border:1px solid #3a5272 !important;
  color:#e8f0fa !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form label.bm-config-option.form-check:hover{
  background:#213957 !important;
  border-color:#5f7fa6 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18) !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form label.bm-config-option.form-check:has(.form-check-input:checked){
  background:#183651 !important;
  border-color:#4d8fc4 !important;
  box-shadow:inset 3px 0 0 #60a5fa !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form label.bm-config-option.form-check > .form-check-input{
  position:relative !important;
  float:none !important;
  flex:0 0 20px !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  margin:1px 0 0 !important;
  padding:0 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-option-copy{
  display:flex !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  flex-direction:column !important;
  gap:4px !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-option-title{
  display:block !important;
  min-width:0 !important;
  color:#edf5ff !important;
  font-size:.94rem !important;
  font-weight:760 !important;
  line-height:1.36 !important;
  letter-spacing:-.01em !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-option-description{
  display:block !important;
  color:#aebed2 !important;
  font-size:.82rem !important;
  font-weight:500 !important;
  line-height:1.42 !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form label.bm-config-option--compact.form-check{
  min-height:76px !important;
  align-items:flex-start !important;
}
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form fieldset:disabled label.bm-config-option.form-check{
  cursor:not-allowed !important;
  transform:none !important;
}

@media (max-width: 900px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-options-grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }
}
@media (max-width: 575.98px){
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section{
    padding:15px !important;
    border-radius:16px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section-header{
    gap:11px !important;
    margin-bottom:12px !important;
    padding-bottom:12px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form .bm-config-section-icon{
    flex-basis:34px !important;
    width:34px !important;
    height:34px !important;
  }
  :where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form label.bm-config-option.form-check,
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .config-form label.bm-config-option--compact.form-check{
    min-height:0 !important;
    padding:14px !important;
  }
}

/* ==================== VISTA: html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"] ==================== */
/* Origen: instructor.php:10530, instructornuevo.php:10263 */
/*
  Corrige exclusivamente la estructura de la pestaña Gestor emocional:
  - el aviso pendiente permanece en el flujo normal;
  - el mensaje de bloqueo no se superpone a Protección extrema;
  - el botón de guardado conserva su ubicación normal dentro del formulario.
*/
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .bm-config-pending-banner{
  position:relative !important;
  inset:auto !important;
  z-index:2 !important;
  width:100% !important;
  margin:0 0 14px !important;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #bmConfigForm{
  overflow:visible !important;
}

/* El aviso absoluto anterior podía quedar encima de las últimas opciones. */
:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) #bmConfigForm .config-body.is-locked::after{
  content:none !important;
  display:none !important;
}

:where(html[data-bm-page="instructor"], html[data-bm-page="instructornuevo"]) .bm-config-lock-note{
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  width:100% !important;
  margin:16px 0 0 !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  background:#332b18 !important;
  border:1px solid rgba(251,191,36,.42) !important;
  color:#fff4c2 !important;
  font-size:.88rem !important;
  font-weight:750 !important;
  line-height:1.45 !important;
  box-shadow:none !important;
}

/* ==================== VISTA: html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"] ==================== */
/* Origen: instructorAll.php:1096, instructorAnt.php:1268 */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]):root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel-soft:#f8f9fc;
  --muted:#6b7280;
  --text:#111827;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --primary-50:#eff6ff;
  --success:#10b981;
  --protect-bg:#ecfdf5;
  --protect-border:#bbf7d0;
  --protect-text:#065f46;
  --danger:#ef4444;
  --warning:#f59e0b;
  --pending-50:#FFFBEB;
  --pending-100:#FEF3C7;
  --pending-200:#FDE68A;
  --pending-300:#FCD34D;
  --pending-700:#92400e;
  --border:#e5e7eb;
  --shadow:0 8px 24px rgba(16,24,40,.08);
  --radius:14px;

  /* Márgenes verticales SIMÉTRICOS para modales */
  --modal-gap-base: clamp(32px, 8vh, 120px);
  --modal-safe-inset: max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
  --modal-gap: calc(var(--modal-gap-base) + var(--modal-safe-inset));
  --modal-safe-top: var(--modal-gap);
  --modal-safe-bottom: var(--modal-gap);
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) body{ background:var(--bg); color:var(--text); }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .main-wrapper{ padding-top:0 !important; }

/* Cards base */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .card-clean{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .card-soft{
  background:var(--panel-soft);
  border:1px dashed var(--border);
  border-radius:var(--radius);
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .section-heading{
  font-weight:800; letter-spacing:.2px; margin: 4px 0 18px 0;
}

/* Sidebar */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .sidebar{ position:sticky; top:90px; }
@media (max-width: 992px){
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .sidebar{ position:static; margin-bottom:12px; }
}

/* Buscador en sidebar */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .input-search{
  border:1px solid var(--border); border-radius:10px; padding:.55rem .9rem .55rem 2.2rem; width:100%;
  background:#fff;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .input-search-icon{
  position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--muted);
}

/* Lista alumnos */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .list-emails{ list-style:none; padding:0; margin: 8px 0 0 0; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .list-emails li{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; border-bottom:1px dashed var(--border); padding:.75rem 0; flex-wrap:wrap;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .list-emails li:last-child{ border-bottom:none; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .list-emails .btn-mini{ font-size:.85rem; padding:.35rem .6rem; border-radius:10px; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .list-emails .email-link{
  flex:1; min-width:0; color:#111827; text-decoration:none; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .list-emails .badge-soft{ flex-shrink:0; white-space:nowrap; }

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .sidebar-heading{
  color:#6b7280; font-size:.85rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  border-top:1px dashed var(--border); padding-top:.4rem; margin-top:.5rem;
}

/* Tabs */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .tabs{
  display:flex; gap:1.2rem; border-bottom:1px solid var(--border); margin-bottom:14px; flex-wrap:wrap;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .tabs a{
  padding:.65rem .4rem; font-weight:700; color:#374151; text-decoration:none; border-bottom:3px solid transparent;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .tabs a.active{ color:var(--primary); border-bottom-color:var(--primary); }

/* Tablas */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .table-clean{ width:100%; border-collapse:separate; border-spacing:0; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .table-clean thead th{
  text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; color:#6b7280;
  background:#fff; position:sticky; top:0; z-index:2;
  border-bottom:1px solid var(--border); padding:.85rem .9rem;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .table-clean tbody td{
  border-bottom:1px solid var(--border); padding:.9rem .9rem; vertical-align:top;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .table-clean tbody tr:hover{ background:#fbfdff; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px; }

/* Grid util para secciones */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .form-grid{ display:grid; gap:16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .col-12{ grid-column: span 12; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .col-6{ grid-column: span 6; }

@media (max-width: 992px){
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .form-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .col-6{ grid-column: span 6; }
}
@media (max-width: 576px){
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .form-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .col-6,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .col-12{ grid-column: span 4; }
}

/* Botones */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .btn{ border-radius:10px; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .btn + .btn{ margin-left:.5rem; }

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .badge-soft{
  display:inline-flex; align-items:center; padding:.2rem .5rem; border-radius:999px; font-size:.75rem;
  border:1px solid var(--border); background:#fff;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .help-text{ color:#6b7280; font-size:.85rem; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .hr-soft{ border:0; height:1px; background:var(--border); margin:12px 0; }

/* Secciones de plantilla */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section{
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow);
  margin-bottom:18px;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section .section-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section .section-title{ margin:0; font-weight:800; font-size:1rem; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section .section-body{ padding:16px; }

/* ==== UI: Selección de instrumentos (lista con scroll, alta/baja) ==== */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-box{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:.5rem;
  align-items:center;
  margin-bottom:.6rem;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-input{
  width:100%;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-add{
  white-space:nowrap;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-list-wrap{
  border:1px solid var(--border);
  border-radius:10px;
  background:#0b0b0b0a; /* apenas contraste */
  overflow:hidden;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-list-head{
  padding:.45rem .6rem;
  font-weight:700;
  font-size:.9rem;
  background:#f3f4f6;
  border-bottom:1px solid var(--border);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-list{
  list-style:none;
  padding:0;
  margin:0;
  max-height: 180px;        /* ≈ 5+ elementos -> aparece scroll */
  overflow-y:auto;
  background:#fff;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.45rem .6rem;
  border-bottom:1px solid var(--border);
  font-weight:600;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-list li:last-child{ border-bottom:none; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-code{
  display:inline-block;
  min-width:36px;
  padding:.15rem .35rem;
  border-radius:6px;
  background:#0f172a;
  color:#fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-del{
  border:1px solid #fecaca;
  color:#b91c1c;
  background:#fff;
  border-radius:10px;
  padding:.2rem .5rem;
  font-size:.8rem;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .inst-del:hover{ background:#fff1f2; }

/* Toggle */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .switch{ transform:translateY(1px); }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .switch input{ display:none; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .switch label{
  position:relative; display:inline-block; width:46px; height:26px; background:#e5e7eb; border-radius:999px; cursor:pointer;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .switch label::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .switch input:checked + label{ background:#34d399; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .switch input:checked + label::after{ left:23px; }

/* Chips días */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .day-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--border); padding:.3rem .6rem; border-radius:10px; background:#fff; margin-right:.4rem; margin-bottom:.4rem;
}

/* Rango horas */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .time-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .time-row select,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .time-row input[type="number"]{ width:82px; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .time-row .btn{ padding:.3rem .55rem; }

/* Cabecera de la derecha (alumno + stats) */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .header-student{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:10px; flex-wrap:wrap;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .header-student .meta{ color:#374151; font-weight:600; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .header-student .stats{ color:#6b7280; }

/* Píldora total en sidebar */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .total-pill{
  margin-left:.75rem; flex-shrink:0; font-size:.78rem; color:#111827; display:inline-flex; align-items:center; gap:.35rem;
  background:#eef2ff; border:1px solid #e0e7ff; padding:.15rem .5rem; border-radius:999px; font-weight:700;
}

/* Botonera de cuentas */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .action-col{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.5rem; min-width:180px; max-width:220px;
}
@media (max-width: 768px){
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .action-col{ grid-template-columns: 1fr; }
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .action-col .btn{ width:100%; }
}

/* Empty state */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .empty-state{
  display:flex; align-items:center; gap:18px;
  padding:18px; border:1px dashed var(--border); border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%, #fafbff 100%);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .empty-state .icon{
  width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:#eef2ff; border:1px solid #e0e7ff;
}

/* Lista acciones plantilla */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .tpl-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Encabezados internos */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .block-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--border); background:#fff; border-radius:12px; box-shadow:var(--shadow); margin-bottom:10px;
}

/* Inputs contrastados */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .form-check-input{ border-color:#cbd5e1; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .form-control,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .form-select{ border-color:#cbd5e1; }
/* Borde azul para selectores con plantilla seleccionada (mismo azul del botón "Guardar") */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .form-select.bm-template-select[data-has-template="1"]{
  border-width: 2px; /* más grueso */
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.08);
}

/* Acento al enfocar */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .form-select.bm-template-select[data-has-template="1"]:focus{
  border-width: 2px; /* mantener grosor también en foco */
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.20);
}

/* Avisos */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .notice{
  padding:.65rem .9rem; border-radius:10px; border:1px solid var(--border); background:#f9fafb; margin-bottom:10px;
}

/* Botón “Ver detalle” (consolidado) */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .btn-detail-ghost{
  display:inline-block;           /* igual que .btn */
  border:1px solid #c7ddfe;
  background:#fff;
  color:#1d4ed8;
  border-radius:10px;
  padding:.25rem .5rem;           /* = .btn-sm */
  font-size:.875rem;              /* = .btn-sm */
  line-height:1.5;                /* = .btn-sm */
  white-space:nowrap;
  vertical-align:middle;
  box-shadow:0 1px 2px rgba(29,78,216,.06);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .btn-detail-ghost:hover{ background:var(--primary-50); }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .btn-detail-ghost:focus{ outline:2px solid #bfdbfe; outline-offset:1px; }

/* ====== PENDIENTES UI ====== */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-highlight{
  background:#fff;
  border:1px solid var(--pending-100);
  box-shadow:0 2px 10px rgba(245, 158, 11, .06);
  border-left:4px solid var(--warning);
  position:relative;
}

/* Barra compacta para pendientes */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-banner{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .65rem;
  background:linear-gradient(0deg, var(--pending-50), var(--pending-50));
  border:1px solid var(--pending-100);
  border-radius:12px;
  margin-bottom:8px;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-banner .left{ display:flex; align-items:center; gap:.45rem; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-banner .icons{ display:flex; gap:.35rem; }

/* Chip reutilizable */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:999px; padding:.15rem .6rem;
  font-weight:700; font-size:.78rem;
  border:1px solid var(--border);
  background:#fff; color:#374151;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .chip-pending{
  background:var(--pending-50);
  border-color:var(--pending-300);
  color:var(--pending-700);
}

/* Botón cancelar mini */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .btn-cancel-mini{
  border:1px solid #fecaca; background:#fff;
  color:#b91c1c; border-radius:10px; padding:.15rem .5rem; font-size:.8rem; cursor:pointer;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .btn-cancel-mini:hover{ background:#fff1f2; }

/* Banner a lo ancho para pendientes en CUENTAS */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .account-notice-row td{
  padding:.35rem .5rem .25rem;
  background:transparent;
  border-bottom:none;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-notice-row td{
  padding:.35rem .5rem .25rem;
  background:transparent;
  border-bottom:none;
}
/* Estilo gris para PLANTILLAS con cambio pendiente */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-row.template-pending td{
  background:#f6f7fb;
  color:#6b7280;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-row.template-pending .fw-semibold{ color:#4b5563; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-row.template-pending a.btn,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-row.template-pending button.btn{
  opacity:.55; 
  pointer-events:none; 
  cursor:not-allowed;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-row-banner{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.55rem .8rem;
  background:linear-gradient(0deg, var(--pending-50), var(--pending-50));
  border:1px solid var(--pending-100);
  border-left:4px solid var(--warning);
  border-radius:12px;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-row-banner .left{ display:flex; align-items:center; gap:.5rem; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-row-banner .right{ display:flex; align-items:center; gap:.5rem; margin-left:auto; flex-wrap:wrap; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-row-banner .chip{ text-transform:uppercase; letter-spacing:.04em; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-row-banner .chip-normalcase{ text-transform:none; letter-spacing:0; }

/* Estilo neutro para CUENTAS bloqueadas (ya no deshabilita ni engrisa) */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .account-row.account-blocked td{
  background: transparent;
  color: inherit;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .account-row.account-blocked .fw-semibold{ color: inherit; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .account-row.account-blocked select,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .account-row.account-blocked .btn{
  opacity: 1;
  pointer-events: auto;
  cursor: auto;
}

/* Estilo gris para CUENTAS con cambio pendiente */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .account-row.account-pending td{
  background:#f6f7fb;
  color:#6b7280;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .account-row.account-pending .fw-semibold{ color:#4b5563; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .account-row.account-pending select,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .account-row.account-pending .btn{
  opacity:.55;
  pointer-events:none;
  cursor:not-allowed;
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .chip-blocked{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#eef2f7; border:1px solid #e5e7eb; border-radius:999px;
  padding:.15rem .6rem; font-weight:700; font-size:.78rem; color:#374151;
}
/* Bloqueo visual por sección */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section.is-locked .section-body{
  pointer-events:none;            /* no permite interacción */
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section.is-locked input,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section.is-locked select,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section.is-locked textarea,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section.is-locked button,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section.is-locked .switch label{
  opacity:.6;
  filter: grayscale(0.15);
  background-color:#f3f4f6 !important;
  color:#6b7280 !important;
  border-color:#e5e7eb !important;
  cursor:not-allowed;
  pointer-events:none;
}

/* No agregamos ninguna “pastilla” en el header cuando está bloqueado */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .template-section.is-locked .section-header::after{
  content:"";
  display:none;
}

/* Tarjeta protección verde */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(0deg, var(--protect-bg), var(--protect-bg));
  border:1px solid var(--protect-border);
  border-left:6px solid var(--success);
  border-radius:12px; padding:12px 14px; margin-bottom:12px;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card .title{ margin:0; font-weight:800; color:var(--protect-text); }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card .desc{ margin:0; font-size:.9rem; color:var(--protect-text); }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-banner + .protect-card{ margin-top:8px; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked .protect-card,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-form.config-pending .protect-card{
  background:linear-gradient(0deg, #f3f4f6, #f3f4f6);  /* gris suave, sin verde */
  border:1px solid #e5e7eb;                            /* borde gris */
  border-left:6px solid #9ca3af;                       /* banda lateral gris */
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked .protect-card .title,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked .protect-card .desc,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-form.config-pending .protect-card .title,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-form.config-pending .protect-card .desc{
  color:#6b7280;                                       /* texto gris como el resto del lock */
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card .switch input:checked + label{ background:var(--success); }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked{
  pointer-events:none;                /* bloquea interacción dentro del cuerpo de configuración */
  background:#f6f7fb;                 /* mismo tono gris que cuentas/plantillas */
  color:#6b7280;
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked input,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked select,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked textarea,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked button,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked .switch label{
  opacity:.55;                        /* mismo “desvanecido” que usamos en pendientes */
  filter: grayscale(0.15);
  background-color:#f6f7fb !important;
  color:#6b7280 !important;
  border-color:#e5e7eb !important;
  cursor:not-allowed;
}

/* Evitar que el switch quede "verde" cuando está bloqueado */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked .switch input:checked + label{
  background:#e5e7eb !important;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked .form-check-input:checked{
  background-color:#9ca3af !important;  /* gris medio para que el check blanco destaque */
  border-color:#6b7280 !important;
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked .form-check-input:focus{
  box-shadow:none !important;
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-body.is-locked .form-check-label{
  color:#4b5563 !important;              /* un poco más oscuro para legibilidad */
}
/* Gris de tarjeta para Gestor emocional con pendiente (no bloquea los botones del banner) */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-form.config-pending .config-body{
  background:#f6f7fb;
  color:#6b7280;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .config-form.config-pending .config-body .fw-bold{
  color:#4b5563;
}
/* Lock “todo” en editor de plantilla (sin amarillos, solo look gris) */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal[data-lock-all="1"] .template-section{
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  position:relative;
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal[data-lock-all="1"] .template-section .section-body{
  pointer-events:none; /* bloquea edición */
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal[data-lock-all="1"] .template-section input,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal[data-lock-all="1"] .template-section select,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal[data-lock-all="1"] .template-section textarea,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal[data-lock-all="1"] .template-section button,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal[data-lock-all="1"] .template-section .switch label{
  opacity:.6;
  filter: grayscale(0.15);
  background-color:#f3f4f6 !important;
  color:#6b7280 !important;
  border-color:#e5e7eb !important;
  cursor:not-allowed;
  pointer-events:none;
}

/* Sin badge en el header mientras está bloqueado el modal */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal[data-lock-all="1"] .template-section .section-header::after{
  content:"";
  display:none;
}

/* También engrisamos el campo del nombre de plantilla */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal[data-lock-all="1"] #template_name{
  pointer-events:none;
  background:#f3f4f6;
  color:#6b7280;
  border-color:#e5e7eb;
}
/* Key/Value en detalles */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .kv{ list-style:none; padding-left:0; margin:0; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .kv li{
  display:flex; align-items:baseline; gap:.5rem; padding:.25rem 0; border-bottom:1px dashed var(--border);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .kv li:last-child{ border-bottom:none; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .kv .k{ flex:0 0 320px; min-width:220px; font-weight:700; color:#111827; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .kv .v{ flex:1; color:#374151; word-break:break-word; }

/* Detalles “raw” */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .details-raw{ margin-top:.5rem; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .details-raw summary{ cursor:pointer; color:var(--primary); font-weight:700; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .details-raw[open] summary{ margin-bottom:.25rem; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .details-raw pre{ margin-top:.35rem; }

/* Preformateado de modal de pendientes (consolidado) */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .pending-modal pre{
  white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.85rem; background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:.75rem;
}

/* ===== Modales: márgenes simétricos y sticky header/footer ===== */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-hero{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--border);
  background:#f9fafb;
  border-left:6px solid var(--primary);
  margin-bottom:10px;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-hero .icon{
  font-size:22px; line-height:1; flex:0 0 auto;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-hero .text .title{
  margin:0 0 4px 0; font-weight:800; color:#111827;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-hero .text .desc{
  margin:0; color:#374151; white-space:pre-wrap;
}

/* Variantes según tipo de mensaje */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-hero--success{
  border-left-color: var(--success);
  background: var(--protect-bg);
  border-color: var(--protect-border);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-hero--info{
  border-left-color: var(--primary);
  background: var(--primary-50);
  border-color: #c7ddfe;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-hero--error{
  border-left-color: var(--danger);
  background: #fef2f2;
  border-color: #fecaca;
}

/* Botón de “Ver detalles” en footer del modal de resultado */
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #actionResultModal .btn-detail-ghost{
  border:1px solid #c7ddfe; background:#fff;
  color:#1d4ed8; border-radius:10px; padding:.35rem .75rem; font-size:.9rem;
  line-height:1.2; box-shadow:0 1px 2px rgba(29,78,216,.06);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #actionResultModal .btn-detail-ghost:hover{ background:var(--primary-50); }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #actionResultModal .btn-detail-ghost:focus{ outline:2px solid #bfdbfe; outline-offset:1px; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal{ 
  overflow-y:auto;
  --bs-modal-margin: var(--modal-gap);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal{ --bs-modal-margin: var(--modal-gap); }

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-dialog{ max-width: 90vw; margin: var(--modal-safe-top) auto var(--modal-safe-bottom); }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-content{
  display:flex; flex-direction:column;
  max-height: calc(100dvh - (var(--modal-safe-top) + var(--modal-safe-bottom)));
  background:#fff;
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-header{
  position:sticky; top:0; z-index:2; background:#fff; border-bottom:1px solid var(--border);
}
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; }
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-footer.sticky-footer{
  position:sticky; bottom:0; z-index:2; background:#fff; border-top:1px solid var(--border);
}
@media (max-width: 576px){
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-content{
    max-height: calc(100dvh - (var(--modal-safe-top) + var(--modal-safe-bottom)));
  }
}

:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .modal-backdrop.stacked-backdrop-aux{ opacity: .5; }
  /* ====== UI: “sección desactivada” en el Editor de Plantillas (solo apariencia) ====== */
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal .template-section{
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
  }
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal .template-section.off{
    background: #f7f7f9 !important; /* gris suave */
    border-color: #e6e6eb !important;
  }
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal .template-section.off .section-header .section-title,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal .template-section.off .help-text{
    color: #6c757d !important; /* texto atenuado */
  }
  /* Atenúa el contenido y bloquea interacción con el BODY de la sección (no el header) */
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal .template-section.off .section-body{
    opacity: .65;
    pointer-events: none;     /* bloquea clicks */
    user-select: none;        /* evita selecciones/ediciones */
  }

  /* Mantener legibles los checkboxes en modo “off” (gris) */
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal .template-section.off .form-check-input{
    opacity: 1 !important;           /* no los atenúes como el resto */
    filter: none !important;
    background-color: #fff !important;
    border-color: #6c757d !important;
    accent-color: #0d6efd;           /* azul Bootstrap para alto contraste */
  }
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal .template-section.off .form-check-input:checked{
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
  }

  /* ====== Editor: nombre de la plantilla a todo el ancho ====== */
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal input#template_name.form-control{
    width: 100% !important;
    max-width: 100% !important;
    display: block;
  }
  /* Si el nombre está bloqueado (solo al editar), que se note “no editable” */
  :where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) #tplEditorModal input#template_name[readonly]{
    background-color: #f8f9fa !important;
    cursor: not-allowed;
  }

/* ==================== VISTA: html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"] ==================== */
/* Origen: instructorAll.php:3101, instructorAnt.php:3273 */
/* Estado visual del bloque de protección:
						   - .is-on  → verde (se mantiene lo que ya tienes)
						   - .is-off → rojo completo (fondo, borde y textos) */

						/* Forzamos fondo rojo y anulamos cualquier degradado previo */
						:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card.is-off{
						  /* Fallback sólido + degradado rojo suave */
						  background: linear-gradient(180deg, #fff5f5 0%, #ffe2e2 100%) !important;
						  background-color: #ffe2e2 !important;
						  background-image: none !important;

						  /* Si tu .protect-card tiene borde o realce “success”, lo reemplazamos por “danger” */
						  border: 1px solid #dc3545 !important;
						  box-shadow: 0 0 0 1px rgba(220,53,69,.15) inset !important;
						}

						/* Si el diseño original usa pseudo-elementos para el degradado, los anulamos */
						:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card.is-off::before,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card.is-off::after{
						  background: none !important;
						  background-image: none !important;
						  opacity: 0 !important;
						  box-shadow: none !important;
						}

						/* Colores de textos dentro de la tarjeta en modo off */
						:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card.is-off .title{
						  color: #b02a37 !important;   /* rojo más oscuro para el título */
						}
						:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card.is-off .desc{
						  color: #842029 !important;   /* texto descriptivo en rojo oscuro/legible */
						}

						/* Por si el estilo global pinta textos en “success” dentro de la tarjeta */
						:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card.is-off,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card.is-off p,
:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .protect-card.is-off .help-text{
						  color: #842029 !important;
						}

/* ==================== VISTA: html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"] ==================== */
/* Origen: instructorAll.php:3250, instructorAnt.php:3422 */
/* Bloque grisáceo cuando hay un refresco pendiente (similar a otras pestañas bloqueadas) */
						:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .flush-pending{
						  opacity: .6;
						  filter: grayscale(0.15);
						}
						/* Evita interacción en los botones dentro del bloque cuando está pendiente.
						   El banner de pendientes (con Cancelar) está fuera de este bloque y sigue activo. */
						:where(html[data-bm-page="instructorAll"], html[data-bm-page="instructorAnt"]) .flush-pending .btn{
						  pointer-events: none;
						}

/* ==================== VISTA: html[data-bm-page="manual_trades"] ==================== */
/* Origen: manual_trades.php:25 */
:where(html[data-bm-page="manual_trades"]):root{
      --bg:#f5f7fb; --card:#fff; --muted:#6b7280; --text:#0f172a; --border:#e5e7eb;
      --accent:#2563eb; --accent-600:#1d4ed8; --danger:#dc2626; --ok:#16a34a;
    }
    :where(html[data-bm-page="manual_trades"]) body{ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:linear-gradient(180deg,#f7f9ff 0%,#f5f7fb 100%); color:var(--text); }
    :where(html[data-bm-page="manual_trades"]) .wrap{ max-width:1000px; margin:24px auto; padding:0 16px; }
    :where(html[data-bm-page="manual_trades"]) .card{ background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 30px rgba(16,24,40,.06); padding:16px; margin-bottom:16px; }
    :where(html[data-bm-page="manual_trades"]) h1{ font-size:1.35rem; margin:0 0 8px 0; font-weight:800; }
    :where(html[data-bm-page="manual_trades"]) h2{ font-size:1.05rem; margin:0 0 8px 0; font-weight:800; }
    :where(html[data-bm-page="manual_trades"]) .muted{ color:var(--muted); font-size:.92rem; }
    :where(html[data-bm-page="manual_trades"]) .row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
    :where(html[data-bm-page="manual_trades"]) .row-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
    :where(html[data-bm-page="manual_trades"]) label{ font-weight:700; font-size:.9rem; display:block; margin:8px 0 6px; }
    :where(html[data-bm-page="manual_trades"]) input,
:where(html[data-bm-page="manual_trades"]) select{ width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:.95rem; }
    :where(html[data-bm-page="manual_trades"]) .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.6rem .9rem; border-radius:10px; border:1px solid var(--accent-600); background:linear-gradient(180deg,var(--accent) 0%, var(--accent-600) 100%); color:#fff; font-weight:800; cursor:pointer; text-decoration:none; }
    :where(html[data-bm-page="manual_trades"]) .btn[disabled]{ opacity:.6; cursor:not-allowed; }
    :where(html[data-bm-page="manual_trades"]) .btn-outline{ background:#fff; color:var(--accent-600); border-color:var(--accent-600); }
    :where(html[data-bm-page="manual_trades"]) .btn-danger{ background:linear-gradient(180deg,#ef4444 0%, #dc2626 100%); border-color:#b91c1c; }
    :where(html[data-bm-page="manual_trades"]) table{ width:100%; border-collapse:collapse; }
    :where(html[data-bm-page="manual_trades"]) th,
:where(html[data-bm-page="manual_trades"]) td{ border-bottom:1px solid var(--border); padding:10px; text-align:left; vertical-align:top; }
    :where(html[data-bm-page="manual_trades"]) th{ font-size:.8rem; letter-spacing:.04em; color:#64748b; text-transform:uppercase; }
    :where(html[data-bm-page="manual_trades"]) .toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0 12px; }
    :where(html[data-bm-page="manual_trades"]) .badgetz{ display:inline-block; padding:.25rem .5rem; border:1px solid var(--border); border-radius:999px; font-size:.8rem; background:#f8fafc; }
    :where(html[data-bm-page="manual_trades"]) .status-ok{ color:#065f46; background:#ecfdf5; border-color:#10b981; }
    :where(html[data-bm-page="manual_trades"]) .flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    :where(html[data-bm-page="manual_trades"]) .right{ text-align:right; }
    :where(html[data-bm-page="manual_trades"]) .note{ background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
    :where(html[data-bm-page="manual_trades"]) .mt8{ margin-top:8px; } :where(html[data-bm-page="manual_trades"]) .mt12{ margin-top:12px; } :where(html[data-bm-page="manual_trades"]) .mt16{ margin-top:16px; } :where(html[data-bm-page="manual_trades"]) .mb8{ margin-bottom:8px; }
    :where(html[data-bm-page="manual_trades"]) .small{ font-size:.86rem; }
    @media (max-width: 760px){ :where(html[data-bm-page="manual_trades"]) .row,
:where(html[data-bm-page="manual_trades"]) .row-3{ grid-template-columns: 1fr; } }

/* ==================== VISTA: html[data-bm-page="mtoffer"] ==================== */
/* Origen: mtoffer.php:28, mtoffer.php:215 */
:where(html[data-bm-page="mtoffer"]):root{ --brand:#0f172a; --muted:#64748b; }
      :where(html[data-bm-page="mtoffer"]):is(html),
:where(html[data-bm-page="mtoffer"]) body{height:100%;}
      :where(html[data-bm-page="mtoffer"]) body{
        background: linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
        color: var(--brand);
      }
      :where(html[data-bm-page="mtoffer"]) .hero{ padding: 3rem 0 1rem; }
      :where(html[data-bm-page="mtoffer"]) .card-glass{
        border: 1px solid rgba(15,23,42,.08);
        background: rgba(255,255,255,.9);
        backdrop-filter: blur(6px);
        box-shadow: 0 8px 30px rgba(2,6,23,.06);
        border-radius: 1rem;
      }
      :where(html[data-bm-page="mtoffer"]) .price-badge{
        display:inline-block;
        font-weight:600;
        border:1px dashed rgba(15,23,42,.2);
        border-radius:.75rem;
        padding:.35rem .75rem;
      }
      :where(html[data-bm-page="mtoffer"]) .small-muted{ color: var(--muted); font-size:.95rem; }
      :where(html[data-bm-page="mtoffer"]) .version-badge{
        background:#000; color:#fff; border-radius:.5rem; padding:.2rem .5rem; font-size:.8rem;
      }
      :where(html[data-bm-page="mtoffer"]) .qr{
        max-width: 260px;
        border: 1px solid rgba(15,23,42,.08);
        border-radius: .75rem;
        padding: .5rem;
        background:#fff;
      }
      :where(html[data-bm-page="mtoffer"]) .btn-lg{ padding: .8rem 1.25rem; }
      :where(html[data-bm-page="mtoffer"]) .hide{ display:none !important; }
      :where(html[data-bm-page="mtoffer"]) footer{ color: var(--muted); }
      :where(html[data-bm-page="mtoffer"]) code{ background: #f1f5f9; padding: .2rem .35rem; border-radius:.35rem; }

/* ==================== VISTA: html[data-bm-page="openView"] ==================== */
/* Origen: openView.php:281 */
/* ========== PREMIUM SAAS UI VARIABLES ========== */
    :where(html[data-bm-page="openView"]):root{
        --bg-body: #0f172a; 
        --surface-white: #1e293b; 
        --surface-hover: #334155; 
        --text-primary: #f8fafc; 
        --text-secondary: #94a3b8; 
        --text-light: #64748b; 
        --brand-primary: #365CF5; 
        --brand-primary-hover: #5a7af7; 
        
        --success-soft: rgba(33, 150, 83, 0.15);
        --success-text: #4ade80; 
        --warning-soft: rgba(245, 158, 11, 0.15);
        --warning-text: #fbbf24; 
        --danger-soft: rgba(213, 1, 0, 0.15);
        --danger-text: #f87171; 
        --info-soft: rgba(59, 130, 246, 0.15);
        --info-text: #60a5fa; 

        --border-subtle: #334155; 
        --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
        --radius-card: 12px;
        --font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    :where(html[data-bm-page="openView"]) .updates-wrapper{
        font-family: var(--font-main);
        color: var(--text-primary);
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px 0;
    }

    :where(html[data-bm-page="openView"]) .updates-header{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 20px;
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: 20px;
    }

    :where(html[data-bm-page="openView"]) .updates-title h2{
        font-weight: 800; font-size: 2rem; color: var(--text-primary); margin-bottom: 0.5rem; letter-spacing: -0.03em;
    }
    :where(html[data-bm-page="openView"]) .updates-subtitle{ color: var(--text-secondary); font-size: 1.05rem; }

    :where(html[data-bm-page="openView"]) .kpi-row{ display: flex; gap: 15px; flex-wrap: wrap; }
    :where(html[data-bm-page="openView"]) .kpi-pill{
        display: flex; align-items: center; gap: 10px; background: var(--surface-white); border: 1px solid var(--border-subtle);
        padding: 8px 16px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: default;
    }
    :where(html[data-bm-page="openView"]) .kpi-dot{ width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    :where(html[data-bm-page="openView"]) .kpi-dot.red{ background-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
    :where(html[data-bm-page="openView"]) .kpi-dot.green{ background-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
    :where(html[data-bm-page="openView"]) .kpi-dot.blue{ background-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

    :where(html[data-bm-page="openView"]) .premium-card{
        background: var(--surface-white); border-radius: var(--radius-card); border: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-card); margin-bottom: 28px; overflow: hidden; display: flex; flex-direction: column;
    }
    :where(html[data-bm-page="openView"]) .card-top{
        padding: 24px 28px; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center;
    }
    :where(html[data-bm-page="openView"]) .product-meta{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    :where(html[data-bm-page="openView"]) .order-badge{
        font-family: 'Roboto Mono', monospace; font-size: 0.85rem; background: var(--bg-body); color: var(--text-secondary);
        padding: 6px 10px; border-radius: 8px; font-weight: 600; border: 1px solid var(--border-subtle);
    }
    :where(html[data-bm-page="openView"]) .product-name{ font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
    :where(html[data-bm-page="openView"]) .status-badge{ padding: 6px 14px; border-radius: 30px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: var(--success-soft); color: var(--success-text); }

    /* Banner Dinámico */
    :where(html[data-bm-page="openView"]) .update-banner{
        margin: 0; padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px;
        border-bottom: 1px solid var(--border-subtle); position: relative; overflow: hidden;
    }
    :where(html[data-bm-page="openView"]) .update-banner-content{ display: flex; align-items: center; gap: 20px; z-index: 1; }
    :where(html[data-bm-page="openView"]) .update-icon-wrapper{
        display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    :where(html[data-bm-page="openView"]) .update-text{ font-size: 0.95rem; line-height: 1.6; color: var(--text-primary); }
    :where(html[data-bm-page="openView"]) .update-text strong{ font-weight: 800; }
    :where(html[data-bm-page="openView"]) .update-text code{ background: rgba(0,0,0,0.25); padding: 4px 8px; border-radius: 6px; font-family: 'Roboto Mono', monospace; color: #fff; font-size: 0.9rem; border: 1px solid rgba(255,255,255,0.1); }
    :where(html[data-bm-page="openView"]) .update-note{ margin-top: 8px; font-size: 0.85rem; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 6px; }

    :where(html[data-bm-page="openView"]) .update-banner-info{ background: rgba(54, 92, 245, 0.12); border-left: 5px solid var(--brand-primary); }
    :where(html[data-bm-page="openView"]) .update-banner-info .update-icon-wrapper{ background: linear-gradient(135deg, #365CF5 0%, #6b88fb 100%); }
    :where(html[data-bm-page="openView"]) .update-banner-warning{ background: rgba(245, 158, 11, 0.12); border-left: 5px solid var(--warning-text); }
    :where(html[data-bm-page="openView"]) .update-banner-warning .update-icon-wrapper{ background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
    :where(html[data-bm-page="openView"]) .update-banner-danger{ background: rgba(239, 68, 68, 0.12); border-left: 5px solid var(--danger-text); }
    :where(html[data-bm-page="openView"]) .update-banner-danger .update-icon-wrapper{ background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); }

    /* Botón Modal */
    :where(html[data-bm-page="openView"]) .btn-update-action{
        background: #ffffff; color: #0f172a; border: none; padding: 0 24px; height: 46px; border-radius: 10px; font-weight: 800; font-size: 0.95rem;
        display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.25s; box-shadow: 0 4px 10px rgba(0,0,0,0.15); white-space: nowrap; text-decoration: none;
    }
    :where(html[data-bm-page="openView"]) .btn-update-action:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); background: #f8fafc; }
    :where(html[data-bm-page="openView"]) .update-banner-info .btn-update-action{ color: var(--brand-primary); }
    :where(html[data-bm-page="openView"]) .update-banner-warning .btn-update-action{ color: #d97706; }
    :where(html[data-bm-page="openView"]) .update-banner-danger .btn-update-action{ color: #dc2626; }

    :where(html[data-bm-page="openView"]) .device-panel{ padding: 28px; background: #162032; display: flex; flex-direction: column; }
    :where(html[data-bm-page="openView"]) .info-label{ font-size: 0.75rem; text-transform: uppercase; color: var(--text-light); font-weight: 800; margin-bottom: 12px; letter-spacing: 0.08em; }
    :where(html[data-bm-page="openView"]) .device-box{ background: var(--bg-body); border: 2px solid var(--border-subtle); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; max-width: 400px; }
    :where(html[data-bm-page="openView"]) .mac-address{ font-family: 'Roboto Mono', monospace; color: var(--text-primary); font-weight: 600; font-size: 1rem; }

    /* Estilos propios para los botones btn-pro dentro de los modales */
    :where(html[data-bm-page="openView"]) .btn-pro{
        display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 24px;
        border-radius: 8px; font-weight: 700; font-size: 1rem; transition: all 0.2s ease; border: none; cursor: pointer;
    }
    :where(html[data-bm-page="openView"]) .btn-pro-primary{ background: var(--brand-primary); color: white; box-shadow: 0 4px 6px -1px rgba(54, 92, 245, 0.2); }
    :where(html[data-bm-page="openView"]) .btn-pro-primary:hover{ background: var(--brand-primary-hover); transform: translateY(-1px); color: white; }

    /* Modal override para tema oscuro */
    :where(html[data-bm-page="openView"]) .modal-content.dark-theme{ background: var(--surface-white); border: 1px solid var(--border-subtle); color: var(--text-primary); }
    :where(html[data-bm-page="openView"]) .modal-content.dark-theme .modal-header{ border-bottom: 1px solid var(--border-subtle); }
    :where(html[data-bm-page="openView"]) .modal-content.dark-theme .modal-footer{ border-top: 1px solid var(--border-subtle); }
    :where(html[data-bm-page="openView"]) .modal-content.dark-theme .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); }
    
    /* ======== NUEVA BARRA COMPACTA (SWITCH) DE PREFERENCIAS DE CORREO ======== */
    :where(html[data-bm-page="openView"]) .compact-settings-bar{
        background: var(--surface-white);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-card);
        padding: 14px 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
        box-shadow: var(--shadow-card);
    }
    :where(html[data-bm-page="openView"]) .compact-settings-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        font-size: 0.95rem;
        flex-wrap: wrap;
    }
    :where(html[data-bm-page="openView"]) .compact-settings-info{
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-secondary);
        line-height: 1.4;
        flex: 1;
        min-width: 250px;
    }
    :where(html[data-bm-page="openView"]) .compact-settings-info svg{
        color: var(--brand-primary);
        flex-shrink: 0;
    }
    :where(html[data-bm-page="openView"]) .compact-settings-info strong{
        color: var(--text-primary);
        font-weight: 700;
    }
    
    /* Toggle Switch Styles */
    :where(html[data-bm-page="openView"]) .switch-wrapper{
        display: flex;
        align-items: center;
        gap: 12px;
    }
    :where(html[data-bm-page="openView"]) .switch-label-text{
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
    }
    :where(html[data-bm-page="openView"]) .switch-label-text.active{
        color: var(--brand-primary);
    }
    :where(html[data-bm-page="openView"]) .switch{
        position: relative;
        display: inline-block;
        width: 48px;
        height: 26px;
        margin: 0;
    }
    :where(html[data-bm-page="openView"]) .switch input{
        opacity: 0;
        width: 0;
        height: 0;
    }
    :where(html[data-bm-page="openView"]) .slider{
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: var(--surface-hover);
        transition: .3s ease;
        border-radius: 34px;
        border: 2px solid transparent;
    }
    :where(html[data-bm-page="openView"]) .slider:before{
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: var(--text-secondary);
        transition: .3s ease;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    :where(html[data-bm-page="openView"]) input:checked + .slider{
        background-color: var(--brand-primary);
    }
    :where(html[data-bm-page="openView"]) input:checked + .slider:before{
        transform: translateX(22px);
        background-color: #ffffff;
    }
    :where(html[data-bm-page="openView"]) input:disabled + .slider{
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Estilo para el checkbox de sistema (bloqueado) */
    :where(html[data-bm-page="openView"]) .system-rule-box{
        background: rgba(0, 0, 0, 0.15);
        padding: 8px 12px;
        border-radius: 6px;
        border-left: 3px solid var(--text-light);
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 0;
    }
    :where(html[data-bm-page="openView"]) .custom-locked-cb{
        appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid var(--brand-primary);
        border-radius: 4px;
        background-color: rgba(54, 92, 245, 0.15);
        position: relative;
        cursor: not-allowed;
        flex-shrink: 0;
        margin-top: 2px;
        opacity: 0.8;
    }
    :where(html[data-bm-page="openView"]) .custom-locked-cb:checked::after{
        content: '';
        position: absolute;
        left: 4px;
        top: 0px;
        width: 4px;
        height: 9px;
        border: solid var(--brand-primary);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    :where(html[data-bm-page="openView"]) .system-rule-text{
        font-size: 0.8rem;
        color: var(--text-secondary);
        line-height: 1.4;
        cursor: not-allowed;
    }

    @media (max-width: 768px){
        :where(html[data-bm-page="openView"]) .updates-header{ flex-direction: column; align-items: flex-start; margin-bottom: 1rem; }
        :where(html[data-bm-page="openView"]) .card-top{ flex-direction: column; align-items: flex-start; gap: 12px; }
        :where(html[data-bm-page="openView"]) .update-banner{ flex-direction: column; align-items: stretch; }
        :where(html[data-bm-page="openView"]) .update-action .btn-update-action{ width: 100%; justify-content: center; }
        :where(html[data-bm-page="openView"]) .compact-settings-top{ flex-direction: column; align-items: stretch; text-align: left; }
        :where(html[data-bm-page="openView"]) .switch-wrapper{ justify-content: flex-end; width: 100%; margin-top: 8px; }
    }

/* ==================== VISTA: html[data-bm-page="openView"] ==================== */
/* Origen: openView.php:563 */
:where(html[data-bm-page="openView"]):root{
        --bm-arr-bg: #0f172a;
        --bm-arr-card: #111c31;
        --bm-arr-card-soft: #17233a;
        --bm-arr-row: rgba(15, 23, 42, 0.52);
        --bm-arr-border: rgba(148, 163, 184, 0.22);
        --bm-arr-border-strong: rgba(148, 163, 184, 0.34);
        --bm-arr-text: #f8fafc;
        --bm-arr-muted: #a7b4c8;
        --bm-arr-muted-2: #7b8aa3;
        --bm-arr-blue: #365CF5;
        --bm-arr-blue-soft: rgba(54, 92, 245, 0.18);
        --bm-arr-green: #22c55e;
        --bm-arr-green-soft: rgba(34, 197, 94, 0.12);
        --bm-arr-red: #ef4444;
        --bm-arr-red-soft: rgba(239, 68, 68, 0.12);
        --bm-arr-yellow: #f59e0b;
        --bm-arr-yellow-soft: rgba(245, 158, 11, 0.13);
        --bm-arr-shadow: 0 28px 80px rgba(2, 6, 23, 0.48);
        --bm-arr-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-page,
:where(html[data-bm-page="openView"]) .bm-arrv4-page *{
        box-sizing: border-box;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-page{
        width: 100%;
        max-width: 1180px;
        margin: 0 auto 42px;
        padding: 6px 0 24px;
        font-family: var(--bm-arr-font);
        color: var(--bm-arr-text);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-panel{
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        border: 1px solid var(--bm-arr-border);
        background:
            radial-gradient(circle at 88% -8%, rgba(34, 197, 94, 0.23), transparent 34%),
            radial-gradient(circle at 0% 0%, rgba(54, 92, 245, 0.28), transparent 34%),
            linear-gradient(145deg, #0f172a 0%, #111c31 48%, #16213a 100%);
        box-shadow: var(--bm-arr-shadow);
        isolation: isolate;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-panel::before{
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.075) 44%, transparent 68%);
        transform: translateX(-72%);
        animation: bm-0a6bac255d-bmArrShine 8s ease-in-out infinite;
        pointer-events: none;
        z-index: -1;
    }

    @keyframes bm-0a6bac255d-bmArrShine {
        0%, 55% { transform: translateX(-80%); opacity: 0; }
        65% { opacity: 1; }
        100% { transform: translateX(78%); opacity: 0; }
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-top{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        align-items: center;
        padding: 26px;
        border-bottom: 1px solid var(--bm-arr-border);
        background: rgba(15, 23, 42, 0.48);
        backdrop-filter: blur(12px);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        padding: 7px 11px;
        border-radius: 999px;
        background: var(--bm-arr-blue-soft);
        border: 1px solid rgba(96, 165, 250, 0.26);
        color: #bfdbfe;
        font-size: 0.78rem;
        font-weight: 950;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-top h1{
        margin: 0;
        color: #ffffff;
        font-size: clamp(1.55rem, 2.8vw, 2.36rem);
        line-height: 1.08;
        font-weight: 1000;
        letter-spacing: -0.048em;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-top p{
        margin: 10px 0 0;
        color: var(--bm-arr-muted);
        max-width: 780px;
        font-size: clamp(0.95rem, 1.22vw, 1.05rem);
        line-height: 1.5;
        font-weight: 600;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-price-card{
        min-width: 254px;
        border: 1px solid rgba(34, 197, 94, 0.36);
        border-radius: 21px;
        background: linear-gradient(145deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.06));
        padding: 16px;
        box-shadow: 0 18px 45px rgba(16, 185, 129, 0.13);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-price-card span{
        display: block;
        color: #bbf7d0;
        font-weight: 1000;
        font-size: 0.77rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-price-card strong{
        display: block;
        margin-top: 4px;
        color: #ffffff;
        font-size: 1.72rem;
        line-height: 1;
        font-weight: 1000;
        letter-spacing: -0.045em;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-price-card small{
        display: block;
        margin-top: 6px;
        color: var(--bm-arr-muted);
        line-height: 1.35;
        font-weight: 700;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-videos{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        width: calc(100% - 36px);
        margin: 16px auto 22px;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-video{
        min-width: 0;
        padding: 10px;
        border-radius: 22px;
        border: 1px solid rgba(96, 165, 250, 0.24);
        background:
            radial-gradient(circle at 0% 0%, rgba(54, 92, 245, 0.16), transparent 38%),
            linear-gradient(135deg, rgba(30, 41, 59, 0.76), rgba(15, 23, 42, 0.92));
        box-shadow: 0 14px 36px rgba(0,0,0,0.22);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-video-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0 0 9px;
        color: #ffffff;
        font-size: 0.92rem;
        font-weight: 1000;
        line-height: 1.2;
        letter-spacing: -0.01em;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-video-title span{
        display: inline-flex;
        align-items: center;
        padding: 5px 9px;
        border-radius: 999px;
        background: rgba(54, 92, 245, 0.16);
        border: 1px solid rgba(96, 165, 250, 0.24);
        color: #bfdbfe;
        font-size: 0.72rem;
        font-weight: 950;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-video-frame{
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 16px;
        overflow: hidden;
        background: #020617;
        border: 1px solid rgba(255,255,255,0.12);
        box-shadow: 0 16px 36px rgba(0,0,0,0.34);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-video-frame iframe{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-compare{
        padding: 0 18px 18px;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-head,
:where(html[data-bm-page="openView"]) .bm-arrv4-row{
        display: grid;
        grid-template-columns: minmax(310px, 1.45fr) minmax(135px, 0.55fr) minmax(160px, 0.68fr);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-head{
        position: sticky;
        top: 0;
        z-index: 6;
        overflow: hidden;
        border: 1px solid var(--bm-arr-border-strong);
        border-radius: 18px 18px 0 0;
        background: rgba(15, 23, 42, 0.96);
        backdrop-filter: blur(16px);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-head-cell{
        padding: 15px 16px;
        color: #e2e8f0;
        font-size: 0.78rem;
        font-weight: 1000;
        letter-spacing: 0.065em;
        text-transform: uppercase;
        border-right: 1px solid var(--bm-arr-border);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-head-cell:last-child{
        border-right: none;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-head-v3{
        text-align: center;
        color: #cbd5e1;
        background: rgba(148, 163, 184, 0.06);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-head-v4{
        text-align: center;
        color: #bbf7d0;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.20), rgba(34, 197, 94, 0.06));
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-v4-tag{
        display: inline-flex;
        align-items: center;
        margin-left: 6px;
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(34, 197, 94, 0.18);
        border: 1px solid rgba(34, 197, 94, 0.32);
        color: #dcfce7;
        font-size: 0.68rem;
        letter-spacing: 0.02em;
        vertical-align: middle;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-section{
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        margin-top: 12px;
        padding: 12px 15px;
        border: 1px solid var(--bm-arr-border);
        background: rgba(15, 23, 42, 0.66);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-section:first-of-type{
        margin-top: 0;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-section span{
        display: block;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 1000;
        line-height: 1.25;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-section small{
        display: block;
        color: var(--bm-arr-muted);
        font-size: 0.8rem;
        line-height: 1.35;
        font-weight: 650;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-section-green{ border-left: 5px solid var(--bm-arr-green); }
    :where(html[data-bm-page="openView"]) .bm-arrv4-section-yellow{ border-left: 5px solid var(--bm-arr-yellow); }
    :where(html[data-bm-page="openView"]) .bm-arrv4-section-red{ border-left: 5px solid var(--bm-arr-red); }

    :where(html[data-bm-page="openView"]) .bm-arrv4-row{
        position: relative;
        overflow: hidden;
        border-left: 1px solid var(--bm-arr-border);
        border-right: 1px solid var(--bm-arr-border);
        border-bottom: 1px solid var(--bm-arr-border);
        background: var(--bm-arr-row);
        transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-row:hover{
        transform: translateY(-1px);
        background: rgba(30, 41, 59, 0.68);
        border-color: rgba(148, 163, 184, 0.36);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-feature,
:where(html[data-bm-page="openView"]) .bm-arrv4-status-cell{
        min-width: 0;
        padding: 14px 16px;
        border-right: 1px solid var(--bm-arr-border);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-status-cell:last-child{
        border-right: none;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-feature-title{
        color: #ffffff;
        font-size: 0.98rem;
        font-weight: 950;
        line-height: 1.28;
        letter-spacing: -0.012em;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-feature-note{
        display: block;
        margin-top: 4px;
        color: var(--bm-arr-muted);
        font-size: 0.86rem;
        line-height: 1.42;
        font-weight: 600;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-status-cell{
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-status-cell[data-label]::before{
        display: none;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-v4-cell{
        background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.026));
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-pill{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 34px;
        max-width: 100%;
        padding: 8px 11px;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 1000;
        line-height: 1.1;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-pill-yes{
        color: #bbf7d0;
        background: rgba(34, 197, 94, 0.13);
        border: 1px solid rgba(34, 197, 94, 0.28);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-pill-v4{
        color: #052e16;
        background: linear-gradient(135deg, #86efac, #22c55e);
        border: 1px solid rgba(187, 247, 208, 0.7);
        box-shadow: 0 10px 22px rgba(34,197,94,0.18);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-pill-limited{
        color: #fef3c7;
        background: var(--bm-arr-yellow-soft);
        border: 1px solid rgba(245, 158, 11, 0.34);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-pill-no{
        color: #fecaca;
        background: var(--bm-arr-red-soft);
        border: 1px solid rgba(239, 68, 68, 0.32);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-buy{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
        margin: 0 18px 18px;
        padding: 18px;
        border-radius: 22px;
        border: 1px solid rgba(34, 197, 94, 0.42);
        background:
            radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.22), transparent 38%),
            linear-gradient(135deg, rgba(6, 95, 70, 0.82), rgba(15, 23, 42, 0.88));
        box-shadow: 0 20px 60px rgba(34,197,94,0.14);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-buy-top{
        margin-top: 0;
        margin-bottom: 20px;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-buy-bottom{
        margin-top: 2px;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-buy strong{
        display: block;
        color: #ffffff;
        font-size: 1.08rem;
        font-weight: 1000;
        line-height: 1.25;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-buy span{
        display: block;
        margin-top: 5px;
        color: #d1fae5;
        font-size: 0.9rem;
        line-height: 1.42;
        font-weight: 650;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-buy-button{
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 54px;
        padding: 0 24px;
        border-radius: 16px;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: #ffffff;
        text-decoration: none;
        font-weight: 1000;
        font-size: 1rem;
        box-shadow: 0 15px 35px rgba(34,197,94,0.34);
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        white-space: nowrap;
        animation: bm-0a6bac255d-bmArrPulse 2.5s ease-in-out infinite;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-buy-button:hover{
        color: #ffffff;
        transform: translateY(-2px);
        filter: brightness(1.05);
        box-shadow: 0 22px 45px rgba(34,197,94,0.42);
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-buy-button svg{
        transition: transform .18s ease;
    }

    :where(html[data-bm-page="openView"]) .bm-arrv4-buy-button:hover svg{
        transform: translateX(3px);
    }

    @keyframes bm-0a6bac255d-bmArrPulse {
        0%, 100% { box-shadow: 0 15px 35px rgba(34,197,94,0.30); }
        50% { box-shadow: 0 18px 46px rgba(34,197,94,0.48); }
    }

    @media (max-width: 991px){
        :where(html[data-bm-page="openView"]) .bm-arrv4-top,
:where(html[data-bm-page="openView"]) .bm-arrv4-buy{
            grid-template-columns: 1fr;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-price-card{
            width: 100%;
            min-width: 0;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-head,
:where(html[data-bm-page="openView"]) .bm-arrv4-row{
            grid-template-columns: minmax(270px, 1.45fr) minmax(112px, 0.55fr) minmax(132px, 0.65fr);
        }
    }

    @media (max-width: 768px){
        :where(html[data-bm-page="openView"]) .bm-arrv4-page{
            padding: 0;
            margin-bottom: 28px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-panel{
            border-radius: 22px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-top{
            padding: 20px 14px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-top h1{
            font-size: 1.42rem;
            line-height: 1.15;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-top p{
            font-size: 0.92rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-price-card{
            border-radius: 17px;
            padding: 14px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-price-card strong{
            font-size: 1.48rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-videos{
            grid-template-columns: 1fr;
            width: calc(100% - 24px);
            gap: 12px;
            margin: 12px auto 16px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-video{
            padding: 8px;
            border-radius: 18px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-video-title{
            font-size: 0.86rem;
            margin-bottom: 8px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-video-title span{
            font-size: 0.68rem;
            padding: 4px 8px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-video-frame{
            border-radius: 13px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-compare{
            padding: 0 12px 12px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-head{
            display: none;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-section{
            margin-top: 10px;
            border-radius: 15px 15px 0 0;
            padding: 12px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-section span{
            font-size: 0.86rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-section small{
            font-size: 0.78rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-row{
            display: block;
            margin-bottom: 10px;
            border: 1px solid var(--bm-arr-border);
            border-radius: 0 0 15px 15px;
            background: rgba(15, 23, 42, 0.62);
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-section + .bm-arrv4-row{
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-feature{
            padding: 13px;
            border-right: none;
            border-bottom: 1px solid var(--bm-arr-border);
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-feature-title{
            font-size: 0.94rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-feature-note{
            font-size: 0.82rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-status-cell{
            display: grid;
            grid-template-columns: 58px minmax(0, 1fr);
            gap: 10px;
            justify-content: stretch;
            text-align: left;
            padding: 10px 13px;
            border-right: none;
            border-bottom: 1px solid var(--bm-arr-border);
            min-height: 52px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-status-cell:last-child{
            border-bottom: none;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-status-cell[data-label]::before{
            display: flex;
            align-items: center;
            color: var(--bm-arr-muted-2);
            content: attr(data-label);
            font-size: 0.76rem;
            font-weight: 1000;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-v4-cell{
            background: linear-gradient(135deg, rgba(34,197,94,0.13), rgba(34,197,94,0.035));
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-pill{
            width: fit-content;
            max-width: 100%;
            min-height: 31px;
            padding: 7px 10px;
            font-size: 0.78rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-buy{
            grid-template-columns: 1fr;
            margin: 4px 12px 12px;
            padding: 14px;
            gap: 12px;
            border-radius: 17px;
            backdrop-filter: blur(12px);
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-buy-bottom{
            position: sticky;
            bottom: 10px;
            z-index: 10;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-buy strong{
            font-size: 0.96rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-buy span{
            font-size: 0.82rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-buy-button{
            width: 100%;
            min-height: 50px;
            padding: 0 18px;
            font-size: 0.96rem;
        }
    }

    @media (max-width: 420px){
        :where(html[data-bm-page="openView"]) .bm-arrv4-top{
            padding: 18px 12px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-eyebrow{
            font-size: 0.72rem;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-videos{
            width: calc(100% - 20px);
            margin: 10px auto 14px;
            gap: 10px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-video{
            padding: 7px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-video-title{
            align-items: flex-start;
            flex-direction: column;
            gap: 6px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-compare{
            padding: 0 10px 10px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-status-cell{
            grid-template-columns: 52px minmax(0, 1fr);
            gap: 8px;
        }
        :where(html[data-bm-page="openView"]) .bm-arrv4-pill{
            font-size: 0.75rem;
        }
    }

/* ==================== VISTA: html[data-bm-page="personal_finance_access_requests"] ==================== */
/* Origen: personal_finance_access_requests.php:279 */
:where(html[data-bm-page="personal_finance_access_requests"]) .pfar-page{
      min-height: calc(100vh - 110px);
      padding: 28px 16px 48px;
      color: #f8fafc;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-shell{
      width: min(1220px, 100%);
      margin: 0 auto;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-hero{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 20px;
      padding: 25px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 20px;
      background: linear-gradient(135deg, #111c31, #172640);
      box-shadow: 0 18px 45px rgba(2, 8, 23, .18);
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-kicker{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: #9fb0ff;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-hero h1{
      margin: 0 0 8px;
      color: #fff;
      font-size: clamp(24px, 4vw, 34px);
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-hero p{
      max-width: 760px;
      margin: 0;
      color: #aebed2;
      line-height: 1.65;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-back{
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border: 1px solid rgba(148, 163, 184, .22);
      border-radius: 11px;
      color: #dbe5f2;
      background: rgba(255, 255, 255, .04);
      text-decoration: none;
      font-weight: 700;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-alert{
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 15px;
      padding: 14px 16px;
      border-radius: 13px;
      line-height: 1.55;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-alert.error{
      border: 1px solid rgba(240, 82, 82, .28);
      color: #fecaca;
      background: rgba(127, 29, 29, .18);
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-alert.success{
      border: 1px solid rgba(34, 197, 94, .28);
      color: #bbf7d0;
      background: rgba(20, 83, 45, .18);
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-alert.warning{
      border: 1px solid rgba(245, 158, 11, .28);
      color: #fde68a;
      background: rgba(120, 53, 15, .18);
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-stats{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-stat{
      padding: 17px;
      border: 1px solid rgba(148, 163, 184, .16);
      border-radius: 15px;
      background: #111b2e;
      text-decoration: none;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-stat span,
:where(html[data-bm-page="personal_finance_access_requests"]) .pfar-stat strong{ display: block; }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-stat span{ color: #91a3ba; font-size: 12px; }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-stat strong{ margin-top: 4px; color: #fff; font-size: 25px; }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-stat.is-active{ border-color: rgba(79, 108, 247, .5); background: rgba(79, 108, 247, .12); }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-panel{
      overflow: hidden;
      border: 1px solid rgba(148, 163, 184, .17);
      border-radius: 18px;
      background: #111b2e;
      box-shadow: 0 16px 38px rgba(2, 8, 23, .16);
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-toolbar{
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 14px;
      padding: 17px;
      border-bottom: 1px solid rgba(148, 163, 184, .14);
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-search{ display: flex; gap: 9px; width: min(520px, 100%); }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-search input{
      flex: 1;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid rgba(148, 163, 184, .24);
      border-radius: 10px;
      color: #f8fafc;
      background: #0d1728;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-search button{
      padding: 10px 14px;
      border: 0;
      border-radius: 10px;
      color: #fff;
      background: #4f6cf7;
      font-weight: 800;
      cursor: pointer;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-total{ color: #91a3ba; font-size: 13px; white-space: nowrap; }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-table-wrap{ overflow-x: auto; }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-table{ width: 100%; border-collapse: collapse; min-width: 920px; }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-table th,
:where(html[data-bm-page="personal_finance_access_requests"]) .pfar-table td{
      padding: 14px 16px;
      border-bottom: 1px solid rgba(148, 163, 184, .10);
      text-align: left;
      vertical-align: middle;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-table th{
      color: #91a3ba;
      font-size: 11px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-email{ color: #fff; font-weight: 750; }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-muted{ color: #91a3ba; font-size: 12px; }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-badge{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 800;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-badge.active{ color: #bbf7d0; background: rgba(34, 197, 94, .14); }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-badge.expired{ color: #fde68a; background: rgba(245, 158, 11, .14); }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-badge.revoked{ color: #fecaca; background: rgba(240, 82, 82, .14); }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-badge.product{ color: #c7d2fe; background: rgba(79, 108, 247, .16); }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-action{
      padding: 8px 11px;
      border: 1px solid rgba(148, 163, 184, .22);
      border-radius: 9px;
      color: #dbe5f2;
      background: rgba(255, 255, 255, .04);
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-action.danger{ color: #fecaca; border-color: rgba(240, 82, 82, .24); }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-empty{ padding: 45px 20px; color: #91a3ba; text-align: center; }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-pagination{
      display: flex;
      justify-content: center;
      gap: 7px;
      padding: 17px;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-pagination a,
:where(html[data-bm-page="personal_finance_access_requests"]) .pfar-pagination span{
      min-width: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 9px;
      color: #dbe5f2;
      text-decoration: none;
    }
    :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-pagination .is-current{ color: #fff; border-color: #4f6cf7; background: #4f6cf7; }
    @media (max-width: 800px){
      :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-hero,
:where(html[data-bm-page="personal_finance_access_requests"]) .pfar-toolbar{ align-items: stretch; flex-direction: column; }
      :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-back{ justify-content: center; }
      :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 480px){
      :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-page{ padding-inline: 12px; }
      :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-stats{ grid-template-columns: 1fr; }
      :where(html[data-bm-page="personal_finance_access_requests"]) .pfar-search{ flex-direction: column; }
    }

/* ==================== VISTA: html[data-bm-page="personal_finance"] ==================== */
/* Origen: personal_finance.php:3746 */
:where(html[data-bm-page="personal_finance"]) .pf-trial-gate-page{
          min-height: calc(100vh - 110px);
          padding: 32px 16px 48px;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-gate-shell{
          width: min(940px, 100%);
          margin: 0 auto;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-gate-card{
          position: relative;
          overflow: hidden;
          padding: clamp(24px, 5vw, 42px);
          border: 1px solid rgba(79, 108, 247, .30);
          border-radius: 22px;
          color: #f8fafc;
          background:
            radial-gradient(circle at 92% 8%, rgba(79, 108, 247, .24), transparent 34%),
            linear-gradient(145deg, rgba(17, 27, 46, .98), rgba(11, 18, 32, .98));
          box-shadow: 0 22px 55px rgba(2, 8, 23, .24);
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-gate-grid{
          display: grid;
          grid-template-columns: auto minmax(0, 1fr);
          gap: 22px;
          align-items: start;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-gate-icon{
          width: 62px;
          height: 62px;
          display: grid;
          place-items: center;
          border-radius: 18px;
          color: #aebcff;
          background: rgba(79, 108, 247, .16);
          font-size: 29px;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-kicker{
          display: inline-flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 10px;
          color: #aebcff;
          font-size: 13px;
          font-weight: 800;
          letter-spacing: .08em;
          text-transform: uppercase;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-gate-copy h1{
          margin: 0 0 12px;
          color: #fff;
          font-size: clamp(24px, 4vw, 34px);
          line-height: 1.18;
          letter-spacing: -.025em;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-gate-copy > p{
          max-width: 760px;
          margin: 0;
          color: #c3cfde;
          font-size: 15px;
          line-height: 1.75;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-benefits{
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 12px;
          margin: 24px 0;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-benefit{
          padding: 15px;
          border: 1px solid rgba(148, 163, 184, .16);
          border-radius: 14px;
          background: rgba(255, 255, 255, .035);
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-benefit i{
          display: block;
          margin-bottom: 9px;
          color: #8fa3ff;
          font-size: 21px;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-benefit strong{
          display: block;
          margin-bottom: 4px;
          color: #f8fafc;
          font-size: 14px;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-benefit span{
          display: block;
          color: #9fb0c7;
          font-size: 12.5px;
          line-height: 1.5;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-expiry-note,
:where(html[data-bm-page="personal_finance"]) .pf-trial-error{
          display: flex;
          gap: 10px;
          align-items: flex-start;
          margin-top: 18px;
          padding: 14px 16px;
          border-radius: 13px;
          line-height: 1.55;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-expiry-note{
          border: 1px solid rgba(245, 158, 11, .27);
          color: #fde68a;
          background: rgba(120, 53, 15, .17);
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-error{
          border: 1px solid rgba(240, 82, 82, .28);
          color: #fecaca;
          background: rgba(127, 29, 29, .18);
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-actions{
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-top: 24px;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-action{
          min-height: 46px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 11px 18px;
          border-radius: 12px;
          border: 1px solid transparent;
          font: inherit;
          font-weight: 800;
          text-decoration: none;
          cursor: pointer;
          transition: transform .18s ease, border-color .18s ease, background .18s ease;
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-action:hover{ transform: translateY(-1px); }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-action-primary{
          color: #fff;
          background: linear-gradient(135deg, #4f6cf7, #405be3);
          box-shadow: 0 12px 25px rgba(79, 108, 247, .25);
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-action-secondary{
          color: #dbe4f0;
          border-color: rgba(148, 163, 184, .24);
          background: rgba(255, 255, 255, .045);
        }
        :where(html[data-bm-page="personal_finance"]) .pf-trial-terms{
          margin-top: 13px;
          color: #8496ae;
          font-size: 12.5px;
          line-height: 1.55;
        }
        @media (max-width: 760px){
          :where(html[data-bm-page="personal_finance"]) .pf-trial-gate-grid{ grid-template-columns: 1fr; }
          :where(html[data-bm-page="personal_finance"]) .pf-trial-benefits{ grid-template-columns: 1fr; }
        }
        @media (max-width: 575.98px){
          :where(html[data-bm-page="personal_finance"]) .pf-trial-gate-page{ padding: 22px 12px 36px; }
          :where(html[data-bm-page="personal_finance"]) .pf-trial-actions > *{ width: 100%; }
        }

/* ==================== VISTA: html[data-bm-page="personal_finance"] ==================== */
/* Origen: personal_finance.php:6064 */
:where(html[data-bm-page="personal_finance"]):root{
      --pf-bg: #0b1220;
      --pf-bg-soft: #111b2e;
      --pf-surface: #162238;
      --pf-surface-raised: #1b2a43;
      --pf-border: rgba(148, 163, 184, .18);
      --pf-border-strong: rgba(148, 163, 184, .30);
      --pf-text: #f8fafc;
      --pf-muted: #9fb0c7;
      --pf-muted-strong: #cbd5e1;
      --pf-primary: #4f6cf7;
      --pf-primary-hover: #405be3;
      --pf-green: #22c55e;
      --pf-red: #f05252;
      --pf-amber: #f59e0b;
      --pf-shadow: 0 18px 45px rgba(2, 8, 23, .20);
      --pf-radius-lg: 20px;
      --pf-radius-md: 14px;
      --pf-radius-sm: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page{
      padding-top: 26px;
      padding-bottom: 34px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page *{
      box-sizing: border-box;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
      padding: 15px 17px;
      border: 1px solid rgba(79, 108, 247, .28);
      border-radius: 14px;
      color: #dbe4ff;
      background: linear-gradient(135deg, rgba(79, 108, 247, .14), rgba(17, 27, 46, .92));
    }

    :where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner-copy{
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner-copy > i{
      margin-top: 2px;
      color: #9fb0ff;
      font-size: 21px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner-copy strong,
:where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner-copy span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner-copy strong{
      margin-bottom: 3px;
      color: #fff;
      font-size: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner-copy span{
      color: #b7c5d9;
      font-size: 12.5px;
      line-height: 1.5;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner a{
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 13px;
      border: 1px solid rgba(159, 176, 255, .28);
      border-radius: 10px;
      color: #eef2ff;
      background: rgba(79, 108, 247, .14);
      font-size: 12.5px;
      font-weight: 800;
      text-decoration: none;
    }

    @media (max-width: 680px){
      :where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner{
        align-items: stretch;
        flex-direction: column;
      }
      :where(html[data-bm-page="personal_finance"]) .pf-trial-active-banner a{
        justify-content: center;
      }
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero{
      position: relative;
      overflow: hidden;
      border: 1px solid var(--pf-border);
      border-radius: 24px;
      background:
        radial-gradient(circle at 88% 12%, rgba(79, 108, 247, .25), transparent 34%),
        linear-gradient(135deg, #111c31 0%, #172640 100%);
      padding: 28px;
      box-shadow: var(--pf-shadow);
      margin-bottom: 22px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero::after{
      content: '';
      position: absolute;
      width: 190px;
      height: 190px;
      right: -70px;
      bottom: -105px;
      border-radius: 50%;
      border: 28px solid rgba(255, 255, 255, .035);
      pointer-events: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-content{
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #b9c6ff;
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero h2{
      color: var(--pf-text);
      font-size: clamp(1.65rem, 3vw, 2.35rem);
      line-height: 1.12;
      margin: 0 0 9px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero p{
      color: var(--pf-muted-strong);
      max-width: 720px;
      margin: 0;
      line-height: 1.65;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-actions,
:where(html[data-bm-page="personal_finance"]) .pf-filter-actions,
:where(html[data-bm-page="personal_finance"]) .pf-card-actions{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-pill,
:where(html[data-bm-page="personal_finance"]) .pf-period-pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--pf-border-strong);
      background: rgba(11, 18, 32, .48);
      color: var(--pf-muted-strong);
      font-size: .82rem;
      font-weight: 700;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-panel,
:where(html[data-bm-page="personal_finance"]) .card-style,
:where(html[data-bm-page="personal_finance"]) .modal-content,
:where(html[data-bm-page="personal_finance"]) .offcanvas,
:where(html[data-bm-page="personal_finance"]) .offcanvas-header,
:where(html[data-bm-page="personal_finance"]) .offcanvas-body{
      background: var(--pf-surface) !important;
      border-color: var(--pf-border) !important;
      color: var(--pf-muted) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-panel,
:where(html[data-bm-page="personal_finance"]) .card-style{
      border: 1px solid var(--pf-border);
      border-radius: var(--pf-radius-lg);
      box-shadow: 0 12px 34px rgba(2, 8, 23, .14);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-panel{
      padding: 18px;
      margin-bottom: 22px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-panel-header,
:where(html[data-bm-page="personal_finance"]) .pf-section-heading{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-panel-title,
:where(html[data-bm-page="personal_finance"]) .pf-section-title{
      margin: 0;
      color: var(--pf-text);
      font-weight: 800;
      font-size: 1rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-panel-copy,
:where(html[data-bm-page="personal_finance"]) .pf-section-copy{
      color: var(--pf-muted);
      font-size: .83rem;
      margin: 4px 0 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filters-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
    }


    :where(html[data-bm-page="personal_finance"]) .pf-filter-panel{
      padding: 0;
      overflow: hidden;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-disclosure{
      border: 1px solid var(--pf-border);
      border-radius: 18px;
      background: rgba(15, 25, 43, .66);
      overflow: hidden;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary{
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 74px;
      padding: 14px 16px;
      cursor: pointer;
      list-style: none;
      user-select: none;
      transition: background .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary::-webkit-details-marker{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary:hover,
:where(html[data-bm-page="personal_finance"]) .pf-filter-summary:focus-visible{
      background: rgba(79, 108, 247, .07);
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 39px;
      height: 39px;
      border: 1px solid rgba(79, 108, 247, .28);
      border-radius: 12px;
      background: rgba(79, 108, 247, .12);
      color: #aebaff;
      font-size: 17px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-copy{
      min-width: 0;
      flex: 1 1 auto;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-copy strong,
:where(html[data-bm-page="personal_finance"]) .pf-filter-summary-copy small{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-copy strong{
      color: var(--pf-text);
      font-size: .93rem;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-copy small{
      margin-top: 3px;
      color: var(--pf-muted);
      font-size: .78rem;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-action{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      color: #aebaff;
      font-size: .78rem;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-action > i{
      font-size: .72rem;
      transition: transform .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-disclosure[open] .pf-filter-summary-action > i{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-body{
      padding: 17px 16px 16px;
      border-top: 1px solid var(--pf-border);
      background: rgba(11, 18, 32, .28);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-body-head{
      margin-bottom: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-heading{
      align-items: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-navigation{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-nav-button{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      padding: 0;
      border: 1px solid var(--pf-border-strong);
      border-radius: 10px;
      background: var(--pf-bg-soft);
      color: var(--pf-muted-strong);
      text-decoration: none;
      cursor: pointer;
      transition: border-color .18s ease, color .18s ease, background .18s ease, opacity .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-nav-button:hover,
:where(html[data-bm-page="personal_finance"]) .pf-calendar-nav-button:focus-visible{
      border-color: rgba(79, 108, 247, .58);
      background: rgba(79, 108, 247, .11);
      color: #c7d2fe;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-nav-button:disabled{
      opacity: .38;
      cursor: not-allowed;
      border-color: var(--pf-border);
      background: var(--pf-bg-soft);
      color: var(--pf-muted);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-data-scope{
      min-height: 20px;
      margin-top: 8px;
      color: var(--pf-muted);
      font-size: .76rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-data-scope.is-outside{
      color: #fbbf24;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-jump{
      display: flex;
      align-items: center;
      gap: 7px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-month-picker{
      width: 168px;
      min-height: 38px !important;
      height: 38px;
      padding-top: 5px;
      padding-bottom: 5px;
      font-size: .8rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-current-label{
      min-height: 38px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-field-label,
:where(html[data-bm-page="personal_finance"]) .form-label{
      color: var(--pf-muted-strong) !important;
      font-size: .82rem;
      font-weight: 700;
      margin-bottom: 7px;
    }

    :where(html[data-bm-page="personal_finance"]) .form-control,
:where(html[data-bm-page="personal_finance"]) .form-select,
:where(html[data-bm-page="personal_finance"]) textarea,
:where(html[data-bm-page="personal_finance"]) input[type="text"],
:where(html[data-bm-page="personal_finance"]) input[type="date"],
:where(html[data-bm-page="personal_finance"]) input[type="number"]{
      min-height: 44px;
      border-radius: 11px !important;
      background: var(--pf-bg-soft) !important;
      color: var(--pf-text) !important;
      border: 1px solid var(--pf-border-strong) !important;
    }

    :where(html[data-bm-page="personal_finance"]) textarea.form-control{
      min-height: 110px;
    }

    :where(html[data-bm-page="personal_finance"]) .form-control::placeholder,
:where(html[data-bm-page="personal_finance"]) textarea::placeholder{
      color: #6f829c !important;
    }

    :where(html[data-bm-page="personal_finance"]) .form-control:focus,
:where(html[data-bm-page="personal_finance"]) .form-select:focus,
:where(html[data-bm-page="personal_finance"]) textarea:focus{
      border-color: var(--pf-primary) !important;
      box-shadow: 0 0 0 .23rem rgba(79, 108, 247, .18) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .form-text{
      color: var(--pf-muted) !important;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .btn{
      border-radius: 11px;
      font-weight: 700;
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }

    :where(html[data-bm-page="personal_finance"]) .btn-primary{
      background: var(--pf-primary) !important;
      border-color: var(--pf-primary) !important;
      box-shadow: 0 8px 20px rgba(79, 108, 247, .25) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .btn-primary:hover,
:where(html[data-bm-page="personal_finance"]) .btn-primary:focus{
      background: var(--pf-primary-hover) !important;
      border-color: var(--pf-primary-hover) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .btn-outline-secondary,
:where(html[data-bm-page="personal_finance"]) .btn-light{
      background: rgba(255, 255, 255, .02) !important;
      color: var(--pf-muted-strong) !important;
      border-color: var(--pf-border-strong) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .btn-outline-secondary:hover,
:where(html[data-bm-page="personal_finance"]) .btn-light:hover{
      background: rgba(148, 163, 184, .12) !important;
      color: var(--pf-text) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .btn-outline-danger{
      color: #fca5a5 !important;
      border-color: rgba(240, 82, 82, .45) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .btn-outline-danger:hover{
      color: #fff !important;
      background: rgba(240, 82, 82, .85) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-metrics-row{
      row-gap: 18px;
      margin-bottom: 4px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-metrics-row > [class*="col-"]{
      display: flex;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-card{
      position: relative;
      overflow: hidden;
      width: 100%;
      min-height: 154px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
      border: 1px solid var(--pf-border);
      border-radius: 18px;
      background: linear-gradient(145deg, var(--pf-surface) 0%, var(--pf-surface-raised) 100%);
      padding: 18px;
      box-shadow: 0 12px 30px rgba(2, 8, 23, .14);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-icon{
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(79, 108, 247, .14);
      color: #9cabff;
      border: 1px solid rgba(79, 108, 247, .25);
      font-size: 21px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-icon.income{
      background: rgba(34, 197, 94, .12);
      color: #6ee7a0;
      border-color: rgba(34, 197, 94, .24);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-icon.expense{
      background: rgba(240, 82, 82, .12);
      color: #fca5a5;
      border-color: rgba(240, 82, 82, .24);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-label{
      color: var(--pf-muted-strong);
      font-size: .82rem;
      font-weight: 800;
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-value{
      color: var(--pf-text);
      font-weight: 850;
      font-size: clamp(1.35rem, 2.6vw, 1.85rem);
      line-height: 1.08;
      margin: 0;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-value.income,
:where(html[data-bm-page="personal_finance"]) .amount-income{
      color: #68df96 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-value.expense,
:where(html[data-bm-page="personal_finance"]) .amount-expense{
      color: #ff9797 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-sub{
      color: var(--pf-muted);
      font-size: .78rem;
      line-height: 1.45;
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .card-style{
      padding: 20px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-wrap{
      position: relative;
      height: 310px;
      margin-top: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.compact{
      height: 285px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-empty-state{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      text-align: center;
      padding: 24px;
      color: var(--pf-muted);
      border: 1px dashed var(--pf-border-strong);
      border-radius: 14px;
      background: rgba(11, 18, 32, .26);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-empty-state i{
      font-size: 30px;
      color: #8295b0;
      margin-bottom: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-empty-state strong{
      color: var(--pf-muted-strong);
      margin-bottom: 5px;
    }

    /* Tabla de movimientos recientes: diseño independiente y perfectamente alineado. */
    :where(html[data-bm-page="personal_finance"]) .pf-table-wrap{
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      border: 1px solid var(--pf-border);
      border-radius: 14px;
      background: rgba(11, 18, 32, .26);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recent-table{
      width: 100%;
      min-width: 1080px;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0;
      margin: 0;
      color: var(--pf-muted-strong);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recent-table thead th{
      height: 50px;
      padding: 0 14px !important;
      background: #101a2b !important;
      border: 0 !important;
      border-bottom: 1px solid var(--pf-border-strong) !important;
      color: var(--pf-muted) !important;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .035em;
      line-height: 1;
      text-align: center !important;
      text-transform: uppercase;
      vertical-align: middle !important;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recent-table tbody td{
      height: 58px;
      padding: 0 14px !important;
      border: 0 !important;
      border-bottom: 1px solid var(--pf-border) !important;
      color: var(--pf-muted-strong);
      font-size: .84rem;
      line-height: 1.25;
      text-align: center !important;
      vertical-align: middle !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recent-table thead th:first-child,
:where(html[data-bm-page="personal_finance"]) .pf-recent-table tbody td:first-child{
      padding-left: 20px !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recent-table thead th:last-child,
:where(html[data-bm-page="personal_finance"]) .pf-recent-table tbody td:last-child{
      padding-right: 20px !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recent-table tbody tr:last-child td{
      border-bottom: 0 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recent-table tbody tr{
      transition: background .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recent-table tbody tr:hover{
      background: rgba(148, 163, 184, .055);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-cell-content{
      display: block;
      width: 100%;
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-description{
      color: var(--pf-text);
      font-weight: 650;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-notes{
      color: var(--pf-muted);
    }

    :where(html[data-bm-page="personal_finance"]) .movement-badge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-width: 76px;
      height: 28px;
      padding: 0 10px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: .70rem;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .movement-badge i{
      font-size: 10px;
      line-height: 1;
    }

    :where(html[data-bm-page="personal_finance"]) .movement-badge.income{
      background: rgba(34, 197, 94, .12);
      color: #72e49e;
      border-color: rgba(34, 197, 94, .28);
    }

    :where(html[data-bm-page="personal_finance"]) .movement-badge.expense{
      background: rgba(240, 82, 82, .12);
      color: #ff9c9c;
      border-color: rgba(240, 82, 82, .28);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-table-actions-cell{
      padding-left: 8px !important;
      padding-right: 8px !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-table-actions{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      width: auto;
      min-height: 28px;
      margin: 0 auto;
      padding: 0;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-table-actions form{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 !important;
      padding: 0 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-row-action{
      appearance: none;
      -webkit-appearance: none;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px;
      width: auto !important;
      height: 28px !important;
      min-width: 0 !important;
      min-height: 28px !important;
      max-height: 28px !important;
      margin: 0 !important;
      padding: 0 8px !important;
      border: 0 !important;
      border-radius: 7px !important;
      background: transparent !important;
      color: var(--pf-muted-strong);
      box-shadow: none !important;
      font-family: inherit;
      font-size: .72rem !important;
      font-weight: 750;
      line-height: 1 !important;
      white-space: nowrap;
      cursor: pointer;
      transition: color .16s ease, background .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-row-action i{
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 12px;
      height: 12px;
      margin: 0 !important;
      padding: 0 !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-row-action-edit:hover,
:where(html[data-bm-page="personal_finance"]) .pf-row-action-edit:focus-visible{
      color: var(--pf-text);
      background: rgba(148, 163, 184, .10) !important;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-row-action-delete{
      color: #f7a0a0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-row-action-delete:hover,
:where(html[data-bm-page="personal_finance"]) .pf-row-action-delete:focus-visible{
      color: #ffb8b8;
      background: rgba(240, 82, 82, .10) !important;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-scroll{
      overflow-x: auto;
      padding-bottom: 3px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar{
      min-width: 760px;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-grid{
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 9px;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-head{
      text-align: center;
      padding: 9px 6px;
      border-radius: 10px;
      color: var(--pf-muted);
      font-size: .73rem;
      font-weight: 800;
      background: rgba(11, 18, 32, .52);
      border: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-cell{
      position: relative;
      min-height: 112px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      padding: 10px;
      border: 1px solid var(--pf-border);
      border-radius: 13px;
      background: rgba(18, 30, 50, .88);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) button.calendar-cell{
      width: 100%;
      text-align: inherit;
      color: inherit;
      cursor: pointer;
    }

    :where(html[data-bm-page="personal_finance"]) button.calendar-cell:hover,
:where(html[data-bm-page="personal_finance"]) button.calendar-cell:focus-visible{
      transform: translateY(-2px);
      border-color: rgba(79, 108, 247, .58);
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-cell.empty{
      background: rgba(11, 18, 32, .36);
      opacity: .55;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-cell.pos{
      background: linear-gradient(155deg, rgba(34, 197, 94, .13), rgba(18, 30, 50, .92));
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-cell.neg{
      background: linear-gradient(155deg, rgba(240, 82, 82, .13), rgba(18, 30, 50, .92));
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-daynum{
      position: absolute;
      top: 9px;
      left: 10px;
      color: var(--pf-muted);
      font-size: .74rem;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-value{
      color: var(--pf-text);
      font-size: .93rem;
      font-weight: 850;
      text-align: center;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-meta{
      color: var(--pf-muted);
      font-size: .7rem;
      text-align: center;
      margin-top: 5px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-alert{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border-radius: 13px;
      padding: 13px 15px;
      margin-bottom: 14px;
      border: 1px solid;
      line-height: 1.5;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-alert.success{
      border-color: rgba(34, 197, 94, .28);
      background: rgba(34, 197, 94, .10);
      color: #a7f3c0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-alert.error{
      border-color: rgba(240, 82, 82, .32);
      background: rgba(240, 82, 82, .10);
      color: #fecaca;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-welcome-card{
      position: relative;
      overflow: hidden;
      border: 1px solid var(--pf-border);
      border-radius: 26px;
      padding: clamp(24px, 5vw, 46px);
      background:
        radial-gradient(circle at 86% 18%, rgba(79, 108, 247, .26), transparent 30%),
        linear-gradient(145deg, #111c31 0%, #182a47 100%);
      box-shadow: var(--pf-shadow);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-welcome-layout{
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
      gap: 34px;
      align-items: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-welcome-card h2{
      color: var(--pf-text);
      font-size: clamp(1.8rem, 4vw, 2.65rem);
      line-height: 1.12;
      margin: 0 0 13px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-welcome-card > p,
:where(html[data-bm-page="personal_finance"]) .pf-welcome-copy{
      color: var(--pf-muted-strong);
      font-size: .98rem;
      line-height: 1.7;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-benefits{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 24px 0 26px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-benefit{
      padding: 14px;
      border-radius: 14px;
      border: 1px solid var(--pf-border);
      background: rgba(11, 18, 32, .38);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-benefit i{
      display: block;
      color: #9cabff;
      font-size: 20px;
      margin-bottom: 9px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-benefit strong{
      display: block;
      color: var(--pf-text);
      font-size: .84rem;
      margin-bottom: 4px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-benefit span{
      color: var(--pf-muted);
      font-size: .76rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-welcome-visual{
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-wallet-visual{
      width: 220px;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(79, 108, 247, .10);
      border: 1px solid rgba(79, 108, 247, .25);
      box-shadow: inset 0 0 0 22px rgba(79, 108, 247, .045);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-wallet-visual i{
      color: #9cabff;
      font-size: 76px;
    }

    :where(html[data-bm-page="personal_finance"]) .modal-content,
:where(html[data-bm-page="personal_finance"]) .offcanvas{
      border: 1px solid var(--pf-border-strong) !important;
      box-shadow: var(--pf-shadow);
    }

    :where(html[data-bm-page="personal_finance"]) .modal-header,
:where(html[data-bm-page="personal_finance"]) .modal-footer,
:where(html[data-bm-page="personal_finance"]) .offcanvas-header{
      border-color: var(--pf-border) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .modal-title,
:where(html[data-bm-page="personal_finance"]) .offcanvas-title,
:where(html[data-bm-page="personal_finance"]) .text-strong{
      color: var(--pf-text) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .btn-close{
      filter: invert(1) grayscale(100%) brightness(190%);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-settings-intro{
      padding: 13px 14px;
      border-radius: 12px;
      border: 1px solid var(--pf-border);
      background: rgba(11, 18, 32, .35);
      color: var(--pf-muted);
      font-size: .82rem;
      line-height: 1.55;
      margin-bottom: 18px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-offcanvas{
      --bs-offcanvas-width: 500px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-section{
      padding: 16px;
      border: 1px solid var(--pf-border);
      border-radius: 15px;
      background: rgba(11, 18, 32, .30);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-section + .pf-catalog-section{
      margin-top: 16px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-section-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 13px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-section-title{
      margin: 0;
      color: var(--pf-text);
      font-size: .94rem;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-section-copy{
      margin: 4px 0 0;
      color: var(--pf-muted);
      font-size: .76rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-count{
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 31px;
      height: 31px;
      padding: 0 9px;
      border-radius: 999px;
      background: rgba(79, 108, 247, .12);
      border: 1px solid rgba(79, 108, 247, .26);
      color: #b9c6ff;
      font-size: .72rem;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-add{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 9px;
      margin-bottom: 13px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-add .btn{
      min-height: 44px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-list{
      display: grid;
      gap: 8px;
      max-height: 285px;
      overflow-y: auto;
      padding-right: 2px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-item{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-height: 48px;
      padding: 7px 8px;
      border: 1px solid var(--pf-border);
      border-radius: 11px;
      background: rgba(17, 27, 46, .70);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-rename{
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 30px;
      align-items: center;
      gap: 7px;
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-name-input{
      width: 100%;
      min-width: 0;
      min-height: 32px !important;
      height: 32px;
      padding: 5px 8px !important;
      border-radius: 8px !important;
      font-size: .80rem;
      font-weight: 700;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-save,
:where(html[data-bm-page="personal_finance"]) .pf-catalog-delete{
      appearance: none;
      -webkit-appearance: none;
      width: 30px;
      height: 30px;
      min-width: 30px;
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-save{
      color: #aebaff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-save:hover,
:where(html[data-bm-page="personal_finance"]) .pf-catalog-save:focus-visible{
      background: rgba(79, 108, 247, .14);
      color: #d1d7ff;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-delete{
      color: #f7a0a0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-delete:hover,
:where(html[data-bm-page="personal_finance"]) .pf-catalog-delete:focus-visible{
      background: rgba(240, 82, 82, .12);
      color: #ffc0c0;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-catalog-empty{
      padding: 14px;
      border: 1px dashed var(--pf-border);
      border-radius: 11px;
      color: var(--pf-muted);
      font-size: .77rem;
      line-height: 1.45;
      text-align: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-field-heading{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 7px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-field-heading .form-label{
      margin-bottom: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-inline-manage{
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      background: transparent;
      color: #aebaff;
      padding: 2px 0;
      font-size: .72rem;
      font-weight: 750;
      cursor: pointer;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-inline-manage:hover,
:where(html[data-bm-page="personal_finance"]) .pf-inline-manage:focus-visible{
      color: #d4dcff;
      text-decoration: underline;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-list{
      display: grid;
      gap: 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-block{
      overflow: hidden;
      border: 1px solid var(--pf-border);
      border-radius: 14px;
      background: rgba(11, 18, 32, .28);
      transition: border-color .18s ease, background .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-block.is-active{
      border-color: rgba(79, 108, 247, .36);
      background: rgba(16, 26, 43, .72);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-head{
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-title{
      color: var(--pf-text);
      font-size: .84rem;
      font-weight: 800;
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-copy{
      color: var(--pf-muted);
      font-size: .73rem;
      line-height: 1.4;
      margin: 3px 0 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-head .form-check{
      flex: 0 0 auto;
      margin: 0;
      min-height: auto;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-head .form-check-input{
      width: 2.4em;
      height: 1.25em;
      margin-top: 0;
      cursor: pointer;
      background-color: #26344b;
      border-color: var(--pf-border-strong);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-head .form-check-input:checked{
      background-color: var(--pf-primary);
      border-color: var(--pf-primary);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-content{
      display: none;
      padding: 0 14px 14px;
      border-top: 1px solid transparent;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-optional-content.is-visible{
      display: block;
      padding-top: 14px;
      border-top-color: var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-entry-details{
      display: grid;
      gap: 3px;
      text-align: left;
      line-height: 1.3;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-entry-detail{
      display: block;
      min-width: 0;
      color: var(--pf-muted);
      font-size: .73rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-entry-detail strong{
      color: var(--pf-muted-strong);
      font-weight: 750;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-entry-detail-empty{
      color: #62738c;
      text-align: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-summary{
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--pf-border);
      background: rgba(11, 18, 32, .35);
      color: var(--pf-muted-strong);
      margin-bottom: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-entry{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      padding: 13px 0;
      border-bottom: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-entry:last-child{
      border-bottom: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-entry-title{
      color: var(--pf-text);
      font-weight: 750;
      margin-bottom: 4px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-entry-meta{
      color: var(--pf-muted);
      font-size: .78rem;
      line-height: 1.45;
    }


    :where(html[data-bm-page="personal_finance"]) .pf-day-entry-main{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-entry-side{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-entry-amount{
      font-weight: 850;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-entry-actions{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      flex-wrap: wrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-action{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 34px;
      padding: 6px 9px;
      border: 1px solid var(--pf-border);
      border-radius: 9px;
      background: rgba(11, 18, 32, .46);
      color: var(--pf-muted-strong);
      font-size: .72rem;
      font-weight: 800;
      cursor: pointer;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-action-edit:hover,
:where(html[data-bm-page="personal_finance"]) .pf-day-action-edit:focus-visible{
      border-color: rgba(79, 108, 247, .48);
      background: rgba(79, 108, 247, .12);
      color: #c7d2fe;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-action-delete{
      color: #f7a0a0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-action-delete:hover,
:where(html[data-bm-page="personal_finance"]) .pf-day-action-delete:focus-visible{
      border-color: rgba(240, 82, 82, .42);
      background: rgba(240, 82, 82, .11);
      color: #fecaca;
      outline: none;
    }

    @media (max-width: 575px){
      :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-action span{
        display: none;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-summary{
        min-height: 68px;
        padding: 12px 13px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-body{
        padding: 15px 13px 13px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-calendar-navigation{
        width: 100%;
        justify-content: flex-start;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-calendar-jump{
        flex: 1 1 210px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-calendar-month-picker{
        width: auto;
        flex: 1 1 auto;
        min-width: 140px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-calendar-current-label{
        width: 100%;
        justify-content: center;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-day-entry{
        grid-template-columns: minmax(0, 1fr);
      }

      :where(html[data-bm-page="personal_finance"]) .pf-day-entry-side{
        align-items: stretch;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-day-entry-actions{
        justify-content: flex-start;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-day-action{
        flex: 1 1 110px;
      }
    }

    @media (max-width: 1199px){
      :where(html[data-bm-page="personal_finance"]) .pf-filters-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-actions{
        grid-column: 1 / -1;
      }
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-access-main{
      padding: clamp(18px, 2.4vw, 24px);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-overview-head{
      margin-bottom: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-link-box{
      margin-top: 15px;
    }

    @media (max-width: 991px){
      :where(html[data-bm-page="personal_finance"]) .pf-welcome-layout{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-welcome-visual{
        display: none;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-benefits{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 575px){
      :where(html[data-bm-page="personal_finance"]) .pf-page{
        padding-top: 16px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-hero,
:where(html[data-bm-page="personal_finance"]) .pf-panel,
:where(html[data-bm-page="personal_finance"]) .card-style,
:where(html[data-bm-page="personal_finance"]) .pf-welcome-card{
        border-radius: 17px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-hero,
:where(html[data-bm-page="personal_finance"]) .pf-panel,
:where(html[data-bm-page="personal_finance"]) .card-style{
        padding: 16px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filters-grid{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-actions{
        grid-column: auto;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-actions .btn,
:where(html[data-bm-page="personal_finance"]) .pf-hero-actions .btn{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-currency-pill,
:where(html[data-bm-page="personal_finance"]) .pf-period-pill{
        width: 100%;
        justify-content: center;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-chart-wrap,
:where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.compact{
        height: 260px;
      }
    }
  

    /* Resumen independiente por moneda: nunca se mezclan importes de monedas diferentes. */
    :where(html[data-bm-page="personal_finance"]) .pf-currency-summary-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
      gap: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-summary-card{
      padding: 17px;
      border-radius: 16px;
      border: 1px solid var(--pf-border);
      background: linear-gradient(145deg, rgba(17, 27, 46, .82), rgba(27, 42, 67, .80));
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-summary-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 15px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-code{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 48px;
      height: 30px;
      padding: 0 9px;
      border-radius: 999px;
      background: rgba(79, 108, 247, .14);
      border: 1px solid rgba(79, 108, 247, .28);
      color: #b9c6ff;
      font-size: .73rem;
      font-weight: 850;
      letter-spacing: .045em;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-name{
      color: var(--pf-text);
      font-size: .94rem;
      font-weight: 800;
      line-height: 1.3;
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-summary-values{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-stat{
      min-width: 0;
      padding: 10px 11px;
      border-radius: 11px;
      background: rgba(11, 18, 32, .38);
      border: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-stat span{
      display: block;
      color: var(--pf-muted);
      font-size: .69rem;
      font-weight: 750;
      margin-bottom: 4px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-stat strong{
      display: block;
      color: var(--pf-text);
      font-size: .91rem;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-no-conversion-note{
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 11px 13px;
      border: 1px solid rgba(245, 158, 11, .25);
      border-radius: 12px;
      background: rgba(245, 158, 11, .08);
      color: #f8d795;
      font-size: .78rem;
      line-height: 1.5;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analysis-heading{
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analysis-pill{
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(79, 108, 247, .12);
      border: 1px solid rgba(79, 108, 247, .28);
      color: #b9c6ff;
      font-size: .76rem;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-attachment-cell{
      text-align: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-attachment-thumb,
:where(html[data-bm-page="personal_finance"]) .pf-attachment-empty{
      width: 36px;
      height: 36px;
      margin: 0 auto;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-attachment-thumb{
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--pf-border-strong);
      background: rgba(11, 18, 32, .55);
      color: #b9c6ff;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-attachment-thumb:hover,
:where(html[data-bm-page="personal_finance"]) .pf-attachment-thumb:focus-visible{
      transform: translateY(-1px);
      border-color: rgba(79, 108, 247, .65);
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-attachment-thumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-attachment-thumb i{
      font-size: 16px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-attachment-empty{
      color: #61738c;
      border: 1px dashed var(--pf-border);
      font-size: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-upload-box{
      padding: 15px;
      border: 1px dashed var(--pf-border-strong);
      border-radius: 14px;
      background: rgba(11, 18, 32, .28);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-upload-actions{
      display: flex;
      gap: 9px;
      flex-wrap: wrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-upload-actions .btn{
      min-height: 38px;
      font-size: .78rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-upload-preview{
      display: none;
      grid-template-columns: 74px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      margin-top: 13px;
      padding: 11px;
      border-radius: 12px;
      border: 1px solid var(--pf-border);
      background: rgba(11, 18, 32, .40);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-upload-preview.is-visible{
      display: grid;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-upload-preview-image{
      width: 74px;
      height: 62px;
      border-radius: 9px;
      object-fit: cover;
      background: rgba(148, 163, 184, .08);
      border: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-upload-preview-name{
      color: var(--pf-text);
      font-size: .79rem;
      font-weight: 750;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-upload-preview-meta{
      color: var(--pf-muted);
      font-size: .72rem;
      margin-top: 3px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-current-attachment{
      display: none;
      margin-bottom: 13px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid var(--pf-border);
      background: rgba(11, 18, 32, .36);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-current-attachment.is-visible{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-current-attachment-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-current-attachment-name{
      color: var(--pf-text);
      font-size: .80rem;
      font-weight: 750;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-image-viewer{
      min-height: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      border: 1px solid var(--pf-border);
      background: rgba(11, 18, 32, .55);
      overflow: hidden;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-image-viewer img{
      display: block;
      width: 100%;
      max-height: 68vh;
      object-fit: contain;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-image-no-preview{
      display: none;
      text-align: center;
      padding: 34px 20px;
      color: var(--pf-muted);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-image-no-preview i{
      display: block;
      font-size: 40px;
      color: #8295b0;
      margin-bottom: 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-attachment{
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 6px;
      padding: 4px 7px;
      border: 0;
      border-radius: 7px;
      background: rgba(79, 108, 247, .10);
      color: #b9c6ff;
      font-size: .70rem;
      font-weight: 750;
      cursor: pointer;
    }


    /* Corrección definitiva de fondos claros heredados por el tema.
       Los identificadores elevan la especificidad por encima de las reglas
       globales de hover de tarjetas, tablas y botones. */
    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard:focus,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard:focus-within,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard:focus,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard:focus-within{
      background-color: var(--pf-surface) !important;
      background-image: none !important;
      border-color: var(--pf-border) !important;
      color: var(--pf-muted) !important;
      filter: none !important;
      transform: none !important;
      opacity: 1 !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard::before,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard::after,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard:hover::before,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard:hover::after,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard::before,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard::after,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard:hover::before,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard:hover::after{
      background: transparent !important;
      background-image: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-section-heading,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-section-heading:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-section-heading,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-section-heading:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-calendar-scroll,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-calendar-scroll:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-calendar,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-calendar:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-grid,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-grid:hover{
      background-color: transparent !important;
      background-image: none !important;
      filter: none !important;
    }

    /* Movimientos recientes: se pinta cada celda de forma explícita para que
       ningún hover de Bootstrap o del tema pueda revelar un fondo blanco. */
    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-table-wrap,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-table-wrap:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-table-wrap:focus-within{
      background-color: #0f192a !important;
      background-image: none !important;
      border-color: var(--pf-border) !important;
      filter: none !important;
      box-shadow: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table:focus-within{
      --bs-table-color: var(--pf-muted-strong) !important;
      --bs-table-bg: #121e32 !important;
      --bs-table-border-color: var(--pf-border) !important;
      --bs-table-accent-bg: transparent !important;
      --bs-table-striped-color: var(--pf-muted-strong) !important;
      --bs-table-striped-bg: #121e32 !important;
      --bs-table-active-color: var(--pf-muted-strong) !important;
      --bs-table-active-bg: #17263d !important;
      --bs-table-hover-color: var(--pf-muted-strong) !important;
      --bs-table-hover-bg: #17263d !important;
      background-color: #121e32 !important;
      background-image: none !important;
      color: var(--pf-muted-strong) !important;
      box-shadow: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr:focus,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr:focus-within{
      background-color: #121e32 !important;
      background-image: none !important;
      color: var(--pf-muted-strong) !important;
      filter: none !important;
      box-shadow: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr > td,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr > th,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr > td:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr > th:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr > td:focus,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr > th:focus{
      --bs-table-bg: #121e32 !important;
      --bs-table-accent-bg: transparent !important;
      background: #121e32 !important;
      background-color: #121e32 !important;
      background-image: none !important;
      color: var(--pf-muted-strong) !important;
      filter: none !important;
      box-shadow: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr:hover > td,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr:hover > th,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr:focus-within > td,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-recent-table tbody tr:focus-within > th{
      --bs-table-bg: #17263d !important;
      --bs-table-accent-bg: transparent !important;
      background: #17263d !important;
      background-color: #17263d !important;
      background-image: none !important;
      color: var(--pf-muted-strong) !important;
      filter: none !important;
      box-shadow: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-row-action,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-row-action:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-row-action:focus,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-row-action:focus-visible,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-row-action:active,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-attachment-thumb,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-attachment-thumb:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-attachment-thumb:focus,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-attachment-thumb:focus-visible,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-attachment-thumb:active{
      background-color: transparent !important;
      background-image: none !important;
      filter: none !important;
      box-shadow: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-row-action-edit:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-row-action-edit:focus-visible{
      background-color: rgba(148, 163, 184, .10) !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-row-action-delete:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-row-action-delete:focus-visible{
      background-color: rgba(240, 82, 82, .10) !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-attachment-thumb,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-attachment-thumb:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-attachment-thumb:focus-visible{
      background-color: rgba(11, 18, 32, .55) !important;
    }

    /* Calendario: se neutraliza la apariencia nativa del botón y cualquier
       fondo claro aplicado por el tema en hover, focus o active. */
    :where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-head,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-head:hover{
      background: rgba(11, 18, 32, .52) !important;
      background-color: rgba(11, 18, 32, .52) !important;
      background-image: none !important;
      color: var(--pf-muted) !important;
      filter: none !important;
      box-shadow: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell:focus,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell:focus-visible,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell:active{
      background: rgba(18, 30, 50, .88) !important;
      background-color: rgba(18, 30, 50, .88) !important;
      background-image: none !important;
      border-color: var(--pf-border) !important;
      color: inherit !important;
      filter: none !important;
      box-shadow: none !important;
      opacity: 1 !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell:focus,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell:focus-visible,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell:active{
      -webkit-appearance: none !important;
      appearance: none !important;
      font: inherit !important;
      background: rgba(18, 30, 50, .88) !important;
      background-color: rgba(18, 30, 50, .88) !important;
      background-image: none !important;
      border-style: solid !important;
      border-width: 1px !important;
      border-color: var(--pf-border) !important;
      color: inherit !important;
      outline: none !important;
      filter: none !important;
      box-shadow: none !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.pos,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.pos:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.pos:focus,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.pos:focus-visible,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.pos:active,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.pos,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.pos:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.pos:focus,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.pos:focus-visible,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.pos:active{
      background: linear-gradient(155deg, rgba(34, 197, 94, .13), rgba(18, 30, 50, .92)) !important;
      background-color: rgba(18, 30, 50, .92) !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.neg,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.neg:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.neg:focus,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.neg:focus-visible,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.neg:active,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.neg,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.neg:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.neg:focus,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.neg:focus-visible,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell.neg:active{
      background: linear-gradient(155deg, rgba(240, 82, 82, .13), rgba(18, 30, 50, .92)) !important;
      background-color: rgba(18, 30, 50, .92) !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.empty,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-cell.empty:hover{
      background: rgba(11, 18, 32, .36) !important;
      background-color: rgba(11, 18, 32, .36) !important;
      background-image: none !important;
      opacity: .55 !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard button.calendar-cell:focus-visible{
      border-color: rgba(79, 108, 247, .58) !important;
      transform: translateY(-2px) !important;
    }

    @media (max-width: 767px){
      :where(html[data-bm-page="personal_finance"]) .pf-catalog-add{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-catalog-add .btn{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-currency-summary-values{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-upload-preview{
        grid-template-columns: 58px minmax(0, 1fr);
      }

      :where(html[data-bm-page="personal_finance"]) .pf-upload-preview-image{
        width: 58px;
        height: 52px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-upload-preview .pf-clear-upload{
        grid-column: 1 / -1;
        width: 100%;
      }
    }


    /* ================================================================
       DISTRIBUCIÓN RESPONSIVA FINAL
       Las líneas aprovechan todo el ancho disponible y no dependen del
       gap global de Bootstrap o del tema principal.
       ================================================================ */
    :where(html[data-bm-page="personal_finance"]) .pf-filters-grid{
      display: flex !important;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filters-grid > *{
      flex: 1 1 220px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filters-grid > .pf-filter-actions{
      display: flex !important;
      flex: 1 1 300px;
      grid-column: auto !important;
      align-self: flex-end;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-actions .btn{
      flex: 1 1 130px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-metrics-grid{
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 18px;
      width: 100%;
      margin: 0 0 26px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-metric-item{
      display: flex;
      flex: 1 1 270px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-metric-item .pf-kpi-card{
      height: 100%;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analytics-grid{
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 22px;
      width: 100%;
      margin: 0 0 30px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analytics-item{
      display: flex;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analytics-item-balance{
      flex: 7 1 520px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analytics-item-monthly{
      flex: 5 1 360px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analytics-item-daily{
      flex: 1 1 100%;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dashboard-card{
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      margin: 0 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dashboard-card .pf-chart-wrap,
:where(html[data-bm-page="personal_finance"]) .pf-dashboard-card .pf-empty-state{
      flex: 1 1 auto;
    }


    :where(html[data-bm-page="personal_finance"]) .pf-financial-health-heading{
      margin: 4px 0 16px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-financial-health-heading .pf-section-copy{
      max-width: 760px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-card-insight{
      min-height: 218px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-icon.savings{
      background: rgba(45, 212, 191, .12);
      color: #5eead4;
      border-color: rgba(45, 212, 191, .25);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-icon.recurring{
      background: rgba(245, 158, 11, .12);
      color: #fbbf24;
      border-color: rgba(245, 158, 11, .25);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-icon.spending{
      background: rgba(192, 132, 252, .12);
      color: #d8b4fe;
      border-color: rgba(192, 132, 252, .25);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-icon.largest{
      background: rgba(251, 113, 133, .12);
      color: #fda4af;
      border-color: rgba(251, 113, 133, .25);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-advanced-analytics-grid{
      margin-bottom: 30px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analytics-item-major{
      flex: 7 1 520px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analytics-item-minor{
      flex: 5 1 350px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analytics-item-half{
      flex: 1 1 430px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-analytics-item-full{
      flex: 1 1 100%;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-stage{
      position: relative;
      display: flex;
      flex: 1 1 auto;
      min-height: 300px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-stage .pf-chart-wrap{
      width: 100%;
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.pf-chart-donut{
      height: 330px;
      min-height: 330px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.pf-chart-horizontal{
      height: 350px;
      min-height: 350px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.pf-chart-savings{
      height: 320px;
      min-height: 320px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.pf-chart-weekday{
      height: 310px;
      min-height: 310px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-inline-empty{
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 28px;
      border: 1px dashed var(--pf-border);
      border-radius: 14px;
      background: rgba(11, 18, 32, .34);
      color: var(--pf-muted);
      text-align: center;
      z-index: 2;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-inline-empty[hidden]{
      display: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-inline-empty i{
      color: #9cabff;
      font-size: 28px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-inline-empty strong{
      color: var(--pf-text);
      font-size: .9rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-inline-empty span{
      max-width: 330px;
      font-size: .78rem;
      line-height: 1.45;
    }

    /* El tema general aplicaba un fondo claro en hover a card-style.
       Se fija explícitamente la apariencia oscura de cada superficie. */
    :where(html[data-bm-page="personal_finance"]) .pf-page .card-style,
:where(html[data-bm-page="personal_finance"]) .pf-page .card-style:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page .card-style:focus,
:where(html[data-bm-page="personal_finance"]) .pf-page .card-style:focus-within{
      background: var(--pf-surface) !important;
      border-color: var(--pf-border) !important;
      color: var(--pf-muted) !important;
      transform: none !important;
      filter: none !important;
      box-shadow: 0 12px 34px rgba(2, 8, 23, .14) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page .pf-panel,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-panel:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-panel:focus-within{
      background: var(--pf-surface) !important;
      border-color: var(--pf-border) !important;
      color: var(--pf-muted) !important;
      transform: none !important;
      filter: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page .pf-kpi-card,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-kpi-card:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-kpi-card:focus-within{
      background: linear-gradient(145deg, var(--pf-surface) 0%, var(--pf-surface-raised) 100%) !important;
      border-color: var(--pf-border) !important;
      color: var(--pf-muted) !important;
      transform: none !important;
      filter: none !important;
      box-shadow: 0 12px 30px rgba(2, 8, 23, .14) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page .pf-empty-state,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-empty-state:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-table-wrap,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-table-wrap:hover{
      background: rgba(11, 18, 32, .26) !important;
      color: var(--pf-muted) !important;
      transform: none !important;
      filter: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page .pf-no-conversion-note,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-no-conversion-note:hover{
      background: rgba(245, 158, 11, .08) !important;
      color: #f8d795 !important;
      transform: none !important;
      filter: none !important;
    }

    /* Evita que los estilos globales de tablas conviertan en blanco las filas
       de Movimientos recientes al pasar el cursor o enfocar sus acciones. */
    :where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr:focus,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr:focus-within{
      --bs-table-bg: transparent !important;
      --bs-table-accent-bg: transparent !important;
      --bs-table-hover-bg: transparent !important;
      --bs-table-hover-color: var(--pf-muted-strong) !important;
      background: transparent !important;
      color: var(--pf-muted-strong) !important;
      filter: none !important;
      box-shadow: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr > td,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr > td:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr > th,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr > th:hover{
      --bs-table-bg: transparent !important;
      --bs-table-accent-bg: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      color: var(--pf-muted-strong) !important;
      box-shadow: none !important;
      filter: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr:hover > td,
:where(html[data-bm-page="personal_finance"]) .pf-page .pf-recent-table tbody tr:focus-within > td{
      --bs-table-accent-bg: rgba(148, 163, 184, .055) !important;
      background-color: rgba(148, 163, 184, .055) !important;
      background-image: none !important;
      color: var(--pf-muted-strong) !important;
      box-shadow: none !important;
    }

    /* Los días con movimientos son botones. El tema general aplicaba sobre
       ellos un fondo blanco en hover; se conserva siempre la superficie oscura. */
    :where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell:focus,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell:focus-visible,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell:active{
      background: rgba(18, 30, 50, .88) !important;
      border-color: var(--pf-border) !important;
      color: inherit !important;
      filter: none !important;
      box-shadow: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell:focus-visible{
      border-color: rgba(79, 108, 247, .58) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.pos,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.pos:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.pos:focus,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.pos:focus-visible,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.pos:active{
      background: linear-gradient(155deg, rgba(34, 197, 94, .13), rgba(18, 30, 50, .92)) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.neg,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.neg:hover,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.neg:focus,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.neg:focus-visible,
:where(html[data-bm-page="personal_finance"]) .pf-page button.calendar-cell.neg:active{
      background: linear-gradient(155deg, rgba(240, 82, 82, .13), rgba(18, 30, 50, .92)) !important;
    }

    @media (max-width: 767px){
      :where(html[data-bm-page="personal_finance"]) .pf-filters-grid > *,
:where(html[data-bm-page="personal_finance"]) .pf-filters-grid > .pf-filter-actions,
:where(html[data-bm-page="personal_finance"]) .pf-metric-item,
:where(html[data-bm-page="personal_finance"]) .pf-analytics-item-balance,
:where(html[data-bm-page="personal_finance"]) .pf-analytics-item-monthly,
:where(html[data-bm-page="personal_finance"]) .pf-analytics-item-daily,
:where(html[data-bm-page="personal_finance"]) .pf-analytics-item-major,
:where(html[data-bm-page="personal_finance"]) .pf-analytics-item-minor,
:where(html[data-bm-page="personal_finance"]) .pf-analytics-item-half,
:where(html[data-bm-page="personal_finance"]) .pf-analytics-item-full{
        flex-basis: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-actions{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-chart-currency-select{
        width: 100% !important;
        max-width: none !important;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.pf-chart-donut,
:where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.pf-chart-horizontal,
:where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.pf-chart-savings,
:where(html[data-bm-page="personal_finance"]) .pf-chart-wrap.pf-chart-weekday{
        height: 285px;
        min-height: 285px;
      }
    }

    @media (max-width: 575px){
      :where(html[data-bm-page="personal_finance"]) .pf-filter-actions{
        flex-direction: column;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-actions .btn{
        width: 100%;
        flex-basis: auto;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-metrics-grid,
:where(html[data-bm-page="personal_finance"]) .pf-analytics-grid{
        gap: 14px;
      }
    }


    /* Aislamiento definitivo de las dos secciones que heredaban el hover claro
       del tema general. Se conserva su apariencia, contenido y funcionalidad. */
    :where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section:hover,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section:focus,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section:focus-visible,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section:focus-within,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section:active{
      --pf-surface: #162238 !important;
      position: relative;
      display: block;
      width: 100%;
      padding: 20px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(148, 163, 184, .18) !important;
      border-radius: 20px;
      background: #162238 !important;
      background-color: #162238 !important;
      background-image: none !important;
      color: #9fb0c7 !important;
      box-shadow: 0 12px 34px rgba(2, 8, 23, .14) !important;
      filter: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section::before,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section::after,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section:hover::before,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section:hover::after,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section:focus-within::before,
:where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section:focus-within::after{
      content: none !important;
      display: none !important;
      background: transparent !important;
      background-image: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard:hover,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard:focus-within,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard:focus-within{
      background: #162238 !important;
      background-color: #162238 !important;
      background-image: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-section-heading,
:where(html[data-bm-page="personal_finance"]) #pfRecentMovementsCard .pf-section-heading:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-section-heading,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-section-heading:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-calendar-scroll,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-calendar-scroll:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-calendar,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .pf-calendar:hover,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-grid,
:where(html[data-bm-page="personal_finance"]) #pfMonthlyCalendarCard .calendar-grid:hover{
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
    }

    @media (max-width: 575px){
      :where(html[data-bm-page="personal_finance"]) .pf-locked-dark-section{
        padding: 16px;
        border-radius: 17px;
      }
    }


    :where(html[data-bm-page="personal_finance"]) .pf-settings-divider{
      height: 1px;
      margin: 26px 0;
      background: var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-access-card{
      border: 1px solid var(--pf-border);
      border-radius: 17px;
      padding: 18px;
      background: rgba(15, 25, 43, .72);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-access-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-access-title{
      margin: 0;
      color: var(--pf-text);
      font-size: 1rem;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-access-copy{
      margin: 6px 0 0;
      color: var(--pf-muted);
      font-size: .84rem;
      line-height: 1.55;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-status{
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex: 0 0 auto;
      border-radius: 999px;
      padding: 7px 10px;
      font-size: .72rem;
      font-weight: 800;
      white-space: nowrap;
      border: 1px solid rgba(148, 163, 184, .25);
      color: var(--pf-muted-strong);
      background: rgba(148, 163, 184, .08);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-status.active{
      color: #9ce8b8;
      border-color: rgba(34, 197, 94, .28);
      background: rgba(34, 197, 94, .10);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-status::before{
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-key-rules{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px 12px;
      margin: 13px 0 17px;
      padding: 0;
      list-style: none;
      color: var(--pf-muted);
      font-size: .76rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-key-rules li{
      display: flex;
      align-items: flex-start;
      gap: 7px;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-key-rules li::before{
      content: '•';
      color: #91a3ff;
      font-weight: 900;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-secret-input-wrap{
      position: relative;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-secret-input-wrap .form-control{
      padding-right: 74px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-secret-toggle{
      position: absolute;
      top: 50%;
      right: 7px;
      transform: translateY(-50%);
      border: 0;
      border-radius: 8px;
      padding: 7px 9px;
      color: #aebcff;
      background: transparent;
      font-size: .72rem;
      font-weight: 800;
      cursor: pointer;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-secret-toggle:hover{
      background: rgba(79, 108, 247, .11);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-link-box{
      margin-top: 17px;
      border: 1px solid var(--pf-border);
      border-radius: 13px;
      padding: 13px;
      background: rgba(11, 18, 32, .46);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-link-label{
      color: var(--pf-muted-strong);
      font-size: .76rem;
      font-weight: 800;
      margin-bottom: 7px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-link-row{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-link-row .form-control{
      min-width: 0;
      font-size: .78rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-danger-zone{
      margin-top: 16px;
      padding-top: 15px;
      border-top: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-last-used{
      margin-top: 11px;
      color: var(--pf-muted);
      font-size: .75rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-access-main{
      margin: 0 0 24px;
      padding: clamp(20px, 3vw, 30px);
      border-radius: 22px;
      background:
        radial-gradient(circle at 4% 0%, rgba(79, 108, 247, .16), transparent 24rem),
        rgba(15, 25, 43, .84);
      box-shadow: 0 18px 45px rgba(2, 8, 23, .18);
      scroll-margin-top: 22px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-main-grid{
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
      gap: clamp(20px, 3vw, 32px);
      align-items: start;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-overview{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-overview-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-kicker{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 9px;
      color: #aebcff;
      font-size: .74rem;
      font-weight: 850;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-access-main .pf-external-access-title{
      font-size: clamp(1.15rem, 2vw, 1.45rem);
      letter-spacing: -.02em;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-access-main .pf-external-access-copy{
      max-width: 620px;
      font-size: .88rem;
      line-height: 1.5;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-benefits{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-benefit{
      min-width: 0;
      border: 1px solid var(--pf-border);
      border-radius: 13px;
      padding: 12px;
      background: rgba(11, 18, 32, .38);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-benefit i{
      color: #9cabff;
      font-size: 1rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-benefit strong{
      display: block;
      margin-top: 8px;
      color: var(--pf-text);
      font-size: .8rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-benefit span{
      display: block;
      margin-top: 4px;
      color: var(--pf-muted);
      font-size: .73rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config{
      min-width: 0;
      border: 1px solid var(--pf-border);
      border-radius: 17px;
      padding: 18px;
      background: rgba(11, 18, 32, .50);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-title{
      margin: 0;
      color: var(--pf-text);
      font-size: 1rem;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-copy{
      margin: 7px 0 0;
      color: var(--pf-muted);
      font-size: .8rem;
      line-height: 1.55;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-details{
      margin-top: 16px;
      border: 1px solid var(--pf-border);
      border-radius: 15px;
      overflow: hidden;
      background: rgba(11, 18, 32, .42);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-summary{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 66px;
      padding: 13px 15px;
      color: var(--pf-text);
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-summary::-webkit-details-marker{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-summary:hover{
      background: rgba(79, 108, 247, .07);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-summary:focus-visible{
      outline: 2px solid rgba(145, 163, 255, .8);
      outline-offset: -2px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-summary-main{
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-summary-main strong,
:where(html[data-bm-page="personal_finance"]) .pf-external-config-summary-main small{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-summary-main strong{
      color: var(--pf-text);
      font-size: .86rem;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-summary-main small{
      margin-top: 2px;
      color: var(--pf-muted);
      font-size: .74rem;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      flex: 0 0 35px;
      border-radius: 10px;
      color: #aebcff;
      background: rgba(79, 108, 247, .12);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-chevron{
      flex: 0 0 auto;
      color: var(--pf-muted-strong);
      transition: transform .2s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-details[open] .pf-external-config-chevron{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-body{
      padding: 17px;
      border-top: 1px solid var(--pf-border);
      background: rgba(7, 13, 24, .18);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-external-config-body .pf-external-config-copy{
      margin: 0 0 15px;
    }

    @media (max-width: 991px){
      :where(html[data-bm-page="personal_finance"]) .pf-external-main-grid{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-external-benefits{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 700px){
      :where(html[data-bm-page="personal_finance"]) .pf-external-benefits{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 575px){
      :where(html[data-bm-page="personal_finance"]) .pf-external-access-head{
        flex-direction: column;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-key-rules{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-external-link-row{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-external-access-main{
        padding: 17px;
        border-radius: 18px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-external-overview-head{
        flex-direction: column;
      }
    }



    /* ================================================================
       RESUMEN MULTIMONEDA
       ================================================================ */
    :where(html[data-bm-page="personal_finance"]) .pf-kpi-card{
      justify-content: flex-start;
      min-height: 230px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-stack{
      display: flex;
      flex-direction: column;
      gap: 9px;
      width: 100%;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-main,
:where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-secondary{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-main{
      align-items: flex-end;
      padding-bottom: 11px;
      border-bottom: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-main strong{
      color: var(--pf-text);
      font-size: clamp(1.28rem, 2.2vw, 1.72rem);
      line-height: 1.08;
      text-align: right;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-secondary{
      min-height: 29px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-secondary strong{
      color: var(--pf-muted-strong);
      font-size: .9rem;
      line-height: 1.15;
      text-align: right;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-main.income strong,
:where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-secondary.income strong{
      color: #68df96;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-main.expense strong,
:where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-secondary.expense strong{
      color: #ff9797;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-currency-label{
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-code-chip{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(79, 108, 247, .12);
      border: 1px solid rgba(79, 108, 247, .24);
      color: #aebaff;
      font-size: .68rem;
      font-weight: 850;
      letter-spacing: .04em;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-tag{
      color: var(--pf-muted);
      font-size: .67rem;
      font-weight: 750;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-more-currencies{
      border-top: 1px dashed var(--pf-border);
      padding-top: 7px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-more-currencies summary{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #9cabff;
      cursor: pointer;
      list-style: none;
      font-size: .75rem;
      font-weight: 800;
      user-select: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-more-currencies summary::-webkit-details-marker{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-more-currencies summary i{
      transition: transform .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-more-currencies[open] summary i{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-more-list{
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-kpi-card .pf-kpi-sub{
      margin-top: auto;
      padding-top: 7px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-chart-currency-select{
      width: auto;
      min-width: 170px;
      max-width: 220px;
      min-height: 38px !important;
      padding-top: 6px;
      padding-bottom: 6px;
      font-size: .77rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar{
      min-width: 900px;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-cell{
      min-height: 158px;
      justify-content: flex-start;
      padding-top: 35px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-money-list{
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-money{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--pf-muted-strong);
      font-size: .7rem;
      line-height: 1.15;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-money b{
      color: #aebaff;
      font-size: .62rem;
      letter-spacing: .04em;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-money span{
      text-align: right;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-money.primary{
      padding-bottom: 7px;
      border-bottom: 1px solid var(--pf-border);
      color: var(--pf-text);
      font-size: .84rem;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-money.primary b{
      font-size: .68rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-extra{
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-extra[hidden]{
      display: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-more{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      align-self: flex-start;
      margin-top: 1px;
      color: #9cabff;
      font-size: .66rem;
      font-weight: 850;
      cursor: pointer;
      border-radius: 7px;
      padding: 3px 5px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-more:hover,
:where(html[data-bm-page="personal_finance"]) .pf-calendar-more:focus-visible{
      background: rgba(79, 108, 247, .12);
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-more i{
      font-size: .62rem;
      transition: transform .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-more[aria-expanded="true"] i{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-value-empty{
      margin: auto 0 8px;
      color: var(--pf-muted) !important;
    }

    @media (max-width: 767px){
      :where(html[data-bm-page="personal_finance"]) .pf-chart-currency-select{
        width: 100%;
        max-width: none;
      }
    }



    :where(html[data-bm-page="personal_finance"]) .pf-day-summary-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
      color: var(--pf-muted);
      font-size: .78rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-total-list{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-total-chip{
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 9px;
      border-radius: 9px;
      background: rgba(79, 108, 247, .1);
      border: 1px solid rgba(79, 108, 247, .2);
      color: var(--pf-muted-strong);
      font-size: .76rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-day-total-chip b{
      color: #aebaff;
      font-size: .66rem;
      letter-spacing: .04em;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-open-view-badge{
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 38px;
      padding: 8px 12px;
      border: 1px solid rgba(34, 197, 94, .28);
      border-radius: 10px;
      background: rgba(34, 197, 94, .09);
      color: #86efac;
      font-size: .78rem;
      font-weight: 800;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-open-view-logout-form{
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-open-view-logout-form .btn{
      white-space: nowrap;
    }


    /* ================================================================
       MODALES Y PANELES RESPONSIVOS
       - Nunca exceden la altura visible del dispositivo.
       - El encabezado y las acciones permanecen visibles.
       - Solo el contenido central se desplaza.
       - Se respetan las áreas seguras de iPhone/Android.
       - Permanecen por encima del acceso flotante de chatgpt.php.
       ================================================================ */
    :where(html[data-bm-page="personal_finance"]):root{
      --pf-modal-edge-gap: 18px;
      --pf-layer-backdrop-z: 2147483644;
      --pf-layer-content-z: 2147483646;
      --pf-single-date-layer-z: 2147483647;
      --pf-chat-below-layer-z: 2147483000;
    }

    :where(html[data-bm-page="personal_finance"]) .modal{
      z-index: var(--pf-layer-content-z) !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior: contain;
    }

    :where(html[data-bm-page="personal_finance"]) .modal-backdrop{
      z-index: var(--pf-layer-backdrop-z) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .offcanvas{
      z-index: var(--pf-layer-content-z) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .offcanvas-backdrop{
      z-index: var(--pf-layer-backdrop-z) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .modal-dialog{
      width: auto;
      margin-top: max(var(--pf-modal-edge-gap), env(safe-area-inset-top, 0px)) !important;
      margin-bottom: max(var(--pf-modal-edge-gap), env(safe-area-inset-bottom, 0px)) !important;
      max-height: calc(100vh - (var(--pf-modal-edge-gap) * 2));
      max-height: calc(100dvh - max(var(--pf-modal-edge-gap), env(safe-area-inset-top, 0px)) - max(var(--pf-modal-edge-gap), env(safe-area-inset-bottom, 0px)));
    }

    :where(html[data-bm-page="personal_finance"]) .modal-dialog-scrollable{
      height: auto !important;
      min-height: 0 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .modal-dialog-scrollable .modal-content,
:where(html[data-bm-page="personal_finance"]) .modal-content{
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-height: calc(100vh - (var(--pf-modal-edge-gap) * 2));
      max-height: calc(100dvh - max(var(--pf-modal-edge-gap), env(safe-area-inset-top, 0px)) - max(var(--pf-modal-edge-gap), env(safe-area-inset-bottom, 0px)));
      overflow: hidden;
    }

    :where(html[data-bm-page="personal_finance"]) .modal-content > .modal-header,
:where(html[data-bm-page="personal_finance"]) .modal-content > .modal-footer,
:where(html[data-bm-page="personal_finance"]) .modal-content > form > .modal-footer{
      flex: 0 0 auto;
    }

    :where(html[data-bm-page="personal_finance"]) .modal-content > .modal-body,
:where(html[data-bm-page="personal_finance"]) .modal-content > form > .modal-body{
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
    }

    /* Los modales de registro envuelven body y footer dentro de un formulario. */
    :where(html[data-bm-page="personal_finance"]) #entryModal .modal-content > form,
:where(html[data-bm-page="personal_finance"]) #recurringModal .modal-content > form{
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }

    :where(html[data-bm-page="personal_finance"]) .modal-header{
      position: relative;
      z-index: 2;
      background: var(--pf-surface) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .modal-footer{
      position: relative;
      z-index: 2;
      background: var(--pf-surface) !important;
      box-shadow: 0 -12px 28px rgba(2, 8, 23, .16);
    }

    :where(html[data-bm-page="personal_finance"]) body.modal-open{
      overscroll-behavior: none;
    }

    /* El elemento flotante incluido mediante chatgpt.php baja de capa y deja
       de capturar pulsaciones mientras haya un modal u offcanvas abierto. */
    :where(html[data-bm-page="personal_finance"]) body.pf-finance-layer-open .pf-chat-under-finance-layer{
      z-index: var(--pf-chat-below-layer-z) !important;
      pointer-events: none !important;
    }

    @media (max-width: 575px){
      :where(html[data-bm-page="personal_finance"]):root{
        --pf-modal-edge-gap: 12px;
      }

      :where(html[data-bm-page="personal_finance"]) .modal{
        padding-left: 9px !important;
        padding-right: 9px !important;
      }

      :where(html[data-bm-page="personal_finance"]) .modal-dialog,
:where(html[data-bm-page="personal_finance"]) .modal-dialog.modal-lg,
:where(html[data-bm-page="personal_finance"]) .modal-dialog.modal-xl{
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      :where(html[data-bm-page="personal_finance"]) .modal-content{
        border-radius: 16px !important;
      }

      :where(html[data-bm-page="personal_finance"]) .modal-header{
        align-items: flex-start;
        gap: 12px;
        padding: 15px 15px 13px;
      }

      :where(html[data-bm-page="personal_finance"]) .modal-header > div{
        min-width: 0;
      }

      :where(html[data-bm-page="personal_finance"]) .modal-title{
        font-size: 1rem;
        line-height: 1.3;
      }

      :where(html[data-bm-page="personal_finance"]) .modal-body{
        padding: 15px;
      }

      :where(html[data-bm-page="personal_finance"]) .modal-footer{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 9px;
        padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 0px));
      }

      :where(html[data-bm-page="personal_finance"]) .modal-footer > *{
        width: 100%;
        margin: 0 !important;
      }

      :where(html[data-bm-page="personal_finance"]) #entryModal .modal-body,
:where(html[data-bm-page="personal_finance"]) #recurringModal .modal-body{
        padding-bottom: 18px;
      }

      :where(html[data-bm-page="personal_finance"]) #attachmentModal .pf-image-viewer{
        max-height: none;
      }

      :where(html[data-bm-page="personal_finance"]) #attachmentModal .pf-image-viewer img{
        max-height: calc(100dvh - 230px);
        object-fit: contain;
      }
    }

  
    /* ================================================================
       RECURRENTES — EXPERIENCIA GUIADA Y LÍNEA DE TIEMPO
       ================================================================ */
    :where(html[data-bm-page="personal_finance"]) .pf-recurring-offcanvas{
      --bs-offcanvas-width: min(700px, 100vw);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-offcanvas .offcanvas-header{
      align-items: flex-start;
      gap: 14px;
      padding: 20px 20px 16px;
      border-bottom: 1px solid var(--pf-border);
      background:
        radial-gradient(circle at top right, rgba(79, 108, 247, .14), transparent 40%),
        var(--pf-surface);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-offcanvas .offcanvas-body{
      padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-header{
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-header-icon,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-modal-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(99, 102, 241, .30);
      border-radius: 13px;
      background: rgba(79, 108, 247, .12);
      color: #aebaff;
      font-size: 20px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-header-copy{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-header-copy p,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-modal-copy p{
      margin: 4px 0 0;
      color: var(--pf-muted);
      font-size: .78rem;
      line-height: 1.48;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-overview{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin-bottom: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-stat{
      min-width: 0;
      padding: 11px 12px;
      border: 1px solid var(--pf-border);
      border-radius: 13px;
      background: rgba(11, 18, 32, .42);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-stat strong{
      display: block;
      color: var(--pf-text);
      font-size: 1rem;
      font-weight: 850;
      line-height: 1.1;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-stat span{
      display: block;
      margin-top: 4px;
      color: var(--pf-muted);
      font-size: .67rem;
      font-weight: 720;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-toolbar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
      padding: 14px;
      border: 1px solid rgba(99, 102, 241, .24);
      border-radius: 15px;
      background: linear-gradient(135deg, rgba(79, 108, 247, .10), rgba(11, 18, 32, .42));
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-toolbar-copy{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-toolbar-copy strong{
      display: block;
      margin-bottom: 3px;
      color: var(--pf-text);
      font-size: .8rem;
      font-weight: 830;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-toolbar-copy span{
      color: var(--pf-muted);
      font-size: .72rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-how-it-works{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 16px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-how-step{
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-height: 70px;
      padding: 11px;
      border: 1px solid var(--pf-border);
      border-radius: 12px;
      background: rgba(11, 18, 32, .28);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-how-step b{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      justify-self: center;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(79, 108, 247, .15);
      color: #c3cbff;
      font-size: .74rem;
      line-height: 1;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-how-step strong{
      display: block;
      color: var(--pf-muted-strong);
      font-size: .7rem;
      line-height: 1.25;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-how-step span{
      display: block;
      margin-top: 2px;
      color: var(--pf-muted);
      font-size: .64rem;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-list{
      display: grid;
      gap: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card{
      position: relative;
      overflow: hidden;
      border: 1px solid var(--pf-border);
      border-radius: 17px;
      background: linear-gradient(145deg, rgba(17, 27, 46, .80), rgba(9, 16, 29, .72));
      box-shadow: 0 12px 30px rgba(2, 8, 23, .12);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card::before{
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: rgba(248, 113, 113, .78);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card.is-income::before{
      background: rgba(74, 222, 128, .78);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card.is-paused{
      opacity: .80;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-main{
      padding: 16px 16px 13px 18px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-identity{
      display: flex;
      align-items: flex-start;
      gap: 11px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-type-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(248, 113, 113, .22);
      border-radius: 12px;
      background: rgba(248, 113, 113, .09);
      color: #fca5a5;
      font-size: 17px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card.is-income .pf-recurring-type-icon{
      border-color: rgba(74, 222, 128, .22);
      background: rgba(74, 222, 128, .09);
      color: #86efac;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-name{
      margin: 0 0 4px;
      color: var(--pf-text);
      font-size: .96rem;
      font-weight: 860;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-category{
      color: var(--pf-muted);
      font-size: .72rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-amount{
      flex: 0 0 auto;
      text-align: right;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amount{
      display: block;
      color: var(--pf-text);
      font-size: 1.04rem;
      font-weight: 880;
      line-height: 1.25;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-current-caption{
      display: block;
      margin-top: 4px;
      color: var(--pf-muted);
      font-size: .62rem;
      font-weight: 720;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-badges{
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-status,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-period-badge,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-frequency-chip{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 27px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: .66rem;
      font-weight: 800;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-status{
      border: 1px solid rgba(34, 197, 94, .25);
      background: rgba(34, 197, 94, .10);
      color: #8ce7ae;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-status.paused{
      border-color: rgba(245, 158, 11, .28);
      background: rgba(245, 158, 11, .09);
      color: #f6d18c;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-status.finished{
      border-color: var(--pf-border-strong);
      background: rgba(148, 163, 184, .08);
      color: var(--pf-muted-strong);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-status::before{
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period-badge{
      border: 1px solid rgba(99, 102, 241, .28);
      background: rgba(99, 102, 241, .10);
      color: #b7c0ff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-frequency-chip{
      border: 1px solid var(--pf-border);
      background: rgba(11, 18, 32, .44);
      color: var(--pf-muted-strong);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-next{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 13px;
      padding: 11px 12px;
      border: 1px solid rgba(99, 102, 241, .20);
      border-radius: 12px;
      background: rgba(79, 108, 247, .07);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-next span{
      color: var(--pf-muted);
      font-size: .68rem;
      font-weight: 720;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-next strong{
      color: var(--pf-text);
      font-size: .77rem;
      font-weight: 830;
      text-align: right;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-current-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-current-item{
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid var(--pf-border);
      border-radius: 11px;
      background: rgba(8, 15, 27, .36);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-current-item span{
      display: block;
      margin-bottom: 3px;
      color: var(--pf-muted);
      font-size: .61rem;
      font-weight: 740;
      text-transform: uppercase;
      letter-spacing: .035em;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-current-item strong{
      display: block;
      color: var(--pf-muted-strong);
      font-size: .7rem;
      line-height: 1.38;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-history{
      margin: 0 16px 13px 18px;
      border: 1px solid var(--pf-border);
      border-radius: 13px;
      background: rgba(8, 15, 27, .30);
      overflow: hidden;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-history summary{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 12px;
      color: var(--pf-muted-strong);
      font-size: .73rem;
      font-weight: 810;
      cursor: pointer;
      list-style: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-history summary::-webkit-details-marker{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-history summary i{
      font-size: .7rem;
      transition: transform .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-history[open] summary i{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-history-intro{
      padding: 0 12px 10px;
      color: var(--pf-muted);
      font-size: .67rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-timeline{
      position: relative;
      display: grid;
      gap: 0;
      padding: 0 12px 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period{
      position: relative;
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 9px;
      padding: 9px 0;
      border-top: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period-marker{
      position: relative;
      width: 10px;
      height: 10px;
      margin: 5px 0 0 2px;
      border: 2px solid rgba(148, 163, 184, .60);
      border-radius: 50%;
      background: var(--pf-surface);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period.is-current .pf-recurring-period-marker{
      border-color: #8798ff;
      background: #8798ff;
      box-shadow: 0 0 0 4px rgba(79, 108, 247, .13);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period-title{
      color: var(--pf-text);
      font-size: .73rem;
      font-weight: 820;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period-current{
      display: inline-flex;
      align-items: center;
      padding: 3px 6px;
      border-radius: 999px;
      background: rgba(79, 108, 247, .13);
      color: #b8c2ff;
      font-size: .59rem;
      font-weight: 820;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period-amount{
      margin-top: 4px;
      color: var(--pf-muted-strong);
      font-size: .72rem;
      font-weight: 790;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period-meta{
      margin-top: 3px;
      color: var(--pf-muted);
      font-size: .65rem;
      line-height: 1.42;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-extra{
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin: 0 16px 13px 18px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-extra span{
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 8px;
      border: 1px solid var(--pf-border);
      border-radius: 9px;
      background: rgba(8, 15, 27, .28);
      color: var(--pf-muted);
      font-size: .65rem;
      line-height: 1.3;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-footer{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 16px 12px 18px;
      border-top: 1px solid var(--pf-border);
      background: rgba(8, 15, 27, .30);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-linked-count{
      color: var(--pf-muted);
      font-size: .65rem;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-actions{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-actions form{
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-actions .btn{
      min-height: 33px;
      padding: 6px 9px;
      font-size: .7rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-empty{
      padding: 30px 18px;
      text-align: center;
      border: 1px dashed var(--pf-border-strong);
      border-radius: 15px;
      color: var(--pf-muted);
      background: rgba(11, 18, 32, .25);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-empty i{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      margin-bottom: 12px;
      border-radius: 15px;
      background: rgba(79, 108, 247, .10);
      color: #93a4ff;
      font-size: 24px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-empty strong{
      display: block;
      margin-bottom: 5px;
      color: var(--pf-text);
      font-size: .9rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-empty span{
      display: block;
      max-width: 430px;
      margin: 0 auto;
      font-size: .73rem;
      line-height: 1.5;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-empty .btn{
      margin-top: 14px;
    }

    /* Modal guiado */
    :where(html[data-bm-page="personal_finance"]) #recurringModal .modal-dialog{
      max-width: 1080px;
    }

    :where(html[data-bm-page="personal_finance"]) #recurringModal .modal-header{
      padding: 17px 19px;
      border-bottom: 1px solid var(--pf-border);
      background:
        radial-gradient(circle at top right, rgba(79, 108, 247, .13), transparent 38%),
        var(--pf-surface) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-modal-heading{
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-modal-copy{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-modal-copy .modal-title{
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-modal-layout{
      display: grid;
      grid-template-columns: minmax(0, 1fr) 286px;
      gap: 16px;
      align-items: start;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-column{
      display: grid;
      gap: 13px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-choice{
      padding: 15px;
      border: 1px solid rgba(99, 102, 241, .30);
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(79, 108, 247, .12), rgba(8, 15, 27, .42));
      box-shadow: 0 14px 34px rgba(2, 6, 23, .16);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-heading{
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-icon{
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 44px;
      height: 44px;
      margin: 0 !important;
      border-radius: 13px;
      background: rgba(79, 108, 247, .20);
      color: #c3cbff;
      font-size: 18px;
      line-height: 1 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-icon i,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option-icon i,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-section-number i,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-timeline-explanation-icon i{
      display: block;
      margin: 0;
      line-height: 1;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-eyebrow{
      display: block;
      margin-bottom: 2px;
      color: #aebaff;
      font-size: .61rem;
      font-weight: 850;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-heading strong{
      display: block;
      color: var(--pf-text);
      font-size: .88rem;
      line-height: 1.3;
      font-weight: 900;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-heading p{
      margin: 4px 0 0;
      color: var(--pf-muted);
      font-size: .67rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-options{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option{
      position: relative;
      display: block;
      margin: 0;
      cursor: pointer;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option input{
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option-content{
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-height: 82px;
      padding: 12px;
      border: 1px solid rgba(148, 163, 184, .22);
      border-radius: 13px;
      background: rgba(8, 15, 27, .40);
      transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option:hover .pf-recurring-path-option-content{
      border-color: rgba(129, 140, 248, .48);
      transform: translateY(-1px);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option-icon{
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 38px;
      height: 38px;
      margin: 0 !important;
      border-radius: 12px;
      background: rgba(148, 163, 184, .10);
      color: var(--pf-muted-strong);
      font-size: 16px;
      line-height: 1 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option-copy,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option-copy strong,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option-copy > span{
      display: block;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option-copy strong{
      color: var(--pf-text);
      font-size: .73rem;
      font-weight: 850;
      line-height: 1.3;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option-copy > span{
      margin-top: 3px;
      color: var(--pf-muted);
      font-size: .62rem;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option input:checked + .pf-recurring-path-option-content{
      border-color: rgba(99, 102, 241, .72);
      background: rgba(79, 108, 247, .16);
      box-shadow: 0 0 0 3px rgba(79, 108, 247, .10);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option input:checked + .pf-recurring-path-option-content .pf-recurring-path-option-icon{
      background: #4f6cf7;
      color: #fff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-option input:focus-visible + .pf-recurring-path-option-content{
      outline: 2px solid #aebaff;
      outline-offset: 2px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-notice{
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 11px;
      padding: 9px 10px;
      border-radius: 10px;
      background: rgba(8, 15, 27, .34);
      color: var(--pf-muted);
      font-size: .63rem;
      line-height: 1.42;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-notice i{
      flex: 0 0 auto;
      margin-top: 2px;
      color: #aebaff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-notice.is-success{
      background: rgba(34, 197, 94, .08);
      color: #bbf7d0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-notice.is-warning{
      background: rgba(245, 158, 11, .10);
      color: #fde68a;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-example{
      display: flex;
      flex-wrap: wrap;
      gap: 4px 7px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(148, 163, 184, .16);
      color: var(--pf-muted);
      font-size: .62rem;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-path-example strong{
      color: var(--pf-muted-strong);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-create-guide{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 12px;
      border: 1px solid rgba(99, 102, 241, .22);
      border-radius: 14px;
      background: rgba(79, 108, 247, .06);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-create-guide.is-hidden{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-guide-step{
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      min-height: 58px;
      padding: 8px 9px;
      border: 1px solid rgba(99, 102, 241, .12);
      border-radius: 11px;
      background: rgba(8, 15, 27, .22);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-guide-step b{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      justify-self: center;
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: rgba(79, 108, 247, .16);
      color: #c3cbff;
      font-size: .72rem;
      line-height: 1;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-guide-step strong{
      display: block;
      color: var(--pf-muted-strong);
      font-size: .68rem;
      line-height: 1.25;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-guide-step span{
      display: block;
      margin-top: 2px;
      color: var(--pf-muted);
      font-size: .61rem;
      line-height: 1.32;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-section{
      padding: 14px;
      border: 1px solid var(--pf-border);
      border-radius: 15px;
      background: rgba(11, 18, 32, .32);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-section-head{
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      margin: -2px 0 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-section-number{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      justify-self: center;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(99, 102, 241, .34);
      border-radius: 11px;
      background: rgba(79, 108, 247, .13);
      color: #c3cbff;
      font-size: .74rem;
      line-height: 1;
      font-weight: 850;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
    }

    /* Los selectores de texto de los encabezados no deben convertir el número en un bloque normal. */
    :where(html[data-bm-page="personal_finance"]) .pf-recurring-section-head > .pf-recurring-section-number{
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      font-size: .74rem !important;
      line-height: 1 !important;
      text-align: center !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-section-head strong{
      display: block;
      color: var(--pf-text);
      font-size: .8rem;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-section-head span{
      display: block;
      margin-top: 2px;
      color: var(--pf-muted);
      font-size: .67rem;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-grid .pf-span-2{
      grid-column: 1 / -1;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-scope{
      display: none;
      padding: 14px;
      border: 1px solid rgba(99, 102, 241, .26);
      border-radius: 15px;
      background: linear-gradient(135deg, rgba(79, 108, 247, .10), rgba(11, 18, 32, .38));
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-scope.is-visible{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-context{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-context i{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 31px;
      height: 31px;
      border-radius: 10px;
      background: rgba(79, 108, 247, .13);
      color: #b8c2ff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-context strong{
      display: block;
      color: var(--pf-text);
      font-size: .8rem;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-context span{
      display: block;
      margin-top: 2px;
      color: var(--pf-muted);
      font-size: .67rem;
      line-height: 1.42;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-question{
      margin-bottom: 9px;
      color: var(--pf-muted-strong);
      font-size: .72rem;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-options{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option,
:where(html[data-bm-page="personal_finance"]) .pf-frequency-option{
      position: relative;
      display: block;
      cursor: pointer;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option input,
:where(html[data-bm-page="personal_finance"]) .pf-frequency-option input{
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option-content{
      display: grid;
      grid-template-columns: 31px minmax(0, 1fr);
      gap: 9px;
      min-height: 100%;
      padding: 11px;
      border: 1px solid var(--pf-border-strong);
      border-radius: 12px;
      background: rgba(11, 18, 32, .42);
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 31px;
      height: 31px;
      border-radius: 9px;
      background: rgba(148, 163, 184, .09);
      color: var(--pf-muted-strong);
      font-size: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option-content strong{
      display: block;
      margin-bottom: 3px;
      color: var(--pf-text);
      font-size: .75rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option-content > span:last-child{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option-content > span:last-child > span{
      display: block;
      color: var(--pf-muted);
      font-size: .65rem;
      line-height: 1.42;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option-content em{
      display: block;
      margin-top: 5px;
      color: #aebaff;
      font-size: .61rem;
      font-style: normal;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option input:checked + .pf-recurring-edit-option-content,
:where(html[data-bm-page="personal_finance"]) .pf-frequency-option input:checked + .pf-frequency-option-content{
      border-color: rgba(79, 108, 247, .76);
      background: rgba(79, 108, 247, .13);
      box-shadow: 0 0 0 2px rgba(79, 108, 247, .08);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option input:checked + .pf-recurring-edit-option-content .pf-recurring-edit-option-icon{
      background: rgba(79, 108, 247, .18);
      color: #c3cbff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-option input:focus-visible + .pf-recurring-edit-option-content,
:where(html[data-bm-page="personal_finance"]) .pf-frequency-option input:focus-visible + .pf-frequency-option-content{
      border-color: rgba(156, 171, 255, .92);
      box-shadow: 0 0 0 3px rgba(79, 108, 247, .18);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-effective-date{
      display: none;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-effective-date.is-visible{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-flow{
      display: grid;
      grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      margin-top: 9px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-side{
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid var(--pf-border);
      border-radius: 10px;
      background: rgba(8, 15, 27, .34);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-side span{
      display: block;
      color: var(--pf-muted);
      font-size: .6rem;
      font-weight: 750;
      text-transform: uppercase;
      letter-spacing: .035em;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-side strong{
      display: block;
      margin-top: 3px;
      color: var(--pf-muted-strong);
      font-size: .68rem;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-arrow{
      color: #8fa0ff;
      text-align: center;
      font-size: 15px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-frequency-choice{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-frequency-option-content{
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 9px;
      min-height: 76px;
      padding: 11px;
      border: 1px solid var(--pf-border-strong);
      border-radius: 12px;
      background: rgba(8, 15, 27, .34);
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-frequency-option-content i{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(148, 163, 184, .09);
      color: var(--pf-muted-strong);
      font-size: 15px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-frequency-option-content strong{
      display: block;
      margin-bottom: 3px;
      color: var(--pf-text);
      font-size: .75rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-frequency-option-content span{
      display: block;
      color: var(--pf-muted);
      font-size: .65rem;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-frequency-config{
      display: none;
      margin-top: 10px;
      padding: 11px;
      border: 1px solid var(--pf-border);
      border-radius: 11px;
      background: rgba(8, 15, 27, .28);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-frequency-config.is-visible{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-frequency-config .input-group-text{
      border-color: var(--pf-border-strong);
      background: var(--pf-bg-soft);
      color: var(--pf-muted-strong);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-end-row{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-end-control{
      display: grid;
      gap: 8px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-never-ends-control{
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 12px;
      border: 1px solid var(--pf-border);
      border-radius: 11px;
      background: rgba(8, 15, 27, .30);
      color: var(--pf-muted-strong);
      font-size: .74rem;
      font-weight: 750;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-never-ends-control .form-check{
      margin: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-end-date-field{
      min-width: 0;
      transition: opacity .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-end-date-field .form-label,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-end-hint{
      transition: color .16s ease, opacity .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-end-date-field.is-disabled .form-label{
      color: #71829a !important;
    }

    :where(html[data-bm-page="personal_finance"]) #recurring_end_date:disabled{
      background: rgba(8, 15, 27, .72) !important;
      border-color: rgba(148, 163, 184, .12) !important;
      color: #64748b !important;
      box-shadow: none !important;
      cursor: not-allowed;
      filter: saturate(.45);
      opacity: .68;
    }

    :where(html[data-bm-page="personal_finance"]) #recurring_end_date:disabled::-webkit-calendar-picker-indicator{
      cursor: not-allowed;
      opacity: .22;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-end-date-field.is-disabled .pf-recurring-end-hint{
      color: #71829a !important;
      opacity: .9;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-start-locked input{
      opacity: .68;
      cursor: not-allowed;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-optional{
      border: 1px solid var(--pf-border);
      border-radius: 14px;
      background: rgba(11, 18, 32, .24);
      overflow: hidden;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-optional summary{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 13px;
      color: var(--pf-muted-strong);
      font-size: .73rem;
      font-weight: 790;
      cursor: pointer;
      list-style: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-optional summary::-webkit-details-marker{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-optional summary i{
      transition: transform .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-optional[open] summary i{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-optional-body{
      padding: 0 13px 13px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview{
      position: sticky;
      top: 0;
      padding: 14px;
      border: 1px solid rgba(99, 102, 241, .25);
      border-radius: 15px;
      background:
        radial-gradient(circle at top right, rgba(79, 108, 247, .13), transparent 44%),
        rgba(8, 15, 27, .58);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-eyebrow{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 11px;
      color: var(--pf-muted);
      font-size: .62rem;
      font-weight: 790;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-mode{
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(79, 108, 247, .12);
      color: #b8c2ff;
      font-size: .58rem;
      text-transform: none;
      letter-spacing: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-name{
      margin: 0;
      color: var(--pf-text);
      font-size: .9rem;
      font-weight: 860;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-amount{
      display: block;
      margin-top: 7px;
      color: #fca5a5;
      font-size: 1.18rem;
      font-weight: 880;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-amount.is-income{
      color: #86efac;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-list{
      display: grid;
      gap: 8px;
      margin-top: 13px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-row{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-row:last-child{
      padding-bottom: 0;
      border-bottom: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-row span{
      color: var(--pf-muted);
      font-size: .64rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-row strong{
      max-width: 62%;
      color: var(--pf-muted-strong);
      font-size: .67rem;
      font-weight: 790;
      line-height: 1.38;
      text-align: right;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-impact-notice{
      margin-top: 13px;
      padding: 11px;
      border: 1px solid rgba(99, 102, 241, .20);
      border-radius: 11px;
      background: rgba(79, 108, 247, .07);
      color: var(--pf-muted-strong);
      font-size: .68rem;
      line-height: 1.5;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-impact-notice strong{
      color: var(--pf-text);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-tip{
      display: flex;
      gap: 7px;
      margin-top: 11px;
      padding-top: 11px;
      border-top: 1px solid var(--pf-border);
      color: var(--pf-muted);
      font-size: .63rem;
      line-height: 1.42;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-tip i{
      flex: 0 0 auto;
      margin-top: 2px;
      color: #aebaff;
    }


    :where(html[data-bm-page="personal_finance"]) .pf-recurring-timeline-explanation{
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      padding: 12px 13px;
      border: 1px solid rgba(99, 102, 241, .24);
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(79, 108, 247, .10), rgba(8, 15, 27, .30));
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-timeline-explanation-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: rgba(79, 108, 247, .16);
      color: #c3cbff;
      font-size: 16px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-timeline-explanation > .pf-recurring-timeline-explanation-icon{
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1 !important;
      text-align: center !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-timeline-explanation strong,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-timeline-explanation span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-timeline-explanation strong{
      color: var(--pf-text);
      font-size: .76rem;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-timeline-explanation div > span{
      margin-top: 3px;
      color: var(--pf-muted);
      font-size: .66rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-periods-section{
      overflow: visible;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder{
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder.is-hidden{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder-head strong,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder-head span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder-head strong{
      color: var(--pf-text);
      font-size: .76rem;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder-head span{
      margin-top: 3px;
      color: var(--pf-muted);
      font-size: .65rem;
      line-height: 1.42;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder-head .btn{
      flex: 0 0 auto;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-empty{
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      border: 1px dashed rgba(148, 163, 184, .26);
      border-radius: 12px;
      background: rgba(8, 15, 27, .22);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-empty.is-hidden{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-empty-icon{
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 32px;
      height: 32px;
      margin: 0 !important;
      border-radius: 10px;
      background: rgba(79, 108, 247, .14);
      color: #c3cbff;
      line-height: 1 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-empty-icon i{
      display: block;
      margin: 0;
      line-height: 1;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-empty .btn{
      margin-top: 9px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-empty strong,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-empty span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-empty strong{
      color: var(--pf-muted-strong);
      font-size: .7rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-empty span{
      margin-top: 2px;
      color: var(--pf-muted);
      font-size: .63rem;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-list{
      display: grid;
      gap: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-card{
      border: 1px solid rgba(99, 102, 241, .22);
      border-radius: 13px;
      background: rgba(8, 15, 27, .34);
      overflow: hidden;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-card > summary{
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      cursor: pointer;
      list-style: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-card > summary::-webkit-details-marker{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-index{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(79, 108, 247, .15);
      color: #c3cbff;
      font-size: .68rem;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-summary-copy{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-summary-copy strong,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-change-summary-copy span{
      display: block;
      overflow-wrap: anywhere;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-summary-copy strong{
      color: var(--pf-text);
      font-size: .72rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-summary-copy span{
      margin-top: 2px;
      color: var(--pf-muted);
      font-size: .62rem;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-chevron{
      color: var(--pf-muted);
      transition: transform .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-card[open] .pf-recurring-change-chevron{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-body{
      padding: 0 12px 12px;
      border-top: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-toolbar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-toolbar span{
      color: var(--pf-muted);
      font-size: .63rem;
      line-height: 1.38;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-grid .pf-span-2{
      grid-column: 1 / -1;
    }


    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-essential{
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
      padding-top: 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-copy-note{
      display: flex;
      align-items: flex-start;
      gap: 7px;
      margin-top: 10px;
      padding: 9px 10px;
      border-radius: 9px;
      background: rgba(79, 108, 247, .07);
      color: var(--pf-muted);
      font-size: .61rem;
      line-height: 1.42;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-copy-note i{
      flex: 0 0 auto;
      margin-top: 2px;
      color: #aebaff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-more{
      margin-top: 10px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 10px;
      background: rgba(8, 15, 27, .24);
      overflow: hidden;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-more > summary{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 11px;
      color: var(--pf-muted-strong);
      font-size: .65rem;
      font-weight: 800;
      cursor: pointer;
      list-style: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-more > summary::-webkit-details-marker{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-more > summary i:last-child{
      color: var(--pf-muted);
      transition: transform .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-more[open] > summary i:last-child{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-more-body{
      padding: 0 11px 11px;
      border-top: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-frequency-fields{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-frequency-field.is-hidden{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-changes{
      display: grid;
      gap: 6px;
      margin-top: 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-change{
      display: grid;
      grid-template-columns: 8px minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      padding: 7px 8px;
      border: 1px solid var(--pf-border);
      border-radius: 9px;
      background: rgba(8, 15, 27, .30);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-change::before{
      content: '';
      width: 7px;
      height: 7px;
      margin-top: 4px;
      border-radius: 50%;
      background: #8fa0ff;
      box-shadow: 0 0 0 3px rgba(79, 108, 247, .12);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-change strong,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-change span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-change strong{
      color: var(--pf-muted-strong);
      font-size: .64rem;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview-change span{
      margin-top: 2px;
      color: var(--pf-muted);
      font-size: .59rem;
      line-height: 1.34;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-delete-summary{
      padding: 13px;
      border: 1px solid rgba(239, 68, 68, .25);
      border-radius: 12px;
      background: rgba(239, 68, 68, .07);
      color: var(--pf-muted-strong);
      font-size: .79rem;
      line-height: 1.55;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-delete-summary strong{
      color: #fda4af;
    }





    :where(html[data-bm-page="personal_finance"]) .pf-recurring-simple-explanation{
      margin-bottom: 13px;
      padding: 12px 13px;
      border: 1px solid rgba(99, 102, 241, .22);
      border-radius: 12px;
      background: rgba(79, 108, 247, .07);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-simple-explanation strong,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-simple-explanation span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-simple-explanation strong{
      color: var(--pf-text);
      font-size: .75rem;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-simple-explanation span{
      margin-top: 4px;
      color: var(--pf-muted);
      font-size: .65rem;
      line-height: 1.45;
    }
    /* Flujo simplificado: los importes y monedas se organizan directamente por fecha. */
    :where(html[data-bm-page="personal_finance"]) .pf-recurring-section-head-simple{
      display: block;
      padding-bottom: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-section-head-simple > div{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-section-head-simple strong{
      font-size: .82rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amounts-section{
      display: grid;
      gap: 13px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amounts-intro{
      padding: 13px 14px;
      border: 1px solid rgba(99, 102, 241, .28);
      border-radius: 13px;
      background: linear-gradient(135deg, rgba(79, 108, 247, .11), rgba(8, 15, 27, .28));
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amounts-intro strong,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-amounts-intro span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amounts-intro strong{
      color: var(--pf-text);
      font-size: .8rem;
      font-weight: 860;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amounts-intro span{
      margin-top: 4px;
      color: var(--pf-muted);
      font-size: .67rem;
      line-height: 1.48;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-base-amount-card,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-period-card{
      padding: 13px;
      border: 1px solid var(--pf-border-strong);
      border-radius: 13px;
      background: rgba(8, 15, 27, .34);
      overflow: visible;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-period-card{
      border-color: rgba(99, 102, 241, .27);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-card-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-card-head strong,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-card-head span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-card-head strong{
      color: var(--pf-text);
      font-size: .75rem;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-card-head span{
      margin-top: 3px;
      color: var(--pf-muted);
      font-size: .63rem;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-grid{
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder{
      display: grid;
      gap: 10px;
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-add-amount-period{
      width: 100%;
      min-height: 42px;
      border-style: dashed;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period-rule{
      display: flex;
      align-items: flex-start;
      gap: 7px;
      color: var(--pf-muted);
      font-size: .62rem;
      line-height: 1.42;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-period-rule i{
      flex: 0 0 auto;
      margin-top: 2px;
      color: #86efac;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-date-guidance{
      display: flex;
      align-items: flex-start;
      gap: 6px;
      margin-top: 6px;
      color: var(--pf-muted);
      font-size: .6rem;
      line-height: 1.38;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-date-guidance i{
      flex: 0 0 auto;
      margin-top: 2px;
      color: #aebaff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-end-simple{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
      padding-top: 13px;
      border-top: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-end-simple .pf-never-ends-control{
      min-height: 44px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-alert{
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin: 0 0 18px;
      padding: 14px 16px;
      border: 1px solid rgba(240, 82, 82, .42);
      border-radius: 14px;
      background: rgba(240, 82, 82, .10);
      color: var(--pf-text);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-alert[hidden]{
      display: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-alert > i{
      flex: 0 0 auto;
      margin-top: 2px;
      color: #fb7185;
      font-size: 20px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-alert strong{
      display: block;
      margin-bottom: 4px;
      font-size: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-alert ul{
      margin: 0;
      padding-left: 18px;
      color: var(--pf-muted-strong);
      font-size: 13px;
      line-height: 1.55;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-alert li + li{
      margin-top: 3px;
    }

    :where(html[data-bm-page="personal_finance"]) #recurringForm .is-invalid,
:where(html[data-bm-page="personal_finance"]) #recurringForm .pf-server-invalid{
      border-color: #fb7185 !important;
      box-shadow: 0 0 0 .2rem rgba(240, 82, 82, .14) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-recurring-card.is-just-saved{
      border-color: rgba(74, 222, 128, .72);
      box-shadow: 0 0 0 3px rgba(74, 222, 128, .11), 0 18px 42px rgba(0, 0, 0, .18);
      animation: bm-f9da4ca94c-pfRecurringSavedPulse 1.35s ease-out 1;
    }

    @keyframes bm-f9da4ca94c-pfRecurringSavedPulse {
      0% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(74, 222, 128, .32); }
      45% { transform: translateY(-2px); box-shadow: 0 0 0 8px rgba(74, 222, 128, .08); }
      100% { transform: translateY(0); box-shadow: 0 0 0 3px rgba(74, 222, 128, .11), 0 18px 42px rgba(0, 0, 0, .18); }
    }

    @media (max-width: 900px){
      :where(html[data-bm-page="personal_finance"]) .pf-recurring-modal-layout{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-preview{
        position: static;
      }
    }

    @media (max-width: 575px){
      :where(html[data-bm-page="personal_finance"]) .pf-recurring-offcanvas .offcanvas-header{
        padding: 16px 15px 13px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-offcanvas .offcanvas-body{
        padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px));
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-overview,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-how-it-works,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-create-guide,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-path-options,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-current-grid,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-form-grid,
:where(html[data-bm-page="personal_finance"]) .pf-frequency-choice,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-end-row,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-options,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-change-essential,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-grid,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-end-simple{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-form-grid .pf-span-2{
        grid-column: auto;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-toolbar,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-card-head,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-card-footer{
        align-items: stretch;
        flex-direction: column;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-toolbar .btn{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-amount{
        padding-left: 49px;
        text-align: left;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-actions{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder-head,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-change-toolbar{
        align-items: stretch;
        flex-direction: column;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-changes-builder-head .btn{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-grid,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-change-frequency-fields{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-grid .pf-span-2{
        grid-column: auto;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-card-head{
        align-items: stretch;
        flex-direction: column;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-amount-card-head .btn{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-actions .btn,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-card-actions form{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-card-actions .btn-outline-danger{
        grid-column: 1 / -1;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-flow{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-change-arrow{
        transform: rotate(90deg);
      }

      :where(html[data-bm-page="personal_finance"]) #recurringModal .modal-body{
        padding: 13px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-recurring-section,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-edit-scope,
:where(html[data-bm-page="personal_finance"]) .pf-recurring-preview{
        padding: 12px;
      }
    }



    :where(html[data-bm-page="personal_finance"]) .pf-primary-warning,
:where(html[data-bm-page="personal_finance"]) .pf-view-switcher,
:where(html[data-bm-page="personal_finance"]) .pf-currency-section,
:where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card,
:where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-card{
      border: 1px solid var(--pf-border);
      background: rgba(17, 27, 46, .72);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-warning{
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin: 22px 0;
      padding: 16px;
      border-color: rgba(245, 158, 11, .35);
      border-radius: 15px;
      background: rgba(245, 158, 11, .09);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-warning > i{
      color: #fbbf24;
      font-size: 20px;
      margin-top: 2px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-warning strong,
:where(html[data-bm-page="personal_finance"]) .pf-primary-warning span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-warning strong{ color: var(--pf-text); margin-bottom: 4px; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-warning span{ color: var(--pf-muted-strong); line-height: 1.55; }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-setup-form,
:where(html[data-bm-page="personal_finance"]) .pf-change-primary-form{
      display: grid;
      gap: 15px;
      max-width: 720px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-confirm-check{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--pf-muted-strong);
      font-size: 13px;
      line-height: 1.5;
      cursor: pointer;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-confirm-check input{
      flex: 0 0 auto;
      margin-top: 3px;
      width: 17px;
      height: 17px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
      padding: 14px 16px;
      border-radius: 16px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher > div:first-child > div strong,
:where(html[data-bm-page="personal_finance"]) .pf-view-switcher > div:first-child > div span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher > div:first-child > div strong{ color: var(--pf-text); font-size: 14px; }
    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher > div:first-child > div span{ color: var(--pf-muted); font-size: 12px; margin-top: 3px; }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-actions{
      display: inline-flex;
      padding: 4px;
      border: 1px solid var(--pf-border);
      border-radius: 12px;
      background: rgba(11, 18, 32, .7);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-actions a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 38px;
      padding: 8px 13px;
      border-radius: 9px;
      color: var(--pf-muted-strong);
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-actions a.is-active{
      background: var(--pf-primary);
      color: #fff;
      box-shadow: 0 8px 18px rgba(79, 108, 247, .24);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-no-conversion-note.is-conversion{
      border-color: rgba(79, 108, 247, .34);
      background: rgba(79, 108, 247, .08);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-converted-amount-cell{
      min-width: 150px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-converted-amount-main,
:where(html[data-bm-page="personal_finance"]) .pf-converted-amount-reference{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-converted-amount-main{
      font-weight: 850;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-converted-amount-reference{
      display: block;
      max-width: 100%;
      margin-top: 2px;
      overflow: hidden;
      color: var(--pf-muted);
      font-size: 10px;
      font-weight: 650;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      cursor: help;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-converted-amount-reference.is-missing{
      color: #fbbf24;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-access-btn{
      white-space: normal;
      text-align: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-offcanvas{
      width: min(880px, 98vw) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-preferences-offcanvas{
      width: min(620px, 98vw) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-offcanvas .offcanvas-body,
:where(html[data-bm-page="personal_finance"]) .pf-preferences-offcanvas .offcanvas-body{
      padding-bottom: 42px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-preferences-form{
      display: grid;
      gap: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-preference-field{
      padding: 16px;
      border: 1px solid var(--pf-border);
      border-radius: 15px;
      background: rgba(17, 27, 46, .72);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-preference-field-heading{
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin-bottom: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-preference-field-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 38px;
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: rgba(79, 108, 247, .14);
      color: #aebcff;
      font-size: 18px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-preference-field-heading .form-label{
      margin: 0;
      color: var(--pf-text);
      font-size: 13px;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-preference-field-heading p{
      margin: 4px 0 0;
      color: var(--pf-muted);
      font-size: 11px;
      line-height: 1.5;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-preference-example{
      margin-top: 9px;
      color: var(--pf-muted);
      font-size: 10.5px;
      line-height: 1.5;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-preference-example strong{
      color: var(--pf-muted-strong);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-section{
      margin-bottom: 16px;
      padding: 17px;
      border-radius: 17px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-section-head,
:where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-title,
:where(html[data-bm-page="personal_finance"]) .pf-dated-rates-head,
:where(html[data-bm-page="personal_finance"]) .pf-dated-rate-row{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-section-head{ margin-bottom: 15px; }
    :where(html[data-bm-page="personal_finance"]) .pf-currency-section-head h6{ margin: 0; color: var(--pf-text); font-weight: 850; }
    :where(html[data-bm-page="personal_finance"]) .pf-currency-section-head p{ margin: 4px 0 0; color: var(--pf-muted); font-size: 12px; line-height: 1.5; }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 15px;
      border-radius: 13px;
      background: linear-gradient(135deg, rgba(79, 108, 247, .13), rgba(17, 27, 46, .75));
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card strong,
:where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card span{ display: block; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card strong{ color: var(--pf-text); font-size: 20px; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card span{ color: var(--pf-muted); font-size: 12px; margin-top: 2px; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card i{ color: #8ea2ff; font-size: 23px; }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-details{
      overflow: hidden;
      border: 1px solid rgba(79, 108, 247, .24);
      border-radius: 13px;
      background: rgba(11, 18, 32, .32);
      transition: border-color .18s ease, box-shadow .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-details[open]{
      border-color: rgba(79, 108, 247, .48);
      box-shadow: 0 12px 28px rgba(4, 9, 20, .18);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-details > summary{
      list-style: none;
      cursor: pointer;
      user-select: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-details > summary::-webkit-details-marker{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card-action{
      border-radius: 0;
      transition: background .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card-action:hover{
      background: linear-gradient(135deg, rgba(79, 108, 247, .19), rgba(17, 27, 46, .86));
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-summary-copy{
      min-width: 0;
      flex: 1 1 auto;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card .pf-primary-currency-change-cta{
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 0 0 auto;
      margin: 0;
      padding: 8px 10px;
      border: 1px solid rgba(79, 108, 247, .24);
      border-radius: 10px;
      background: rgba(79, 108, 247, .09);
      color: #c7d2fe;
      font-size: 11px;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card .pf-primary-currency-change-cta > span{
      display: inline;
      margin: 0;
      color: inherit;
      font-size: inherit;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card .pf-primary-currency-change-cta > i{
      color: #aebcff;
      font-size: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card .pf-primary-currency-chevron{
      font-size: 11px;
      transition: transform .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-details[open] .pf-primary-currency-chevron{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-change-content{
      padding: 15px;
      border-top: 1px solid var(--pf-border);
      background: rgba(15, 24, 41, .72);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-heading{
      margin-bottom: 13px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-heading strong,
:where(html[data-bm-page="personal_finance"]) .pf-primary-change-heading span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-heading strong{
      color: var(--pf-text);
      font-size: 13px;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-heading span{
      margin-top: 3px;
      color: var(--pf-muted);
      font-size: 10.5px;
      line-height: 1.45;
    }

    @media (max-width: 560px){
      :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card-action{
        align-items: flex-start;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card .pf-primary-currency-change-cta{
        padding: 7px 8px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-primary-currency-card .pf-primary-currency-change-cta > span{
        display: none;
      }
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-form-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-form-grid button{ grid-column: 1 / -1; }

    :where(html[data-bm-page="personal_finance"]) .pf-add-currency-panel{
      padding: 14px;
      border: 1px solid rgba(79, 108, 247, .34);
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(79, 108, 247, .10), rgba(11, 18, 32, .52));
      scroll-margin-top: 18px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-add-currency-panel:focus-within{
      border-color: rgba(109, 133, 255, .75);
      box-shadow: 0 0 0 3px rgba(79, 108, 247, .10);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-add-currency-heading{
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-add-currency-heading .pf-add-currency-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 36px;
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      border-radius: 11px;
      background: rgba(79, 108, 247, .18);
      color: #aebcff;
      line-height: 1;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-add-currency-icon i{
      display: block;
      position: static;
      margin: 0;
      line-height: 1;
      font-size: 18px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-add-currency-heading strong{ display: block; color: var(--pf-text); font-size: 13px; }
    :where(html[data-bm-page="personal_finance"]) .pf-add-currency-heading div > span{ display: block; margin-top: 2px; color: var(--pf-muted); font-size: 11px; line-height: 1.45; }

    :where(html[data-bm-page="personal_finance"]) .pf-secondary-add-form,
:where(html[data-bm-page="personal_finance"]) .pf-global-rate-form,
:where(html[data-bm-page="personal_finance"]) .pf-dated-rate-form,
:where(html[data-bm-page="personal_finance"]) .pf-change-primary-form{
      display: grid;
      gap: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-rate-equation{
      display: grid;
      grid-template-columns: max-content max-content minmax(120px, 1fr) max-content max-content;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-rate-equation-add{
      grid-template-columns: max-content minmax(210px, 1.35fr) max-content minmax(140px, .8fr) max-content max-content;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-rate-equation-compact{
      grid-template-columns: max-content max-content minmax(110px, 1fr) max-content;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-equation-one,
:where(html[data-bm-page="personal_finance"]) .pf-equation-source,
:where(html[data-bm-page="personal_finance"]) .pf-equation-target,
:where(html[data-bm-page="personal_finance"]) .pf-equation-symbol{
      color: var(--pf-muted-strong);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-equation-symbol{
      color: #7183a0;
      font-size: 15px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-equation-target{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 11px;
      border: 1px solid var(--pf-border);
      border-radius: 10px;
      background: rgba(148, 163, 184, .07);
      color: #c7d2fe;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-list{
      display: grid;
      gap: 14px;
      margin-top: 15px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-card{
      padding: 15px;
      border-radius: 15px;
      background: rgba(15, 24, 41, .78);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-title{
      align-items: center;
      margin-bottom: 13px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-identity{
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-identity strong,
:where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-identity span{ display: block; }
    :where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-identity strong{ color: var(--pf-text); font-size: 13px; }
    :where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-identity div > span{ margin-top: 2px; color: var(--pf-muted); font-size: 10.5px; }

    :where(html[data-bm-page="personal_finance"]) .pf-global-rate-form{
      grid-template-columns: minmax(150px, .7fr) minmax(0, 1.5fr);
      align-items: center;
      padding: 12px;
      border: 1px solid var(--pf-border);
      border-radius: 12px;
      background: rgba(11, 18, 32, .55);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-rate-form-copy strong,
:where(html[data-bm-page="personal_finance"]) .pf-rate-form-copy span{ display: block; }
    :where(html[data-bm-page="personal_finance"]) .pf-rate-form-copy strong{ color: var(--pf-text); font-size: 12px; }
    :where(html[data-bm-page="personal_finance"]) .pf-rate-form-copy span{ margin-top: 3px; color: var(--pf-muted); font-size: 10.5px; line-height: 1.4; }

    :where(html[data-bm-page="personal_finance"]) .pf-rate-warning{
      grid-column: 1 / -1;
      display: flex;
      align-items: flex-start;
      gap: 7px;
      padding: 9px 10px;
      border-radius: 9px;
      background: rgba(245, 158, 11, .09);
      color: #fbbf24;
      font-size: 10.5px;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates{
      margin-top: 13px;
      padding-top: 13px;
      border-top: 1px solid var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates > summary{
      list-style: none;
      cursor: pointer;
      user-select: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates > summary::-webkit-details-marker{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates-head{ align-items: center; }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates-summary-meta{
      display: inline-flex !important;
      align-items: center;
      gap: 9px;
      flex: 0 0 auto;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates-chevron{
      color: var(--pf-muted);
      font-size: 13px;
      transition: transform .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates[open] .pf-dated-rates-chevron{
      transform: rotate(180deg);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates-content{
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed var(--pf-border);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-explanation{
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 9px 10px;
      border-radius: 10px;
      background: rgba(79, 108, 247, .07);
      color: var(--pf-muted);
      font-size: 10.5px;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-explanation i{
      flex: 0 0 auto;
      margin-top: 2px;
      color: #8ea2ff;
    }
    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates-head strong,
:where(html[data-bm-page="personal_finance"]) .pf-dated-rates-head span{ display: block; }
    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates-head strong{ color: var(--pf-text); font-size: 12px; }
    :where(html[data-bm-page="personal_finance"]) .pf-dated-rates-head div > span{ color: var(--pf-muted); font-size: 10.5px; margin-top: 2px; }

    :where(html[data-bm-page="personal_finance"]) .pf-rate-priority-badge{
      flex: 0 0 auto;
      padding: 5px 8px;
      border-radius: 999px;
      border: 1px solid rgba(79, 108, 247, .28);
      background: rgba(79, 108, 247, .09);
      color: #aebcff !important;
      font-size: 9.5px !important;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-row{
      display: grid;
      grid-template-columns: minmax(175px, 1fr) max-content auto;
      align-items: center;
      margin-top: 9px;
      padding: 10px 11px;
      border: 1px solid var(--pf-border);
      border-radius: 11px;
      background: rgba(22, 34, 56, .65);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-period{
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      color: var(--pf-muted);
    }
    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-period i{ color: #8ea2ff; }
    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-period strong{ color: var(--pf-text); font-size: 11px; white-space: nowrap; }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-equation{
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 9px;
      border-radius: 9px;
      background: rgba(11, 18, 32, .55);
      color: var(--pf-muted-strong);
      font-size: 10.5px;
      white-space: nowrap;
    }
    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-equation strong{ color: #c7d2fe; font-size: 11px; }
    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-equation b{ color: #7183a0; }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-empty{ margin-top: 9px; color: var(--pf-muted); font-size: 11px; }

    :where(html[data-bm-page="personal_finance"]) .pf-icon-danger{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(240, 82, 82, .3);
      border-radius: 9px;
      background: rgba(240, 82, 82, .08);
      color: #fb7185;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-form{
      grid-template-columns: minmax(120px, .55fr) minmax(120px, .55fr) minmax(260px, 1.2fr) auto;
      align-items: end;
      margin-top: 12px;
      padding: 12px;
      border: 1px dashed var(--pf-border);
      border-radius: 12px;
      background: rgba(11, 18, 32, .30);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-compact-field .form-label{
      margin-bottom: 5px;
      font-size: 10.5px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-zone{
      border-color: rgba(79, 108, 247, .32);
      background: rgba(79, 108, 247, .055);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-zone > .pf-currency-section-head > i{
      color: #8ea2ff;
      font-size: 22px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-zone summary{
      color: #c7d2fe;
      font-weight: 800;
      cursor: pointer;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-zone details[open] summary{ margin-bottom: 14px; }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-note{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px;
      border: 1px solid rgba(79, 108, 247, .22);
      border-radius: 11px;
      background: rgba(79, 108, 247, .07);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-note > i{ color: #8ea2ff; margin-top: 2px; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-note strong,
:where(html[data-bm-page="personal_finance"]) .pf-primary-change-note span{ display: block; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-note strong{ color: var(--pf-text); font-size: 12px; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-note span{ margin-top: 3px; color: var(--pf-muted); font-size: 11px; line-height: 1.5; }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rates{
      display: grid;
      gap: 9px;
      padding: 12px;
      border: 1px solid var(--pf-border);
      border-radius: 13px;
      background: rgba(11, 18, 32, .38);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rates.is-awaiting-selection .pf-primary-change-rate-row,
:where(html[data-bm-page="personal_finance"]) .pf-primary-change-rates.is-awaiting-selection .pf-primary-change-empty{
      display: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rates-head strong,
:where(html[data-bm-page="personal_finance"]) .pf-primary-change-rates-head span{ display: block; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rates-head strong{ color: var(--pf-text); font-size: 12px; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rates-head span{ margin-top: 2px; color: var(--pf-muted); font-size: 10.5px; }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rate-row{
      display: grid;
      grid-template-columns: minmax(180px, .8fr) minmax(300px, 1.25fr);
      align-items: center;
      gap: 12px;
      padding: 10px;
      border: 1px solid var(--pf-border);
      border-radius: 11px;
      background: rgba(22, 34, 56, .55);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rate-row.is-new-primary .pf-rate-equation{ display: none; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rate-row:not(.is-new-primary) .pf-primary-direct-badge{ display: none; }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-currency{
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-currency strong,
:where(html[data-bm-page="personal_finance"]) .pf-primary-change-currency span{ display: block; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-currency strong{ color: var(--pf-text); font-size: 11.5px; }
    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-currency div > span{ margin-top: 2px; color: var(--pf-muted); font-size: 9.8px; }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-direct-badge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 38px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(34, 197, 94, .10);
      color: #86efac;
      font-size: 10.5px;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-empty{
      display: none;
      padding: 11px;
      border-radius: 10px;
      background: rgba(34, 197, 94, .08);
      color: #a7f3d0;
      font-size: 11px;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-primary-change-empty.is-visible{ display: block; }

    /* ================================================================
       FECHAS: MISMO CRITERIO VISUAL Y DE INTERACCIÓN DEL DASHBOARD
       - El filtro conserva el selector de rango con dos calendarios.
       - Todo input de fecha usa el mismo lenguaje visual del dashboard.
       - El input nativo permanece como valor real del formulario.
       ================================================================ */
    :where(html[data-bm-page="personal_finance"]) input[type="date"].form-control,
:where(html[data-bm-page="personal_finance"]) input[type="date"]{
      color-scheme: dark;
      cursor: pointer;
      font-variant-numeric: tabular-nums;
    }

    :where(html[data-bm-page="personal_finance"]) input[type="date"]::-webkit-calendar-picker-indicator{
      cursor: pointer;
      opacity: .82;
    }

    :where(html[data-bm-page="personal_finance"]) input[type="date"]:disabled::-webkit-calendar-picker-indicator{
      cursor: not-allowed;
      opacity: .38;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-panel,
:where(html[data-bm-page="personal_finance"]) .pf-filter-disclosure[open],
:where(html[data-bm-page="personal_finance"]) .pf-filter-disclosure[open] .pf-filter-body{
      overflow: visible !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filters-grid > .pf-dashboard-date-range{
      flex: 1.35 1 320px;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-field{
      position: relative;
      width: 100%;
    }

    :where(html[data-bm-page="personal_finance"]) #dateRangeBtn{
      min-height: 46px !important;
      height: 46px !important;
      width: 100%;
      padding: 6px 10px !important;
      border-radius: 15px !important;
      border: 1px solid rgba(71, 85, 105, .82) !important;
      background:
        radial-gradient(circle at top left, rgba(79, 108, 247, .18), transparent 34%),
        linear-gradient(135deg, rgba(15, 25, 42, .98), rgba(25, 39, 63, .95)) !important;
      color: var(--pf-text) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 22px rgba(2, 6, 23, .18) !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      overflow: hidden;
      cursor: pointer;
      text-align: left;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) #dateRangeBtn:hover,
:where(html[data-bm-page="personal_finance"]) #dateRangeBtn:focus-visible{
      border-color: rgba(148, 163, 184, .72) !important;
      box-shadow:
        0 0 0 4px rgba(79, 108, 247, .24),
        0 14px 28px rgba(2, 6, 23, .26) !important;
      outline: none;
      transform: translateY(-1px);
    }

    :where(html[data-bm-page="personal_finance"]) .modern-control-icon{
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      color: #bfdbfe;
      background: rgba(79, 108, 247, .14);
      border: 1px solid rgba(96, 165, 250, .20);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

    :where(html[data-bm-page="personal_finance"]) .modern-control-content{
      min-width: 0;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1px;
      text-align: left;
    }

    :where(html[data-bm-page="personal_finance"]) .modern-control-value{
      display: block;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pf-text);
      font-weight: 800;
      font-size: .9rem;
      line-height: 1.15;
    }

    :where(html[data-bm-page="personal_finance"]) .modern-control-chevron{
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--pf-muted-strong);
      background: rgba(15, 25, 42, .65);
      border: 1px solid rgba(71, 85, 105, .55);
      transition: transform .18s ease, color .18s ease, background .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-field.is-open .modern-control-chevron{
      transform: rotate(180deg);
      color: #fff;
      background: rgba(79, 108, 247, .24);
    }

    :where(html[data-bm-page="personal_finance"]) #drLabel{
      display: block;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-popover{
      position: absolute;
      top: calc(100% + 12px);
      left: 0;
      z-index: 2147482500;
      width: min(760px, calc(100vw - 2rem));
      max-height: min(720px, calc(100vh - 80px));
      overflow-y: auto;
      padding: 12px;
      display: none;
      border-radius: 18px;
      border: 1px solid rgba(71, 85, 105, .95);
      background: linear-gradient(180deg, rgba(30, 41, 59, .99), rgba(15, 23, 42, .99));
      box-shadow: 0 24px 70px rgba(2, 6, 23, .66), inset 0 1px 0 rgba(255,255,255,.04);
    }

    :where(html[data-bm-page="personal_finance"]) .dr-popover[aria-hidden="false"]{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-header{
      display: grid;
      grid-template-columns: 1fr 24px 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 8px 10px 12px;
      border-bottom: 1px solid rgba(71, 85, 105, .55);
    }

    :where(html[data-bm-page="personal_finance"]) .dr-title{
      color: var(--pf-text);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-sep{
      color: var(--pf-muted);
      font-weight: 800;
      text-align: center;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-actions-top{
      display: flex;
      gap: 6px;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-actions-top .btn{
      width: 34px;
      min-height: 34px;
      height: 34px;
      padding: 0;
      color: var(--pf-muted-strong);
      background: rgba(15, 25, 42, .78);
      border-color: rgba(71, 85, 105, .72);
    }

    :where(html[data-bm-page="personal_finance"]) .dr-actions-top .btn:hover,
:where(html[data-bm-page="personal_finance"]) .dr-actions-top .btn:focus-visible{
      color: #fff;
      background: rgba(79, 108, 247, .20);
      border-color: rgba(120, 144, 255, .62);
    }

    :where(html[data-bm-page="personal_finance"]) .dr-body{
      display: grid;
      grid-template-columns: 1fr 1fr 210px;
      gap: 12px;
      padding: 12px 4px 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-cal{
      min-width: 0;
      padding: 10px;
      border: 1px solid rgba(71, 85, 105, .72);
      border-radius: 14px;
      background: rgba(15, 25, 42, .90);
    }

    :where(html[data-bm-page="personal_finance"]) .dr-cal-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-cal-head .btn{
      width: 32px;
      min-height: 32px;
      height: 32px;
      padding: 0;
      color: var(--pf-muted-strong);
      border: 0;
      background: transparent;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-cal-head .btn:hover,
:where(html[data-bm-page="personal_finance"]) .dr-cal-head .btn:focus-visible{
      color: #fff;
      background: rgba(79, 108, 247, .16);
    }

    :where(html[data-bm-page="personal_finance"]) .dr-month-title{
      color: var(--pf-text);
      font-size: .86rem;
      font-weight: 800;
      text-transform: capitalize;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-grid{
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-grid .dr-dow{
      padding: 4px 0;
      color: var(--pf-muted);
      font-size: .69rem;
      font-weight: 800;
      text-align: center;
      text-transform: uppercase;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-day{
      aspect-ratio: 1;
      min-width: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 9px;
      background: transparent;
      color: var(--pf-muted-strong);
      cursor: pointer;
      font-size: .78rem;
      font-weight: 750;
      font-variant-numeric: tabular-nums;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-day:hover,
:where(html[data-bm-page="personal_finance"]) .dr-day:focus-visible{
      color: #fff;
      background: rgba(79, 108, 247, .18);
      border-color: rgba(120, 144, 255, .50);
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-day.muted{
      color: #52647f;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-day.in-range{
      color: #e2e8f0;
      background: rgba(79, 108, 247, .18);
      border-radius: 4px;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-day.selected,
:where(html[data-bm-page="personal_finance"]) .dr-day.range-edge{
      color: #fff;
      background: var(--pf-primary);
      border-color: var(--pf-primary);
      border-radius: 9px;
      box-shadow: 0 6px 14px rgba(79, 108, 247, .24);
    }

    :where(html[data-bm-page="personal_finance"]) .dr-presets{
      padding: 10px;
      border: 1px dashed rgba(71, 85, 105, .78);
      border-radius: 14px;
      background: rgba(30, 41, 59, .62);
    }

    :where(html[data-bm-page="personal_finance"]) .dr-presets-title{
      margin-bottom: 8px;
      color: var(--pf-text);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-presets-list{
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-presets-list .btn{
      justify-content: flex-start;
      min-height: 34px;
      height: auto;
      padding: 7px 9px;
      color: var(--pf-muted-strong);
      background: rgba(15, 25, 42, .54);
      border-color: rgba(71, 85, 105, .72);
      font-size: .76rem;
      text-align: left;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-presets-list .btn:hover,
:where(html[data-bm-page="personal_finance"]) .dr-presets-list .btn:focus-visible{
      color: #fff;
      background: rgba(79, 108, 247, .18);
      border-color: rgba(120, 144, 255, .55);
    }

    :where(html[data-bm-page="personal_finance"]) .dr-footer{
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 10px 2px;
      border-top: 1px solid rgba(71, 85, 105, .55);
    }

    :where(html[data-bm-page="personal_finance"]) #drPreview{
      color: var(--pf-muted-strong);
      font-size: .78rem;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-backdrop{
      position: fixed;
      inset: 0;
      z-index: 2147482400;
      display: none;
      background: transparent;
    }

    :where(html[data-bm-page="personal_finance"]) .dr-backdrop.show{
      display: block;
    }


    /* Selector reutilizable para una sola fecha, basado en el calendario del dashboard. */
    :where(html[data-bm-page="personal_finance"]) .pf-dashboard-single-date{
      position: relative;
      width: 100%;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dashboard-date-native{
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      min-height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      opacity: 0 !important;
      border: 0 !important;
      pointer-events: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-button{
      min-height: 46px !important;
      height: 46px !important;
      width: 100%;
      padding: 6px 10px !important;
      border-radius: 15px !important;
      border: 1px solid rgba(71, 85, 105, .82) !important;
      background:
        radial-gradient(circle at top left, rgba(79, 108, 247, .18), transparent 34%),
        linear-gradient(135deg, rgba(15, 25, 42, .98), rgba(25, 39, 63, .95)) !important;
      color: var(--pf-text) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 22px rgba(2, 6, 23, .18) !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      overflow: hidden;
      cursor: pointer;
      text-align: left;
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-button:hover,
:where(html[data-bm-page="personal_finance"]) .pf-single-date-button:focus-visible,
:where(html[data-bm-page="personal_finance"]) .pf-dashboard-single-date.is-open .pf-single-date-button{
      border-color: rgba(148, 163, 184, .72) !important;
      box-shadow:
        0 0 0 4px rgba(79, 108, 247, .24),
        0 14px 28px rgba(2, 6, 23, .26) !important;
      outline: none;
      transform: translateY(-1px);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-button:disabled{
      cursor: not-allowed;
      opacity: .52;
      transform: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dashboard-single-date.is-empty .modern-control-value{
      color: #7f91aa;
      font-weight: 700;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dashboard-single-date.is-invalid .pf-single-date-button{
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 4px rgba(239, 68, 68, .16) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-layer[hidden]{ display: none !important; }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-layer{
      position: fixed;
      z-index: var(--pf-single-date-layer-z) !important;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 18px;
      isolation: isolate;
      pointer-events: auto;
    }

    /* Cuando el campo pertenece a un modal u offcanvas, el selector se monta
       dentro de esa misma capa. Así Bootstrap no lo trata como un elemento
       externo y nunca puede quedar detrás ni perder el foco. */
    :where(html[data-bm-page="personal_finance"]) .modal.pf-single-date-host,
:where(html[data-bm-page="personal_finance"]) .offcanvas.pf-single-date-host{
      overflow: hidden !important;
    }

    :where(html[data-bm-page="personal_finance"]) .modal > .pf-single-date-layer,
:where(html[data-bm-page="personal_finance"]) .offcanvas > .pf-single-date-layer{
      position: fixed !important;
      inset: 0 !important;
      z-index: var(--pf-single-date-layer-z) !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-backdrop{
      position: absolute;
      z-index: 0;
      inset: 0;
      background: rgba(2, 6, 23, .76);
      backdrop-filter: blur(5px);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-dialog{
      position: relative;
      z-index: 1;
      width: min(430px, 100%);
      max-height: min(720px, calc(100vh - 36px));
      overflow: hidden;
      border: 1px solid rgba(71, 85, 105, .95);
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(30, 41, 59, .995), rgba(15, 23, 42, .995));
      color: var(--pf-text);
      box-shadow: 0 28px 85px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255,255,255,.04);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-header,
:where(html[data-bm-page="personal_finance"]) .pf-single-date-footer{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      background: rgba(22, 34, 56, .96);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-header{ border-bottom: 1px solid rgba(71, 85, 105, .65); }
    :where(html[data-bm-page="personal_finance"]) .pf-single-date-footer{ border-top: 1px solid rgba(71, 85, 105, .65); }
    :where(html[data-bm-page="personal_finance"]) .pf-single-date-footer-actions{ display: flex; gap: 8px; }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-kicker{
      display: block;
      margin-bottom: 3px;
      color: #8ea2ff;
      font-size: .68rem;
      font-weight: 850;
      letter-spacing: .09em;
      line-height: 1;
      text-transform: uppercase;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-heading{
      margin: 0;
      color: var(--pf-text);
      font-size: 1rem;
      font-weight: 850;
      line-height: 1.2;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-close{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      padding: 0;
      border: 1px solid rgba(71, 85, 105, .76);
      border-radius: 11px;
      background: rgba(15, 25, 42, .84);
      color: var(--pf-text);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-close:hover,
:where(html[data-bm-page="personal_finance"]) .pf-single-date-close:focus-visible{
      border-color: rgba(120, 144, 255, .7);
      background: rgba(79, 108, 247, .18);
      color: #fff;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-body{
      padding: 14px 16px 16px;
      overflow-y: auto;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-toolbar{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-nav-group,
:where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav{
      display: inline-flex;
      align-items: stretch;
      border: 1px solid #334155;
      border-radius: 999px;
      overflow: hidden;
      background: #0f172a;
      box-shadow: 0 8px 18px rgba(2, 6, 23, .18);
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-nav-group .btn,
:where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 6px 11px;
      border-radius: 0 !important;
      border-top: 0 !important;
      border-bottom: 0 !important;
      color: #cbd5e1 !important;
      background: #0f172a !important;
      border-color: #334155 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-nav-group .btn:first-child,
:where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav .btn:first-child{ border-left: 0 !important; }
    :where(html[data-bm-page="personal_finance"]) .calendar-nav-group .btn:last-child,
:where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav .btn:last-child{ border-right: 0 !important; }

    :where(html[data-bm-page="personal_finance"]) .calendar-nav-group .btn:hover,
:where(html[data-bm-page="personal_finance"]) .calendar-nav-group .btn:focus-visible,
:where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav .btn:hover,
:where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav .btn:focus-visible{
      color: #fff !important;
      background: rgba(79, 108, 247, .24) !important;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .calendar-nav-group .btn:disabled,
:where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav .btn:disabled{
      color: #64748b !important;
      cursor: not-allowed;
      opacity: .48;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav .btn:last-child,
:where(html[data-bm-page="personal_finance"]) .pf-single-date-today{
      color: #fff !important;
      background: var(--pf-primary) !important;
      border-color: var(--pf-primary) !important;
      font-weight: 800;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-calendar{
      margin: 0;
      padding: 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-calendar .dr-cal-head{
      justify-content: center;
      min-height: 34px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-calendar .dr-month-title{
      font-size: .95rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-day.is-today{
      border-color: rgba(45, 212, 191, .72);
      color: #99f6e4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-day.selected{
      color: #fff;
      background: var(--pf-primary);
      border-color: var(--pf-primary);
      box-shadow: 0 6px 14px rgba(79, 108, 247, .26);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-single-date-day:disabled{
      cursor: not-allowed;
      opacity: .22;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-navigation.dashboard-calendar-actions{
      gap: 10px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-calendar-current-label{
      min-height: 36px;
      font-size: .84rem;
    }


    @media (max-width: 992px){
      :where(html[data-bm-page="personal_finance"]) .dr-body{
        grid-template-columns: 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .dr-presets{
        order: -1;
      }
    }

    @media (max-width: 575px){
      :where(html[data-bm-page="personal_finance"]) .dr-popover{
        position: fixed;
        top: 12px;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-height: none;
      }

      :where(html[data-bm-page="personal_finance"]) .dr-header{
        grid-template-columns: 1fr 18px 1fr;
      }

      :where(html[data-bm-page="personal_finance"]) .dr-actions-top{
        grid-column: 1 / -1;
        justify-content: flex-end;
      }

      :where(html[data-bm-page="personal_finance"]) .dr-footer{
        align-items: stretch;
        flex-direction: column;
      }

      :where(html[data-bm-page="personal_finance"]) .dr-footer > .ms-auto{
        width: 100%;
        margin-left: 0 !important;
      }

      :where(html[data-bm-page="personal_finance"]) .dr-footer .btn{
        flex: 1 1 0;
      }

      :where(html[data-bm-page="personal_finance"]) #drPreview{
        white-space: normal;
      }
    }

    @media (max-width: 900px){
      :where(html[data-bm-page="personal_finance"]) .pf-global-rate-form{ grid-template-columns: 1fr; }
      :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-form{ grid-template-columns: 1fr 1fr; }
      :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-form .pf-rate-equation,
:where(html[data-bm-page="personal_finance"]) .pf-dated-rate-form > button{ grid-column: 1 / -1; }
      :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rate-row{ grid-template-columns: 1fr; }
    }

    @media (max-width: 780px){
      :where(html[data-bm-page="personal_finance"]) .pf-single-date-layer{ padding: 8px; }
      :where(html[data-bm-page="personal_finance"]) .pf-single-date-dialog{ max-height: calc(100vh - 16px); border-radius: 16px; }
      :where(html[data-bm-page="personal_finance"]) .pf-single-date-header,
:where(html[data-bm-page="personal_finance"]) .pf-single-date-footer{ padding: 13px; }
      :where(html[data-bm-page="personal_finance"]) .pf-single-date-body{ padding: 13px; }
      :where(html[data-bm-page="personal_finance"]) .pf-single-date-footer{ align-items: stretch; flex-direction: column-reverse; }
      :where(html[data-bm-page="personal_finance"]) .pf-single-date-footer-actions{ display: grid; grid-template-columns: 1fr 1fr; }
      :where(html[data-bm-page="personal_finance"]) .pf-single-date-footer > button{ width: 100%; }
      :where(html[data-bm-page="personal_finance"]) .pf-calendar-navigation.dashboard-calendar-actions{ width: 100%; align-items: stretch; }
      :where(html[data-bm-page="personal_finance"]) .pf-calendar-navigation.dashboard-calendar-actions .pf-calendar-current-label{ width: 100%; justify-content: center; }
      :where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav{ width: 100%; }
      :where(html[data-bm-page="personal_finance"]) .pf-dashboard-calendar-nav .btn{ flex: 1 1 0; padding-left: 7px !important; padding-right: 7px !important; }
      :where(html[data-bm-page="personal_finance"]) .pf-view-switcher{ align-items: stretch; flex-direction: column; }
      :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-actions{ display: grid; grid-template-columns: 1fr; }
      :where(html[data-bm-page="personal_finance"]) .pf-currency-form-grid,
:where(html[data-bm-page="personal_finance"]) .pf-dated-rate-form{ grid-template-columns: 1fr; }
      :where(html[data-bm-page="personal_finance"]) .pf-currency-form-grid button,
:where(html[data-bm-page="personal_finance"]) .pf-dated-rate-form .pf-rate-equation,
:where(html[data-bm-page="personal_finance"]) .pf-dated-rate-form > button{ grid-column: auto; }
      :where(html[data-bm-page="personal_finance"]) .pf-rate-equation,
:where(html[data-bm-page="personal_finance"]) .pf-rate-equation-add,
:where(html[data-bm-page="personal_finance"]) .pf-rate-equation-compact{
        grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
      }
      :where(html[data-bm-page="personal_finance"]) .pf-rate-equation-add .pf-equation-one{ display: none; }
      :where(html[data-bm-page="personal_finance"]) .pf-rate-equation-add select{ grid-column: 1 / -1; }
      :where(html[data-bm-page="personal_finance"]) .pf-rate-equation-add button{ grid-column: 1 / -1; }
      :where(html[data-bm-page="personal_finance"]) .pf-global-rate-form .pf-rate-equation button{ grid-column: 1 / -1; }
      :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-row{ grid-template-columns: 1fr auto; }
      :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-equation{ grid-column: 1 / -1; grid-row: 2; justify-self: start; }
      :where(html[data-bm-page="personal_finance"]) .pf-dated-rate-row > form{ grid-column: 2; grid-row: 1; }
      :where(html[data-bm-page="personal_finance"]) .pf-primary-change-rate-row .pf-rate-equation{ grid-template-columns: max-content max-content minmax(0, 1fr) max-content; }
      :where(html[data-bm-page="personal_finance"]) .pf-secondary-currency-title{ align-items: flex-start; }
    }


    /* ================================================================
       CABECERA Y CONTROLES COMPACTOS
       Unifica acciones, moneda, visualización y filtros en un solo sistema.
       ================================================================ */
    :where(html[data-bm-page="personal_finance"]) .pf-hero{
      padding: 23px;
      margin-bottom: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-content{
      align-items: flex-end;
      flex-wrap: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-copy{
      min-width: 0;
      flex: 1 1 auto;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero h2{
      margin-bottom: 7px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero p{
      max-width: 560px;
      line-height: 1.48;
      font-size: .9rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-currency{
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 1 auto;
      min-width: 0;
      max-width: 390px;
      padding: 10px 12px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 14px;
      background: rgba(8, 15, 29, .42);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-currency-icon,
:where(html[data-bm-page="personal_finance"]) .pf-view-switcher-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(79, 108, 247, .14);
      color: #bcc7ff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-currency-copy{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-currency-copy small,
:where(html[data-bm-page="personal_finance"]) .pf-hero-currency-copy strong{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-currency-copy small{
      color: var(--pf-muted);
      font-size: .68rem;
      font-weight: 750;
      line-height: 1.2;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-currency-copy strong{
      margin-top: 3px;
      overflow: hidden;
      color: var(--pf-text);
      font-size: .82rem;
      font-weight: 850;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-command-bar{
      position: relative;
      z-index: 1;
      display: flex;
      align-items: stretch;
      gap: 8px;
      margin-top: 18px;
      padding: 7px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 16px;
      background: rgba(8, 15, 29, .48);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-primary-action{
      flex: 0 0 auto;
      min-height: 44px;
      padding: 9px 17px;
      border-radius: 11px;
      font-size: .81rem;
      font-weight: 850;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-tools{
      display: flex;
      align-items: stretch;
      flex: 1 1 auto;
      min-width: 0;
      gap: 4px;
      padding-left: 8px;
      border-left: 1px solid rgba(148, 163, 184, .16);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-tool,
:where(html[data-bm-page="personal_finance"]) .pf-hero-tool.btn,
:where(html[data-bm-page="personal_finance"]) .pf-hero-tool.btn:hover,
:where(html[data-bm-page="personal_finance"]) .pf-hero-tool.btn:focus,
:where(html[data-bm-page="personal_finance"]) .pf-hero-tool.btn:active{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      flex: 1 1 0;
      min-width: 0;
      min-height: 44px;
      padding: 8px 10px;
      border: 0 !important;
      border-radius: 10px;
      background: transparent !important;
      color: var(--pf-muted-strong) !important;
      box-shadow: none !important;
      font-size: .76rem;
      font-weight: 780;
      line-height: 1.2;
      text-decoration: none;
      transition: background .16s ease, color .16s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-tool.btn:hover,
:where(html[data-bm-page="personal_finance"]) .pf-hero-tool.btn:focus-visible{
      background: rgba(79, 108, 247, .11) !important;
      color: #dce3ff !important;
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-tool i{
      flex: 0 0 auto;
      color: #aebaff;
      font-size: .95rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-hero-tool span{
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-currency-access-btn{
      white-space: nowrap;
      text-align: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher{
      min-height: 58px;
      margin-bottom: 14px;
      padding: 9px 10px 9px 12px;
      border-radius: 15px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-label{
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-icon{
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 32px;
      height: 32px;
      padding: 0 !important;
      border-radius: 9px;
      line-height: 1 !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-icon i,
:where(html[data-bm-page="personal_finance"]) .pf-view-switcher-icon i::before{
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 1em;
      height: 1em;
      margin: 0 !important;
      line-height: 1 !important;
      position: static !important;
      transform: none !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-label > div{
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-label > div strong,
:where(html[data-bm-page="personal_finance"]) .pf-view-switcher-label > div span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-label > div strong{
      color: var(--pf-text);
      font-size: .82rem;
      font-weight: 820;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-label > div span{
      margin-top: 2px;
      color: var(--pf-muted);
      font-size: .7rem;
      line-height: 1.3;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-actions{
      flex: 0 0 auto;
      padding: 3px;
      border-radius: 11px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-actions a{
      min-height: 36px;
      padding: 7px 11px;
      border-radius: 8px;
      font-size: .72rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-panel{
      margin-bottom: 18px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-disclosure{
      border-radius: 15px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary{
      min-height: 60px;
      padding: 10px 13px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-icon{
      width: 34px;
      height: 34px;
      border-radius: 10px;
      font-size: 15px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-copy strong{
      font-size: .84rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-copy small{
      margin-top: 2px;
      font-size: .7rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-action{
      padding: 7px 9px;
      border-radius: 9px;
      background: rgba(79, 108, 247, .08);
      font-size: .7rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-body{
      padding: 14px 13px 13px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filters-grid{
      gap: 10px !important;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-actions{
      gap: 8px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-actions .btn{
      min-height: 44px;
      border-radius: 12px;
      font-size: .78rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-panel.has-active-filters .pf-filter-disclosure{
      border-color: rgba(245, 158, 11, .46);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 0 0 1px rgba(245, 158, 11, .05);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-panel.has-active-filters .pf-filter-summary-icon{
      border-color: rgba(245, 158, 11, .42);
      background: rgba(245, 158, 11, .12);
      color: #fbbf24;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-active-badge{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 27px;
      padding: 5px 8px;
      border: 1px solid rgba(245, 158, 11, .34);
      border-radius: 999px;
      background: rgba(245, 158, 11, .11);
      color: #fcd34d;
      font-size: .68rem;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-active-badge i{
      font-size: .72rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-active-strip{
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
      padding: 9px 11px;
      border: 1px solid rgba(245, 158, 11, .25);
      border-radius: 12px;
      background: rgba(245, 158, 11, .07);
      color: var(--pf-muted-strong);
      font-size: .73rem;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-active-strip > i{
      flex: 0 0 auto;
      color: #fbbf24;
      font-size: .92rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-active-strip span{
      min-width: 0;
      flex: 1 1 auto;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-active-strip strong{
      color: #f8fafc;
      font-weight: 850;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-reset-link{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: 0 0 auto;
      min-height: 30px;
      padding: 6px 9px;
      border: 1px solid rgba(245, 158, 11, .32);
      border-radius: 9px;
      color: #fde68a;
      font-size: .69rem;
      font-weight: 850;
      text-decoration: none;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-filter-reset-link:hover,
:where(html[data-bm-page="personal_finance"]) .pf-filter-reset-link:focus-visible{
      background: rgba(245, 158, 11, .13);
      color: #fff7d6;
      outline: none;
    }

    @media (max-width: 1100px){
      :where(html[data-bm-page="personal_finance"]) .pf-hero-command-bar{
        flex-direction: column;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-hero-primary-action{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-hero-tools{
        padding-top: 7px;
        padding-left: 0;
        border-top: 1px solid rgba(148, 163, 184, .16);
        border-left: 0;
      }
    }

    @media (max-width: 780px){
      :where(html[data-bm-page="personal_finance"]) .pf-hero-content{
        align-items: stretch;
        flex-direction: column;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-hero-currency{
        width: 100%;
        max-width: none;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-hero-tools{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      :where(html[data-bm-page="personal_finance"]) .pf-view-switcher{
        gap: 10px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-actions{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 575px){
      :where(html[data-bm-page="personal_finance"]) .pf-hero{
        padding: 16px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-hero-command-bar{
        margin-top: 15px;
        padding: 6px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-hero-tool,
:where(html[data-bm-page="personal_finance"]) .pf-hero-tool.btn{
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        padding: 8px 10px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-hero-tool span{
        white-space: normal;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-view-switcher{
        padding: 10px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-actions{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-view-switcher-actions a{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-action{
        padding: 7px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-summary-action .pf-filter-active-badge{
        display: inline-flex;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-active-strip{
        align-items: flex-start;
        flex-wrap: wrap;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-active-strip span{
        flex-basis: calc(100% - 30px);
      }

      :where(html[data-bm-page="personal_finance"]) .pf-filter-reset-link{
        width: 100%;
      }
    }

    @media (max-width: 410px){
      :where(html[data-bm-page="personal_finance"]) .pf-hero-tools{
        grid-template-columns: 1fr;
      }
    }

    /* ===== Tutorial completo de Personal Finance ===== */
    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      overflow: hidden;
      margin-bottom: 18px;
      padding: 18px 20px;
      border: 1px solid rgba(99, 102, 241, .34);
      border-radius: 18px;
      background:
        radial-gradient(circle at 0 0, rgba(79, 108, 247, .24), transparent 38%),
        linear-gradient(135deg, rgba(20, 31, 55, .98), rgba(12, 20, 37, .98));
      box-shadow: 0 16px 34px rgba(2, 6, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite::after{
      content: "";
      position: absolute;
      top: -54px;
      right: -44px;
      width: 170px;
      height: 170px;
      border-radius: 50%;
      background: rgba(99, 102, 241, .10);
      pointer-events: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-main,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-copy,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-actions{
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-main{
      display: flex;
      align-items: center;
      gap: 15px;
      flex: 1 1 auto;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 50px;
      height: 50px;
      border: 1px solid rgba(129, 140, 248, .38);
      border-radius: 15px;
      background: linear-gradient(145deg, rgba(79, 108, 247, .28), rgba(99, 102, 241, .12));
      color: #c7d2fe;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
      font-size: 1.25rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-eyebrow{
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 4px;
      color: #aebaff;
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite h3{
      margin: 0;
      color: #f8fafc;
      font-size: 1rem;
      font-weight: 900;
      letter-spacing: -.015em;
      line-height: 1.3;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite p{
      max-width: 760px;
      margin: 5px 0 0;
      color: #94a3b8;
      font-size: .78rem;
      line-height: 1.55;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-mobile-note{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 9px;
      padding: 7px 10px;
      border: 1px solid rgba(56, 189, 248, .30);
      border-radius: 10px;
      background: rgba(14, 165, 233, .10);
      color: #d8f3ff;
      font-size: .72rem;
      font-weight: 850;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-mobile-note i{
      flex: 0 0 auto;
      color: #7dd3fc;
      font-size: .95rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-summary{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 9px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-pill{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 26px;
      padding: 5px 9px;
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: 999px;
      background: rgba(15, 23, 42, .52);
      color: #cbd5e1;
      font-size: .67rem;
      font-weight: 800;
      line-height: 1;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-pill.available{
      border-color: rgba(34, 197, 94, .28);
      background: rgba(34, 197, 94, .08);
      color: #bbf7d0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-pill.pending{
      border-color: rgba(245, 158, 11, .28);
      background: rgba(245, 158, 11, .08);
      color: #fde68a;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-actions{
      display: flex;
      align-items: center;
      flex: 0 0 auto;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-open-btn,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-open-btn:hover,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-open-btn:focus,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-open-btn:active{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 44px;
      padding: 10px 15px;
      border: 1px solid rgba(129, 140, 248, .46) !important;
      border-radius: 12px;
      background: linear-gradient(135deg, #4f6cf7, #6366f1) !important;
      color: #fff !important;
      box-shadow: 0 10px 24px rgba(79, 108, 247, .24) !important;
      font-size: .76rem;
      font-weight: 900;
      line-height: 1.2;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-open-btn:hover,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-open-btn:focus-visible{
      transform: translateY(-1px);
      filter: brightness(1.06);
      outline: none;
    }

    :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-dialog{
      --bs-modal-width: min(980px, calc(100vw - 2rem));
    }

    :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-content{
      overflow: hidden;
      border: 1px solid rgba(71, 85, 105, .92);
      border-radius: 20px;
      background: #0f172a;
      color: #cbd5e1;
      box-shadow: 0 28px 70px rgba(0, 0, 0, .46);
    }

    :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-header,
:where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-footer{
      border-color: rgba(71, 85, 105, .72);
      background: rgba(15, 23, 42, .98);
    }

    :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-header{
      align-items: flex-start;
      gap: 14px;
      padding: 18px 20px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-modal-heading{
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-modal-heading-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(129, 140, 248, .35);
      border-radius: 13px;
      background: rgba(79, 108, 247, .15);
      color: #c7d2fe;
      font-size: 1.05rem;
    }

    :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-title{
      color: #f8fafc;
      font-size: 1rem;
      font-weight: 900;
      letter-spacing: -.015em;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-modal-subtitle{
      display: block;
      margin-top: 3px;
      color: #94a3b8;
      font-size: .75rem;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .btn-close{
      flex: 0 0 auto;
      margin: 2px 0 0 auto;
      filter: invert(1) grayscale(100%) brightness(180%);
      opacity: .78;
    }

    :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-body{
      padding: 18px 20px 20px;
      background:
        radial-gradient(circle at 0 0, rgba(79, 108, 247, .08), transparent 32%),
        #111c31;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-modal-intro{
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      padding: 11px 13px;
      border: 1px solid rgba(71, 85, 105, .72);
      border-radius: 13px;
      background: rgba(15, 23, 42, .72);
      color: #aeb8ca;
      font-size: .75rem;
      line-height: 1.45;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-modal-intro i{
      flex: 0 0 auto;
      color: #aebaff;
      font-size: 1rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-phone-highlight{
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin: 0 0 14px;
      padding: 12px 13px;
      border: 1px solid rgba(56, 189, 248, .30);
      border-radius: 13px;
      background: rgba(14, 116, 144, .12);
      color: #bae6fd;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-phone-highlight > i{
      flex: 0 0 auto;
      margin-top: 2px;
      color: #7dd3fc;
      font-size: 1rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-phone-highlight strong,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-phone-highlight span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-phone-highlight strong{
      color: #e0f2fe;
      font-size: .78rem;
      font-weight: 900;
      line-height: 1.35;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-phone-highlight span{
      margin-top: 3px;
      color: #bae6fd;
      font-size: .72rem;
      line-height: 1.5;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-card{
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(71, 85, 105, .82);
      border-radius: 16px;
      background: rgba(15, 23, 42, .82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-card-header{
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 46px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(71, 85, 105, .68);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-card-title{
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-card-title i{
      flex: 0 0 auto;
      color: #aebaff;
      font-size: .98rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-card-title strong{
      display: block;
      color: #f8fafc;
      font-size: .78rem;
      font-weight: 900;
      line-height: 1.25;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-status{
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex: 0 0 auto;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: .63rem;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-status.available{
      border: 1px solid rgba(34, 197, 94, .30);
      background: rgba(34, 197, 94, .10);
      color: #bbf7d0;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-status.pending{
      border: 1px solid rgba(245, 158, 11, .30);
      background: rgba(245, 158, 11, .10);
      color: #fde68a;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-frame,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-unavailable{
      position: relative;
      width: 100%;
      background: #020617;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-frame{
      aspect-ratio: 16 / 9;
      overflow: hidden;
      isolation: isolate;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-frame iframe{
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: #000;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview{
      position: absolute;
      z-index: 2;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding: 0;
      border: 0;
      background: #020617;
      color: #fff;
      cursor: pointer;
      text-align: left;
      transition: opacity .18s ease, visibility .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview:focus-visible{
      outline: 3px solid rgba(129, 140, 248, .95);
      outline-offset: -3px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.01);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview::after{
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(2, 6, 23, .06) 30%, rgba(2, 6, 23, .82) 100%),
        linear-gradient(90deg, rgba(2, 6, 23, .30), transparent 58%);
      pointer-events: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-youtube-play{
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 74px;
      height: 52px;
      border-radius: 14px;
      background: #ff0033;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
      transform: translate(-50%, -50%);
      transition: transform .18s ease, filter .18s ease;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-youtube-play::before{
      content: "";
      width: 0;
      height: 0;
      margin-left: 4px;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 17px solid #fff;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview:hover .pf-tutorial-youtube-play,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview:focus-visible .pf-tutorial-youtube-play{
      filter: brightness(1.08);
      transform: translate(-50%, -50%) scale(1.06);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview-copy{
      position: absolute;
      z-index: 1;
      right: 18px;
      bottom: 15px;
      left: 18px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview-copy strong,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview-copy span{
      display: block;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview-copy strong{
      color: #fff;
      font-size: .86rem;
      font-weight: 900;
      text-shadow: 0 2px 9px rgba(0, 0, 0, .7);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview-copy span{
      margin-top: 3px;
      color: rgba(255, 255, 255, .82);
      font-size: .7rem;
      line-height: 1.4;
      text-shadow: 0 2px 9px rgba(0, 0, 0, .7);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-loading{
      display: none;
      flex: 0 0 auto;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 999px;
      background: rgba(2, 6, 23, .72);
      color: #fff;
      font-size: .66rem;
      font-weight: 850;
      white-space: nowrap;
      backdrop-filter: blur(7px);
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-frame.is-loading .pf-tutorial-video-loading{
      display: inline-flex;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-frame.is-loading .pf-tutorial-youtube-play{
      opacity: .62;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-frame.is-ready .pf-tutorial-video-preview{
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-fallback{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 13px;
      border-top: 1px solid rgba(71, 85, 105, .68);
      background: rgba(15, 23, 42, .92);
      color: #94a3b8;
      font-size: .69rem;
      line-height: 1.4;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-fallback a{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
      color: #c7d2fe;
      font-weight: 850;
      text-decoration: none;
      white-space: nowrap;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-fallback a:hover,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-fallback a:focus-visible{
      color: #fff;
      text-decoration: underline;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-unavailable{
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 16 / 9;
      min-height: 0;
      padding: 14px;
      background:
        linear-gradient(135deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .98));
      text-align: center;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-unavailable-inner{
      max-width: 220px;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-unavailable-icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin-bottom: 8px;
      border: 1px solid rgba(245, 158, 11, .28);
      border-radius: 12px;
      background: rgba(245, 158, 11, .08);
      color: #fcd34d;
      font-size: 1rem;
    }

    :where(html[data-bm-page="personal_finance"]) .pf-tutorial-unavailable strong{
      display: block;
      color: #f8fafc;
      font-size: .78rem;
      font-weight: 900;
      line-height: 1.3;
    }

    :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-footer{
      justify-content: flex-end;
      padding: 13px 20px;
    }

    :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-footer .btn{
      min-height: 39px;
      padding: 8px 15px;
      border-radius: 10px;
      font-size: .75rem;
      font-weight: 850;
    }

    @media (max-width: 767.98px){
      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite{
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
        padding: 16px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-actions,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-open-btn{
        width: 100%;
      }

      :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-dialog{
        --bs-modal-width: calc(100vw - 1rem);
        margin: .5rem;
      }

      :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-content{
        max-height: calc(100dvh - 1rem);
        border-radius: 16px;
      }

      :where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-header,
:where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-body,
:where(html[data-bm-page="personal_finance"]) #personalFinanceTutorialModal .modal-footer{
        padding-right: 14px;
        padding-left: 14px;
      }
    }

    @media (max-width: 575.98px){
      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-youtube-play{
        width: 62px;
        height: 44px;
        border-radius: 12px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-youtube-play::before{
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 14px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview-copy{
        right: 12px;
        bottom: 11px;
        left: 12px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-preview-copy span,
:where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-loading{
        display: none !important;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-video-fallback{
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 430px){
      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-main{
        align-items: flex-start;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite-icon{
        width: 44px;
        height: 44px;
        border-radius: 13px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-invite h3{
        font-size: .92rem;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-grid{
        gap: 8px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-card-header{
        min-height: 42px;
        padding: 8px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-card-title{
        gap: 6px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-card-title i{
        font-size: .82rem;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-language-card-title strong{
        font-size: .68rem;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-unavailable{
        padding: 8px;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-unavailable-icon{
        width: 32px;
        height: 32px;
        margin-bottom: 5px;
        border-radius: 10px;
        font-size: .82rem;
      }

      :where(html[data-bm-page="personal_finance"]) .pf-tutorial-unavailable strong{
        font-size: .67rem;
      }
    }

/* ==================== VISTA: html[data-bm-page="refers_missing_emails"] ==================== */
/* Origen: refers_missing_emails.php:233 */
:where(html[data-bm-page="refers_missing_emails"]):root{
    --border:#e5e7eb; --muted:#6b7280; --ink:#111827; --accent:#0d6efd; --soft:#f8fafc; --ok:#10b981;
  }
  :where(html[data-bm-page="refers_missing_emails"]) body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 16px; color:var(--ink); }
  :where(html[data-bm-page="refers_missing_emails"]) .card{ border:1px solid var(--border); border-radius:12px; box-shadow:0 6px 20px rgba(16,24,40,.06); background:#fff; padding:16px; margin-bottom:16px; }
  :where(html[data-bm-page="refers_missing_emails"]) .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  :where(html[data-bm-page="refers_missing_emails"]) .muted{ color:var(--muted); }
  :where(html[data-bm-page="refers_missing_emails"]) .ctrls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
  :where(html[data-bm-page="refers_missing_emails"]) .ctrls input,
:where(html[data-bm-page="refers_missing_emails"]) .ctrls select,
:where(html[data-bm-page="refers_missing_emails"]) .ctrls a,
:where(html[data-bm-page="refers_missing_emails"]) .ctrls button{ border:1px solid var(--border); border-radius:10px; padding:8px 10px; text-decoration:none; background:#fff; color:var(--ink); }
  :where(html[data-bm-page="refers_missing_emails"]) .ctrls a.btn{ background:var(--accent); color:#fff; border-color:var(--accent); }
  :where(html[data-bm-page="refers_missing_emails"]) table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:12px; }
  :where(html[data-bm-page="refers_missing_emails"]) thead th{ text-align:left; padding:10px; font-size:.85rem; color:#374151; border-bottom:1px solid var(--border); background:#fff; position:sticky; top:0; }
  :where(html[data-bm-page="refers_missing_emails"]) tbody td{ padding:10px; border-bottom:1px solid var(--border); vertical-align:top;}
  :where(html[data-bm-page="refers_missing_emails"]) tbody tr:nth-child(even){ background:var(--soft); }
  :where(html[data-bm-page="refers_missing_emails"]) .kpi{ display:inline-flex; gap:6px; align-items:center; background:#ecfdf5; border:1px solid #bbf7d0; border-radius:999px; padding:6px 10px; margin:6px 6px 0 0; font-weight:700; }
  :where(html[data-bm-page="refers_missing_emails"]) textarea.sqlbox{ width:100%; min-height:280px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:.9rem; padding:10px; border:1px solid var(--border); border-radius:12px; background:#0b1020; color:#e5e7eb; }
  :where(html[data-bm-page="refers_missing_emails"]) code.note{ background:#fff7ed; color:#92400e; padding:4px 6px; border-radius:8px; border:1px solid #fed7aa; }
  @media (max-width: 768px){
    :where(html[data-bm-page="refers_missing_emails"]) thead{ display:none; }
    :where(html[data-bm-page="refers_missing_emails"]) tbody tr{ display:block; margin:10px 0; border:1px solid var(--border); border-radius:10px; background:#fff; }
    :where(html[data-bm-page="refers_missing_emails"]) tbody td{ display:block; border:none; }
    :where(html[data-bm-page="refers_missing_emails"]) tbody td::before{ content:attr(data-label); display:block; font-size:.8rem; color:var(--muted); margin-bottom:4px; }
  }

/* ==================== VISTA: html[data-bm-page="refers"] ==================== */
/* Origen: refers.php:1423 */
:where(html[data-bm-page="refers"]):root{
  --page-bg: #111827;
  --page-bg-2: #0f172a;
  --card-bg: rgba(25, 34, 55, .94);
  --card-bg-2: rgba(19, 27, 46, .96);
  --card-br: 22px;
  --card-shadow: 0 22px 60px rgba(0, 0, 0, .34), 0 1px 0 rgba(255,255,255,.04) inset;
  --muted: #a5b4cf;
  --muted-2: #7f8da9;
  --soft: rgba(13, 20, 36, .78);
  --soft-2: rgba(44, 56, 84, .68);
  --border: rgba(148, 163, 184, .16);
  --border-strong: rgba(148, 163, 184, .26);
  --accent: #5267ff;
  --accent-2: #7c3aed;
  --accent-3: #38bdf8;
  --accent-soft: rgba(82, 103, 255, .16);
  --ink: #f8fafc;
  --ok: #39b66f;
  --ok-soft: rgba(57, 182, 111, .16);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, .16);
  --err: #ff5f57;
  --err-soft: rgba(255, 95, 87, .15);
}

:where(html[data-bm-page="refers"]) body{
  background: linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-2) 100%) !important;
  color: var(--ink) !important;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

:where(html[data-bm-page="refers"]) .affiliate-panel,
:where(html[data-bm-page="refers"]) .affiliate-panel *{
  box-sizing:border-box;
}

:where(html[data-bm-page="refers"]) .affiliate-panel{
  min-height:100vh;
  color:var(--ink);
  background:transparent;
  padding-bottom:96px;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .section{ background:transparent; }
:where(html[data-bm-page="refers"]) .affiliate-panel .container-fluid{ max-width:1600px; }
:where(html[data-bm-page="refers"]) .affiliate-panel .title-wrapper.pt-30{ padding-top:24px; }
:where(html[data-bm-page="refers"]) .affiliate-panel a{ transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
:where(html[data-bm-page="refers"]) .affiliate-panel h1,
:where(html[data-bm-page="refers"]) .affiliate-panel h2,
:where(html[data-bm-page="refers"]) .affiliate-panel h3,
:where(html[data-bm-page="refers"]) .affiliate-panel h4,
:where(html[data-bm-page="refers"]) .affiliate-panel h5,
:where(html[data-bm-page="refers"]) .affiliate-panel h6{ color:var(--ink); letter-spacing:-.025em; }
:where(html[data-bm-page="refers"]) .affiliate-panel p{ color:var(--muted); }

/* HERO SUPERIOR */
:where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:22px;
  align-items:stretch;
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(148,163,184,.18);
  background:
    linear-gradient(135deg, rgba(82,103,255,.11), rgba(56,189,248,.035) 46%, rgba(19,27,46,.96) 100%),
    rgba(19,27,46,.96);
  box-shadow: var(--card-shadow);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-hero::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-140px;
  top:-160px;
  background:radial-gradient(circle, rgba(82,103,255,.16), transparent 70%);
  pointer-events:none;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-hero::after{
  content:"";
  position:absolute;
  inset:auto 28px 0 28px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  pointer-events:none;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .hero-content,
:where(html[data-bm-page="refers"]) .affiliate-panel .hero-kpis{ position:relative; z-index:1; }
:where(html[data-bm-page="refers"]) .affiliate-panel .hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  margin-bottom:12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#dbeafe;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-hero h2{
  margin:0;
  font-size:clamp(2rem, 3.4vw, 3.55rem);
  line-height:.98;
  font-weight:900;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-hero p{
  max-width:780px;
  margin:14px 0 0;
  font-size:1rem;
  line-height:1.65;
  color:#c7d2fe;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .hero-kpis{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  align-content:center;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .hero-kpi{
  min-height:100px;
  padding:17px;
  border-radius:20px;
  background:rgba(8,13,25,.38);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .hero-kpi strong{
  display:block;
  color:#fff;
  font-size:1.45rem;
  line-height:1;
  margin-bottom:8px;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .hero-kpi span{
  display:block;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}

/* CARDS */
:where(html[data-bm-page="refers"]) .affiliate-panel .card-style{
  position:relative;
  overflow:hidden;
  color:var(--muted);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--card-br);
  box-shadow:var(--card-shadow);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .card-style::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events:none;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .card-style:hover{
  border-color:rgba(148,163,184,.24);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .hr-soft{ border-top:1px solid var(--border); margin:1rem 0; }
:where(html[data-bm-page="refers"]) .affiliate-panel .helper{ color:var(--muted); font-size:.92rem; line-height:1.55; }
:where(html[data-bm-page="refers"]) .affiliate-panel .helper strong{ color:#d9e5ff; }
:where(html[data-bm-page="refers"]) .affiliate-panel small,
:where(html[data-bm-page="refers"]) .affiliate-panel .small{ color:var(--muted-2); }

/* BOTONES */
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:42px;
  padding:.68rem 1rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:800;
  font-size:.9rem;
  text-decoration:none;
  cursor:pointer;
  line-height:1.1;
  white-space:nowrap;
  box-shadow:none;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn.bm-primary{
  color:#fff;
  border-color:rgba(255,255,255,.10);
  background:linear-gradient(135deg, var(--accent), #4254e8 60%, var(--accent-2));
  box-shadow:0 14px 28px rgba(82,103,255,.24);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn.bm-primary:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(82,103,255,.32);
  filter:saturate(1.08);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn.bm-secondary{
  color:#e5ecff;
  background:linear-gradient(180deg, rgba(148,163,184,.18), rgba(148,163,184,.10));
  border-color:rgba(148,163,184,.22);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn.bm-secondary:hover{
  color:#fff;
  background:linear-gradient(180deg, rgba(148,163,184,.28), rgba(148,163,184,.16));
  transform:translateY(-1px);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn.bm-outline{
  color:#dbe4ff;
  background:rgba(255,255,255,.035);
  border-color:rgba(148,163,184,.22);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn.bm-outline:hover{ background:rgba(255,255,255,.07); }
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn.bm-danger{
  color:#fee2e2;
  background:var(--err-soft);
  border-color:rgba(255,95,87,.30);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn.bm-danger:hover{
  color:#fff;
  background:rgba(255,95,87,.24);
  transform:translateY(-1px);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn:disabled{
  opacity:.52;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn-sm{ min-height:36px; padding:.5rem .78rem; font-size:.82rem; }
:where(html[data-bm-page="refers"]) .affiliate-panel .invite-revoked-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:7px 8px 7px 11px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  background:rgba(148,163,184,.07);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .invite-revoked-date{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#aebbd2;
  font-size:.73rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .invite-revoked-date i{
  color:#7f91b2;
  font-size:.86rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .invite-revoked-action .bm-btn{
  flex:0 0 auto;
}
@media (max-width:575.98px){
  :where(html[data-bm-page="refers"]) .affiliate-panel .invite-revoked-action{
    width:100%;
    align-items:stretch;
    flex-direction:column;
    gap:8px;
    padding:10px;
  }
  :where(html[data-bm-page="refers"]) .affiliate-panel .invite-revoked-action .invite-restore-form,
:where(html[data-bm-page="refers"]) .affiliate-panel .invite-revoked-action .bm-btn{
    width:100%;
  }
}
:where(html[data-bm-page="refers"]) .affiliate-panel [data-bs-toggle="collapse"] .lni-chevron-down{ transition: transform .2s ease; }
:where(html[data-bm-page="refers"]) .affiliate-panel [data-bs-toggle="collapse"][aria-expanded="true"] .lni-chevron-down{ transform:rotate(180deg); }

/* FORMULARIOS */
:where(html[data-bm-page="refers"]) .affiliate-panel .form-label{ color:#dbe4ff; font-weight:750; }
:where(html[data-bm-page="refers"]) .affiliate-panel .form-select-sm,
:where(html[data-bm-page="refers"]) .affiliate-panel .form-control{
  min-height:42px;
  background:rgba(8,13,25,.64);
  border:1px solid rgba(148,163,184,.19);
  border-radius:14px;
  color:var(--ink);
  font-size:.92rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .form-select-sm{ padding:.55rem 2.15rem .55rem .8rem; }
:where(html[data-bm-page="refers"]) .affiliate-panel .form-control{ padding:.64rem .84rem; }
:where(html[data-bm-page="refers"]) .affiliate-panel .form-control:focus,
:where(html[data-bm-page="refers"]) .affiliate-panel .form-select-sm:focus{
  color:#fff;
  background:rgba(8,13,25,.82);
  border-color:rgba(82,103,255,.75);
  box-shadow:0 0 0 4px rgba(82,103,255,.14);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .form-control::placeholder{ color:#71809d; }
:where(html[data-bm-page="refers"]) .affiliate-panel input[readonly]{ cursor:text; }
:where(html[data-bm-page="refers"]) .affiliate-panel .form-check-input{
  background-color:rgba(8,13,25,.75);
  border-color:rgba(148,163,184,.35);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .form-check-input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .form-check-label{ color:var(--muted); }

/* ALERTAS */
:where(html[data-bm-page="refers"]) .affiliate-panel .alert{
  color:#dbe4ff;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(8,13,25,.58);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .alert-info{ background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.24); }
:where(html[data-bm-page="refers"]) .affiliate-panel .alert-success{ background:var(--ok-soft); border-color:rgba(57,182,111,.30); color:#dcfce7; }
:where(html[data-bm-page="refers"]) .affiliate-panel .alert-danger{ background:var(--err-soft); border-color:rgba(255,95,87,.28); color:#fee2e2; }

/* CUPONES */
:where(html[data-bm-page="refers"]) .affiliate-panel .coupon-card{ padding:22px !important; }
:where(html[data-bm-page="refers"]) .affiliate-panel .coupon-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:16px;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .coupon-header h5{ font-size:1.06rem; font-weight:850; }
:where(html[data-bm-page="refers"]) .affiliate-panel .coupon-hint{ color:var(--muted); font-size:.9rem; }
:where(html[data-bm-page="refers"]) .affiliate-panel .coupon-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .coupon-tabs a{
  display:inline-flex;
  align-items:center;
  gap:.46rem;
  min-height:42px;
  padding:.52rem .94rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(8,13,25,.34);
  color:#aab8d5;
  font-weight:850;
  font-size:.92rem;
  text-decoration:none;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .coupon-tabs a:hover{
  color:#fff;
  transform:translateY(-1px);
  background:rgba(82,103,255,.13);
  border-color:rgba(82,103,255,.34);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .coupon-tabs a.active{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), #4a5cf1 60%, var(--accent-2));
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 25px rgba(82,103,255,.25);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .coupon-tabs .count{
  min-width:26px;
  text-align:center;
  padding:.09rem .48rem;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.16);
  font-size:.78rem;
  font-weight:900;
}

/* LINK + PAGOS */
:where(html[data-bm-page="refers"]) .affiliate-panel .referral-payment-card{ padding:24px !important; }
:where(html[data-bm-page="refers"]) .affiliate-panel .referral-payment-card h5{ font-weight:900; }
:where(html[data-bm-page="refers"]) .affiliate-panel #refLink,
:where(html[data-bm-page="refers"]) .affiliate-panel #diaryLink{
  font-weight:720;
  letter-spacing:.01em;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .referral-payment-card .border.rounded-3,
:where(html[data-bm-page="refers"]) .affiliate-panel #propFirmsPanel .border.rounded-3,
:where(html[data-bm-page="refers"]) .affiliate-panel #usersTrackerPanel .card-style{
  border-color:rgba(148,163,184,.18) !important;
  background:rgba(8,13,25,.48) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .referral-payment-card ul{ padding-left:1.08rem; }
:where(html[data-bm-page="refers"]) .affiliate-panel .referral-payment-card li{ margin:.15rem 0; }

/* NUEVO ENLACE DE AFILIADO */
:where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-share-intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:18px;
  border-radius:22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(82,103,255,.22), transparent 35%),
    linear-gradient(135deg, rgba(82,103,255,.13), rgba(56,189,248,.055)),
    rgba(8,13,25,.46);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-bottom:.45rem;
  padding:.34rem .62rem;
  border-radius:999px;
  color:#dbeafe;
  background:rgba(82,103,255,.18);
  border:1px solid rgba(147,197,253,.20);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-coupon-pill{
  flex:0 0 auto;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:.58rem .82rem;
  border-radius:999px;
  color:#07111f;
  background:linear-gradient(135deg, #67e8f9, #a5b4fc);
  font-size:.86rem;
  font-weight:950;
  letter-spacing:.04em;
  box-shadow:0 12px 24px rgba(56,189,248,.16);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-methods-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.014)),
    rgba(8,13,25,.50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-card:hover{
  border-color:rgba(148,163,184,.30);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-card:nth-child(1){
  background:
    linear-gradient(180deg, rgba(82,103,255,.105), rgba(82,103,255,.025)),
    rgba(8,13,25,.52);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-card:nth-child(2){
  background:
    linear-gradient(180deg, rgba(56,189,248,.090), rgba(56,189,248,.020)),
    rgba(8,13,25,.52);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.85rem;
  margin-bottom:.85rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-title{
  min-width:0;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-title h6{
  margin:0 0 .32rem;
  color:#ffffff;
  font-size:1rem;
  font-weight:930;
  letter-spacing:-.02em;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-title p{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.48;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:.28rem .62rem;
  border-radius:999px;
  color:#dbeafe;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  font-size:.72rem;
  font-weight:900;
  white-space:nowrap;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-link{
  display:block;
  margin:.2rem 0 .75rem;
  padding:.68rem .78rem;
  border-radius:15px;
  color:#8ee8ff;
  background:rgba(3,7,18,.48);
  border:1px solid rgba(148,163,184,.16);
  font-size:.84rem;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-list{
  margin:0 0 1rem;
  padding-left:1.05rem;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.52;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-method-card .share-link-actions{
  margin-top:auto;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-link-box{
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(8,13,25,.50);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-link-primary{
  border-color:rgba(148,163,184,.20);
  background:rgba(8,13,25,.50);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-link-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  margin-bottom:.75rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-link-meta span{
  color:#dbe4ff;
  font-size:.92rem;
  font-weight:900;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-link-meta strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8ee8ff;
  font-size:.84rem;
  font-weight:850;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-link-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:.55rem;
  align-items:center;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-link-actions .form-control,
:where(html[data-bm-page="refers"]) .affiliate-panel .classic-link-row .form-control{
  min-width:0;
  width:100%;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-advantages-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-advantage-card{
  padding:15px;
  border-radius:20px;
  background:rgba(8,13,25,.42);
  border:1px solid rgba(148,163,184,.17);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-advantage-card.featured{
  background:rgba(8,13,25,.42);
  border-color:rgba(148,163,184,.17);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-advantage-top{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:.55rem;
  color:#f8fafc;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-advantage-top strong{
  font-size:.95rem;
  font-weight:900;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent-3);
  box-shadow:0 0 0 5px rgba(56,189,248,.13);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-dot.muted{
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(82,103,255,.13);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-advantage-card ul{
  margin:0;
  padding-left:1.08rem;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.52;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-advantage-card p{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.52;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .classic-link-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.5rem;
  align-items:center;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-tip{
  padding:12px 14px;
  border-radius:18px;
  color:#d9e5ff;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.20);
  font-size:.91rem;
  line-height:1.5;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .share-tip strong{ color:#ffffff; }


/* PERÍODOS Y KPIS */
:where(html[data-bm-page="refers"]) .affiliate-panel .summary-performance-card{ padding:24px !important; }
:where(html[data-bm-page="refers"]) .affiliate-panel .summary-performance-card > .d-flex:first-child{ margin-bottom:12px; }
:where(html[data-bm-page="refers"]) .affiliate-panel .period-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  padding:4px;
  border-radius:999px;
  background:rgba(8,13,25,.42);
  border:1px solid rgba(148,163,184,.14);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .period-tabs a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.37rem .86rem;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);
  font-weight:850;
  font-size:.85rem;
  text-decoration:none;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .period-tabs a:hover{ color:#fff; background:rgba(255,255,255,.06); }
:where(html[data-bm-page="refers"]) .affiliate-panel .period-tabs a.active{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), #4254e8);
  box-shadow:0 8px 18px rgba(82,103,255,.22);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .kpi-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin:.85rem 0 1.15rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .kpi{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height:40px;
  background:rgba(8,13,25,.44);
  border:1px solid rgba(148,163,184,.16);
  border-radius:999px;
  padding:.45rem .85rem;
  font-weight:780;
  font-size:.9rem;
  color:var(--muted);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .kpi span:not(.dot){ color:#b9c7e5; }
:where(html[data-bm-page="refers"]) .affiliate-panel .kpi .dot{
  width:.58rem;
  height:.58rem;
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .kpi .d1{ background:#6d5dfc; box-shadow:0 0 14px rgba(109,93,252,.85); }
:where(html[data-bm-page="refers"]) .affiliate-panel .kpi .d2{ background:var(--ok); box-shadow:0 0 14px rgba(57,182,111,.85); }
:where(html[data-bm-page="refers"]) .affiliate-panel .kpi .d3{ background:var(--accent-3); box-shadow:0 0 14px rgba(56,189,248,.80); }
:where(html[data-bm-page="refers"]) .affiliate-panel .kpi .d4{ background:var(--err); box-shadow:0 0 14px rgba(255,95,87,.80); }

:where(html[data-bm-page="refers"]) .affiliate-panel .stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(200px, 1fr));
  gap:14px;
  margin-top:14px;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .stat-card{
  position:relative;
  overflow:hidden;
  min-height:118px;
  padding:20px 20px 18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), rgba(8,13,25,.38);
  border:1px solid rgba(148,163,184,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .stat-card::after{
  content:"";
  position:absolute;
  right:-48px;
  top:-48px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(82,103,255,.13);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .stat-card:nth-child(2)::after{ background:rgba(57,182,111,.13); }
:where(html[data-bm-page="refers"]) .affiliate-panel .stat-card:nth-child(3)::after{ background:rgba(56,189,248,.13); }
:where(html[data-bm-page="refers"]) .affiliate-panel .stat-card:nth-child(4)::after{ background:rgba(245,158,11,.13); }
:where(html[data-bm-page="refers"]) .affiliate-panel .stat-card h6{
  margin:0 0 10px;
  color:var(--muted);
  font-weight:850;
  font-size:.9rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .stat-card .value{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:clamp(1.55rem,2.2vw,2.2rem);
  font-weight:950;
  letter-spacing:-.04em;
  line-height:1;
}

/* BADGES */
:where(html[data-bm-page="refers"]) .affiliate-panel .badge{
  display:inline-flex;
  align-items:center;
  gap:.36rem;
  max-width:100%;
  padding:.32rem .66rem;
  border-radius:999px;
  font-weight:850;
  border:1px solid rgba(148,163,184,.18);
  font-size:.78rem;
  line-height:1.1;
  white-space:normal;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .badge.gray{
  color:#b9c7e5;
  background:rgba(148,163,184,.10);
  border-color:rgba(148,163,184,.18);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .badge.ok{
  color:#74e6a0;
  background:rgba(57,182,111,.14);
  border-color:rgba(57,182,111,.26);
}

/* DIARIO / RECOMPENSA */
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:24px;
  background:
    linear-gradient(135deg, rgba(82,103,255,.12), rgba(56,189,248,.04) 38%, rgba(8,13,25,.42)),
    rgba(19,27,46,.92);
  border:1px solid rgba(148,163,184,.19);
  box-shadow:0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-card::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-100px;
  top:-100px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(82,103,255,.22), transparent 70%);
  pointer-events:none;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-header{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.2rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-icon{
  width:56px;
  height:56px;
  flex:0 0 auto;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(82,103,255,.26), rgba(56,189,248,.13));
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.85rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-title h5{
  margin:0 0 6px;
  font-weight:930;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-subtitle{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.62;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:.36rem .92rem;
  border-radius:999px;
  font-size:.83rem;
  font-weight:900;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-tag-success{
  background:rgba(57,182,111,.15);
  color:#74e6a0;
  border:1px solid rgba(57,182,111,.30);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-tag-pending{
  background:rgba(245,158,11,.14);
  color:#fbbf24;
  border:1px solid rgba(245,158,11,.28);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .68rem;
  border-radius:999px;
  background:rgba(82,103,255,.13);
  border:1px solid rgba(82,103,255,.18);
  font-size:.75rem;
  font-weight:900;
  color:#c7d2fe;
  margin-bottom:.45rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-columns{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, .92fr);
  gap:1.35rem;
  align-items:stretch;
  margin-top:1.15rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-main{ min-width:0; }
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-benefits{
  background:rgba(8,13,25,.46);
  border-radius:22px;
  padding:20px 22px;
  border:1px solid rgba(148,163,184,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-benefits h6{
  margin:0 0 .55rem;
  font-weight:900;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-benefits-group-title{
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.085em;
  color:#93a4c6;
  margin-bottom:.2rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-benefits-list{
  margin:0 0 .58rem;
  padding-left:0;
  list-style:none;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-benefits-list li{
  margin-bottom:.42rem;
  color:#e8eefc;
  display:flex;
  gap:.5rem;
  align-items:flex-start;
  line-height:1.45;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-benefits-list li span.bullet{
  color:var(--accent-3);
  line-height:1.4;
  font-weight:900;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-progress-wrap{ margin-top:.85rem; }
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-progress-bar{
  position:relative;
  width:100%;
  height:11px;
  border-radius:999px;
  background:rgba(148,163,184,.14);
  overflow:hidden;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-progress-bar span{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-3), var(--ok));
  box-shadow:0 0 18px rgba(56,189,248,.34);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-progress-label{
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  margin-top:.55rem;
  color:var(--muted);
  font-size:.85rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-mini-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.75rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-mini-kpi{
  padding:.42rem .7rem;
  border-radius:999px;
  color:#c7d2fe;
  background:rgba(82,103,255,.10);
  border:1px solid rgba(82,103,255,.16);
  font-size:.82rem;
  font-weight:750;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-steps{
  display:grid;
  gap:.72rem;
  margin-top:.15rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-step{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:flex-start;
  gap:.66rem;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-step-number{
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(82,103,255,.20);
  color:#dbe4ff;
  font-size:.82rem;
  font-weight:950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px rgba(82,103,255,.20) inset;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-step-title{
  color:#f8fafc;
  font-size:.94rem;
  font-weight:900;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-step-text{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.48;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .speech-box{
  background:rgba(8,13,25,.62);
  border:1px solid rgba(57,182,111,.25);
  border-left:4px solid var(--ok);
  padding:16px;
  border-radius:18px;
  color:#e6f2ff;
  font-size:.92rem;
  line-height:1.65;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .speech-box strong{ color:#fbbf24; }
:where(html[data-bm-page="refers"]) .affiliate-panel .speech-box p{ margin:0 0 10px 0; }
:where(html[data-bm-page="refers"]) .affiliate-panel .speech-box p:last-child{ margin:0; }

/* TABLAS */
:where(html[data-bm-page="refers"]) .affiliate-panel .tools-bar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), rgba(8,13,25,.34);
  border-top-left-radius:var(--card-br);
  border-top-right-radius:var(--card-br);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .tools-bar h5{ font-weight:930; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-actions,
:where(html[data-bm-page="refers"]) .affiliate-panel .table-actions form{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .table-actions .form-control{ min-width:260px; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-responsive{
  width:100%;
  overflow-x:auto;
  scrollbar-color:rgba(148,163,184,.35) transparent;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:var(--muted);
}
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(10,16,32,.94);
  color:#eef4ff;
  border-bottom:1px solid rgba(148,163,184,.14);
  padding:16px 18px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.075em;
  font-weight:950;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern tbody td{
  vertical-align:top;
  padding:18px;
  border-bottom:1px solid rgba(148,163,184,.12);
  color:#b8c7e5;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern tbody tr{
  transition:background .16s ease, transform .16s ease;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern tbody tr:hover{ background:rgba(82,103,255,.055); }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern tbody tr:last-child td{ border-bottom:none; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern .col-id{ white-space:nowrap; width:132px; color:#f8fafc; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern .col-store{ white-space:nowrap; width:110px; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern .col-client{ min-width:220px; color:#f8fafc; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern .col-products{ min-width:300px; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern .col-products ul{ padding-left:1rem; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern .col-products li{ margin-bottom:.35rem; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern .col-amount{ white-space:nowrap; width:160px; color:#fff; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern .col-comm{ white-space:nowrap; width:180px; color:#74e6a0; }
:where(html[data-bm-page="refers"]) .affiliate-panel .table-modern .col-status{ white-space:nowrap; width:160px; }

/* PAGINACIÓN */
:where(html[data-bm-page="refers"]) .affiliate-panel .pagination{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding:14px 22px 20px;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .pagination a,
:where(html[data-bm-page="refers"]) .affiliate-panel .pagination span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:.38rem .68rem;
  border:1px solid rgba(148,163,184,.16);
  border-radius:12px;
  background:rgba(8,13,25,.42);
  color:var(--muted);
  text-decoration:none;
  font-size:.83rem;
  font-weight:750;
}
:where(html[data-bm-page="refers"]) .affiliate-panel .pagination .active,
:where(html[data-bm-page="refers"]) .affiliate-panel .pagination a:hover{
  color:#fff;
  border-color:rgba(82,103,255,.32);
  background:rgba(82,103,255,.16);
}

/* FORMULARIO DE SOLICITUD DE AFILIADO */
:where(html[data-bm-page="refers"]) .affiliate-panel .card-style h2{ font-weight:950; }
:where(html[data-bm-page="refers"]) .affiliate-panel .card-style ul{ color:var(--muted); }
:where(html[data-bm-page="refers"]) .affiliate-panel .card-style li strong{ color:#e8eefc; }

/* RESPONSIVE */
@media (max-width: 1200px){
  :where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-hero{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .hero-kpis{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  :where(html[data-bm-page="refers"]) .affiliate-panel .stat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  :where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-columns{ grid-template-columns:1fr; }
}
@media (max-width: 992px){
  :where(html[data-bm-page="refers"]) .affiliate-panel .tools-bar{ align-items:flex-start; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-actions,
:where(html[data-bm-page="refers"]) .affiliate-panel .table-actions form{ width:100%; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-actions .form-control,
:where(html[data-bm-page="refers"]) .affiliate-panel .table-actions select,
:where(html[data-bm-page="refers"]) .affiliate-panel .table-actions button{ flex:1 1 160px; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-responsive{ overflow:visible; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-modern thead{ display:none; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-modern tbody tr{
    display:block;
    margin:14px 14px;
    padding:12px 14px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:18px;
    background:rgba(8,13,25,.42);
  }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-modern tbody td{
    display:grid;
    grid-template-columns:minmax(110px, .42fr) minmax(0,1fr);
    gap:12px;
    border-bottom:1px solid rgba(148,163,184,.10);
    padding:11px 0;
  }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-modern tbody td:last-child{ border-bottom:none; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-modern tbody td::before{
    content:attr(data-label);
    color:#8392b0;
    font-weight:900;
    text-transform:uppercase;
    font-size:.72rem;
    letter-spacing:.06em;
  }
}
@media (max-width: 768px){
  :where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-hero{ padding:22px; border-radius:24px; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .hero-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  :where(html[data-bm-page="refers"]) .affiliate-panel .coupon-header{ align-items:flex-start; flex-direction:column; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .coupon-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    margin-inline:-2px;
  }
  :where(html[data-bm-page="refers"]) .affiliate-panel .coupon-tabs a{ flex:0 0 auto; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .stat-grid{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .period-tabs{ width:100%; justify-content:space-between; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .period-tabs a{ flex:1 1 0; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-card{ padding:18px; border-radius:22px; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-header > div:last-child{ width:100%; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-tag{ width:100%; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-share-intro{ flex-direction:column; padding:16px; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .share-coupon-pill{ max-width:100%; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .share-methods-grid{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .share-method-head{ align-items:flex-start; flex-direction:column; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .share-method-link{ white-space:normal; word-break:break-word; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .share-link-meta{ align-items:flex-start; flex-direction:column; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .share-link-meta strong{ max-width:100%; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .share-link-actions{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .share-link-actions .bm-btn{ width:100%; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .share-advantages-grid{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .classic-link-row{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .classic-link-row .bm-btn{ width:100%; }
}
@media (max-width: 576px){
  :where(html[data-bm-page="refers"]) .affiliate-panel .container-fluid{ padding-left:12px; padding-right:12px; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-hero h2{ font-size:2.2rem; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .hero-kpis{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .card-style{ border-radius:18px; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .coupon-card,
:where(html[data-bm-page="refers"]) .affiliate-panel .referral-payment-card,
:where(html[data-bm-page="refers"]) .affiliate-panel .summary-performance-card{ padding:18px !important; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .tools-bar{ padding:16px; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-actions form{ display:grid; grid-template-columns:1fr; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-actions .form-control,
:where(html[data-bm-page="refers"]) .affiliate-panel .table-actions select,
:where(html[data-bm-page="refers"]) .affiliate-panel .table-actions button{ width:100%; min-width:0 !important; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .table-modern tbody td{ grid-template-columns:1fr; gap:3px; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .diary-progress-label{ flex-direction:column; }
  :where(html[data-bm-page="refers"]) .affiliate-panel .bm-btn{ width:auto; white-space:normal; }
}
@media (prefers-reduced-motion: no-preference){
  :where(html[data-bm-page="refers"]) .affiliate-panel .card-style,
:where(html[data-bm-page="refers"]) .affiliate-panel .affiliate-hero,
:where(html[data-bm-page="refers"]) .affiliate-panel .diary-goal-card{
    animation:bm-aba2c1942c-bmFadeUp .38s ease both;
  }
  @keyframes bm-aba2c1942c-bmFadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }
}

/* ==================== VISTA: html[data-bm-page="refersAnt"] ==================== */
/* Origen: refersAnt.php:1198 */
:where(html[data-bm-page="refersAnt"]):root{
  --page-bg: #111827;
  --page-bg-2: #0f172a;
  --card-bg: rgba(25, 34, 55, .94);
  --card-bg-2: rgba(19, 27, 46, .96);
  --card-br: 22px;
  --card-shadow: 0 22px 60px rgba(0, 0, 0, .34), 0 1px 0 rgba(255,255,255,.04) inset;
  --muted: #a5b4cf;
  --muted-2: #7f8da9;
  --soft: rgba(13, 20, 36, .78);
  --soft-2: rgba(44, 56, 84, .68);
  --border: rgba(148, 163, 184, .16);
  --border-strong: rgba(148, 163, 184, .26);
  --accent: #5267ff;
  --accent-2: #7c3aed;
  --accent-3: #38bdf8;
  --accent-soft: rgba(82, 103, 255, .16);
  --ink: #f8fafc;
  --ok: #39b66f;
  --ok-soft: rgba(57, 182, 111, .16);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, .16);
  --err: #ff5f57;
  --err-soft: rgba(255, 95, 87, .15);
}

:where(html[data-bm-page="refersAnt"]) body{
  background: linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-2) 100%) !important;
  color: var(--ink) !important;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

:where(html[data-bm-page="refersAnt"]) .affiliate-panel,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel *{
  box-sizing:border-box;
}

:where(html[data-bm-page="refersAnt"]) .affiliate-panel{
  min-height:100vh;
  color:var(--ink);
  background:transparent;
  padding-bottom:96px;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .section{ background:transparent; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .container-fluid{ max-width:1600px; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .title-wrapper.pt-30{ padding-top:24px; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel a{ transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel h1,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel h2,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel h3,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel h4,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel h5,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel h6{ color:var(--ink); letter-spacing:-.025em; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel p{ color:var(--muted); }

/* HERO SUPERIOR */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:22px;
  align-items:stretch;
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(148,163,184,.18);
  background:
    linear-gradient(135deg, rgba(82,103,255,.11), rgba(56,189,248,.035) 46%, rgba(19,27,46,.96) 100%),
    rgba(19,27,46,.96);
  box-shadow: var(--card-shadow);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-hero::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-140px;
  top:-160px;
  background:radial-gradient(circle, rgba(82,103,255,.16), transparent 70%);
  pointer-events:none;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-hero::after{
  content:"";
  position:absolute;
  inset:auto 28px 0 28px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  pointer-events:none;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-content,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-kpis{ position:relative; z-index:1; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  margin-bottom:12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#dbeafe;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-hero h2{
  margin:0;
  font-size:clamp(2rem, 3.4vw, 3.55rem);
  line-height:.98;
  font-weight:900;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-hero p{
  max-width:780px;
  margin:14px 0 0;
  font-size:1rem;
  line-height:1.65;
  color:#c7d2fe;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-kpis{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  align-content:center;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-kpi{
  min-height:100px;
  padding:17px;
  border-radius:20px;
  background:rgba(8,13,25,.38);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-kpi strong{
  display:block;
  color:#fff;
  font-size:1.45rem;
  line-height:1;
  margin-bottom:8px;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-kpi span{
  display:block;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}

/* CARDS */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .card-style{
  position:relative;
  overflow:hidden;
  color:var(--muted);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--card-br);
  box-shadow:var(--card-shadow);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .card-style::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events:none;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .card-style:hover{
  border-color:rgba(148,163,184,.24);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .hr-soft{ border-top:1px solid var(--border); margin:1rem 0; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .helper{ color:var(--muted); font-size:.92rem; line-height:1.55; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .helper strong{ color:#d9e5ff; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel small,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .small{ color:var(--muted-2); }

/* BOTONES */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:42px;
  padding:.68rem 1rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:800;
  font-size:.9rem;
  text-decoration:none;
  cursor:pointer;
  line-height:1.1;
  white-space:nowrap;
  box-shadow:none;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn.bm-primary{
  color:#fff;
  border-color:rgba(255,255,255,.10);
  background:linear-gradient(135deg, var(--accent), #4254e8 60%, var(--accent-2));
  box-shadow:0 14px 28px rgba(82,103,255,.24);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn.bm-primary:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(82,103,255,.32);
  filter:saturate(1.08);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn.bm-secondary{
  color:#e5ecff;
  background:linear-gradient(180deg, rgba(148,163,184,.18), rgba(148,163,184,.10));
  border-color:rgba(148,163,184,.22);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn.bm-secondary:hover{
  color:#fff;
  background:linear-gradient(180deg, rgba(148,163,184,.28), rgba(148,163,184,.16));
  transform:translateY(-1px);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn.bm-outline{
  color:#dbe4ff;
  background:rgba(255,255,255,.035);
  border-color:rgba(148,163,184,.22);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn.bm-outline:hover{ background:rgba(255,255,255,.07); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn:disabled{
  opacity:.52;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn-sm{ min-height:36px; padding:.5rem .78rem; font-size:.82rem; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel [data-bs-toggle="collapse"] .lni-chevron-down{ transition: transform .2s ease; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel [data-bs-toggle="collapse"][aria-expanded="true"] .lni-chevron-down{ transform:rotate(180deg); }

/* FORMULARIOS */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-label{ color:#dbe4ff; font-weight:750; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-select-sm,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-control{
  min-height:42px;
  background:rgba(8,13,25,.64);
  border:1px solid rgba(148,163,184,.19);
  border-radius:14px;
  color:var(--ink);
  font-size:.92rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-select-sm{ padding:.55rem 2.15rem .55rem .8rem; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-control{ padding:.64rem .84rem; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-control:focus,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-select-sm:focus{
  color:#fff;
  background:rgba(8,13,25,.82);
  border-color:rgba(82,103,255,.75);
  box-shadow:0 0 0 4px rgba(82,103,255,.14);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-control::placeholder{ color:#71809d; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel input[readonly]{ cursor:text; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-check-input{
  background-color:rgba(8,13,25,.75);
  border-color:rgba(148,163,184,.35);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-check-input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .form-check-label{ color:var(--muted); }

/* ALERTAS */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .alert{
  color:#dbe4ff;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(8,13,25,.58);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .alert-info{ background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.24); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .alert-success{ background:var(--ok-soft); border-color:rgba(57,182,111,.30); color:#dcfce7; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .alert-danger{ background:var(--err-soft); border-color:rgba(255,95,87,.28); color:#fee2e2; }

/* CUPONES */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-card{ padding:22px !important; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:16px;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-header h5{ font-size:1.06rem; font-weight:850; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-hint{ color:var(--muted); font-size:.9rem; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-tabs a{
  display:inline-flex;
  align-items:center;
  gap:.46rem;
  min-height:42px;
  padding:.52rem .94rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(8,13,25,.34);
  color:#aab8d5;
  font-weight:850;
  font-size:.92rem;
  text-decoration:none;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-tabs a:hover{
  color:#fff;
  transform:translateY(-1px);
  background:rgba(82,103,255,.13);
  border-color:rgba(82,103,255,.34);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-tabs a.active{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), #4a5cf1 60%, var(--accent-2));
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 25px rgba(82,103,255,.25);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-tabs .count{
  min-width:26px;
  text-align:center;
  padding:.09rem .48rem;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.16);
  font-size:.78rem;
  font-weight:900;
}

/* LINK + PAGOS */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .referral-payment-card{ padding:24px !important; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .referral-payment-card h5{ font-weight:900; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel #refLink,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel #diaryLink{
  font-weight:720;
  letter-spacing:.01em;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .referral-payment-card .border.rounded-3,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel #propFirmsPanel .border.rounded-3,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel #usersTrackerPanel .card-style{
  border-color:rgba(148,163,184,.18) !important;
  background:rgba(8,13,25,.48) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .referral-payment-card ul{ padding-left:1.08rem; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .referral-payment-card li{ margin:.15rem 0; }

/* NUEVO ENLACE DE AFILIADO */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-share-intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:18px;
  border-radius:22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(82,103,255,.22), transparent 35%),
    linear-gradient(135deg, rgba(82,103,255,.13), rgba(56,189,248,.055)),
    rgba(8,13,25,.46);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-bottom:.45rem;
  padding:.34rem .62rem;
  border-radius:999px;
  color:#dbeafe;
  background:rgba(82,103,255,.18);
  border:1px solid rgba(147,197,253,.20);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-coupon-pill{
  flex:0 0 auto;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:.58rem .82rem;
  border-radius:999px;
  color:#07111f;
  background:linear-gradient(135deg, #67e8f9, #a5b4fc);
  font-size:.86rem;
  font-weight:950;
  letter-spacing:.04em;
  box-shadow:0 12px 24px rgba(56,189,248,.16);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-methods-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.014)),
    rgba(8,13,25,.50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-card:hover{
  border-color:rgba(148,163,184,.30);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-card:nth-child(1){
  background:
    linear-gradient(180deg, rgba(82,103,255,.105), rgba(82,103,255,.025)),
    rgba(8,13,25,.52);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-card:nth-child(2){
  background:
    linear-gradient(180deg, rgba(56,189,248,.090), rgba(56,189,248,.020)),
    rgba(8,13,25,.52);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.85rem;
  margin-bottom:.85rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-title{
  min-width:0;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-title h6{
  margin:0 0 .32rem;
  color:#ffffff;
  font-size:1rem;
  font-weight:930;
  letter-spacing:-.02em;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-title p{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.48;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:.28rem .62rem;
  border-radius:999px;
  color:#dbeafe;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  font-size:.72rem;
  font-weight:900;
  white-space:nowrap;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-link{
  display:block;
  margin:.2rem 0 .75rem;
  padding:.68rem .78rem;
  border-radius:15px;
  color:#8ee8ff;
  background:rgba(3,7,18,.48);
  border:1px solid rgba(148,163,184,.16);
  font-size:.84rem;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-list{
  margin:0 0 1rem;
  padding-left:1.05rem;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.52;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-card .share-link-actions{
  margin-top:auto;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-box{
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(8,13,25,.50);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-primary{
  border-color:rgba(148,163,184,.20);
  background:rgba(8,13,25,.50);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  margin-bottom:.75rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-meta span{
  color:#dbe4ff;
  font-size:.92rem;
  font-weight:900;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-meta strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8ee8ff;
  font-size:.84rem;
  font-weight:850;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:.55rem;
  align-items:center;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-actions .form-control,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .classic-link-row .form-control{
  min-width:0;
  width:100%;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-advantages-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-advantage-card{
  padding:15px;
  border-radius:20px;
  background:rgba(8,13,25,.42);
  border:1px solid rgba(148,163,184,.17);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-advantage-card.featured{
  background:rgba(8,13,25,.42);
  border-color:rgba(148,163,184,.17);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-advantage-top{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:.55rem;
  color:#f8fafc;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-advantage-top strong{
  font-size:.95rem;
  font-weight:900;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent-3);
  box-shadow:0 0 0 5px rgba(56,189,248,.13);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-dot.muted{
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(82,103,255,.13);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-advantage-card ul{
  margin:0;
  padding-left:1.08rem;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.52;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-advantage-card p{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.52;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .classic-link-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.5rem;
  align-items:center;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-tip{
  padding:12px 14px;
  border-radius:18px;
  color:#d9e5ff;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.20);
  font-size:.91rem;
  line-height:1.5;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-tip strong{ color:#ffffff; }


/* PERÍODOS Y KPIS */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .summary-performance-card{ padding:24px !important; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .summary-performance-card > .d-flex:first-child{ margin-bottom:12px; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .period-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  padding:4px;
  border-radius:999px;
  background:rgba(8,13,25,.42);
  border:1px solid rgba(148,163,184,.14);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .period-tabs a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.37rem .86rem;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);
  font-weight:850;
  font-size:.85rem;
  text-decoration:none;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .period-tabs a:hover{ color:#fff; background:rgba(255,255,255,.06); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .period-tabs a.active{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), #4254e8);
  box-shadow:0 8px 18px rgba(82,103,255,.22);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .kpi-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin:.85rem 0 1.15rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .kpi{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height:40px;
  background:rgba(8,13,25,.44);
  border:1px solid rgba(148,163,184,.16);
  border-radius:999px;
  padding:.45rem .85rem;
  font-weight:780;
  font-size:.9rem;
  color:var(--muted);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .kpi span:not(.dot){ color:#b9c7e5; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .kpi .dot{
  width:.58rem;
  height:.58rem;
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .kpi .d1{ background:#6d5dfc; box-shadow:0 0 14px rgba(109,93,252,.85); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .kpi .d2{ background:var(--ok); box-shadow:0 0 14px rgba(57,182,111,.85); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .kpi .d3{ background:var(--accent-3); box-shadow:0 0 14px rgba(56,189,248,.80); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .kpi .d4{ background:var(--err); box-shadow:0 0 14px rgba(255,95,87,.80); }

:where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(200px, 1fr));
  gap:14px;
  margin-top:14px;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-card{
  position:relative;
  overflow:hidden;
  min-height:118px;
  padding:20px 20px 18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), rgba(8,13,25,.38);
  border:1px solid rgba(148,163,184,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-card::after{
  content:"";
  position:absolute;
  right:-48px;
  top:-48px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(82,103,255,.13);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-card:nth-child(2)::after{ background:rgba(57,182,111,.13); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-card:nth-child(3)::after{ background:rgba(56,189,248,.13); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-card:nth-child(4)::after{ background:rgba(245,158,11,.13); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-card h6{
  margin:0 0 10px;
  color:var(--muted);
  font-weight:850;
  font-size:.9rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-card .value{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:clamp(1.55rem,2.2vw,2.2rem);
  font-weight:950;
  letter-spacing:-.04em;
  line-height:1;
}

/* BADGES */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .badge{
  display:inline-flex;
  align-items:center;
  gap:.36rem;
  max-width:100%;
  padding:.32rem .66rem;
  border-radius:999px;
  font-weight:850;
  border:1px solid rgba(148,163,184,.18);
  font-size:.78rem;
  line-height:1.1;
  white-space:normal;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .badge.gray{
  color:#b9c7e5;
  background:rgba(148,163,184,.10);
  border-color:rgba(148,163,184,.18);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .badge.ok{
  color:#74e6a0;
  background:rgba(57,182,111,.14);
  border-color:rgba(57,182,111,.26);
}

/* DIARIO / RECOMPENSA */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:24px;
  background:
    linear-gradient(135deg, rgba(82,103,255,.12), rgba(56,189,248,.04) 38%, rgba(8,13,25,.42)),
    rgba(19,27,46,.92);
  border:1px solid rgba(148,163,184,.19);
  box-shadow:0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-card::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-100px;
  top:-100px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(82,103,255,.22), transparent 70%);
  pointer-events:none;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-header{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.2rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-icon{
  width:56px;
  height:56px;
  flex:0 0 auto;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(82,103,255,.26), rgba(56,189,248,.13));
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.85rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-title h5{
  margin:0 0 6px;
  font-weight:930;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-subtitle{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.62;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:.36rem .92rem;
  border-radius:999px;
  font-size:.83rem;
  font-weight:900;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-tag-success{
  background:rgba(57,182,111,.15);
  color:#74e6a0;
  border:1px solid rgba(57,182,111,.30);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-tag-pending{
  background:rgba(245,158,11,.14);
  color:#fbbf24;
  border:1px solid rgba(245,158,11,.28);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .68rem;
  border-radius:999px;
  background:rgba(82,103,255,.13);
  border:1px solid rgba(82,103,255,.18);
  font-size:.75rem;
  font-weight:900;
  color:#c7d2fe;
  margin-bottom:.45rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-columns{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, .92fr);
  gap:1.35rem;
  align-items:stretch;
  margin-top:1.15rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-main{ min-width:0; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-benefits{
  background:rgba(8,13,25,.46);
  border-radius:22px;
  padding:20px 22px;
  border:1px solid rgba(148,163,184,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-benefits h6{
  margin:0 0 .55rem;
  font-weight:900;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-benefits-group-title{
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.085em;
  color:#93a4c6;
  margin-bottom:.2rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-benefits-list{
  margin:0 0 .58rem;
  padding-left:0;
  list-style:none;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-benefits-list li{
  margin-bottom:.42rem;
  color:#e8eefc;
  display:flex;
  gap:.5rem;
  align-items:flex-start;
  line-height:1.45;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-benefits-list li span.bullet{
  color:var(--accent-3);
  line-height:1.4;
  font-weight:900;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-progress-wrap{ margin-top:.85rem; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-progress-bar{
  position:relative;
  width:100%;
  height:11px;
  border-radius:999px;
  background:rgba(148,163,184,.14);
  overflow:hidden;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-progress-bar span{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-3), var(--ok));
  box-shadow:0 0 18px rgba(56,189,248,.34);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-progress-label{
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  margin-top:.55rem;
  color:var(--muted);
  font-size:.85rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-mini-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.75rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-mini-kpi{
  padding:.42rem .7rem;
  border-radius:999px;
  color:#c7d2fe;
  background:rgba(82,103,255,.10);
  border:1px solid rgba(82,103,255,.16);
  font-size:.82rem;
  font-weight:750;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-steps{
  display:grid;
  gap:.72rem;
  margin-top:.15rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-step{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:flex-start;
  gap:.66rem;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-step-number{
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(82,103,255,.20);
  color:#dbe4ff;
  font-size:.82rem;
  font-weight:950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px rgba(82,103,255,.20) inset;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-step-title{
  color:#f8fafc;
  font-size:.94rem;
  font-weight:900;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-step-text{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.48;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .speech-box{
  background:rgba(8,13,25,.62);
  border:1px solid rgba(57,182,111,.25);
  border-left:4px solid var(--ok);
  padding:16px;
  border-radius:18px;
  color:#e6f2ff;
  font-size:.92rem;
  line-height:1.65;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .speech-box strong{ color:#fbbf24; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .speech-box p{ margin:0 0 10px 0; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .speech-box p:last-child{ margin:0; }

/* TABLAS */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .tools-bar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), rgba(8,13,25,.34);
  border-top-left-radius:var(--card-br);
  border-top-right-radius:var(--card-br);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .tools-bar h5{ font-weight:930; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions form{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions .form-control{ min-width:260px; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-responsive{
  width:100%;
  overflow-x:auto;
  scrollbar-color:rgba(148,163,184,.35) transparent;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:var(--muted);
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(10,16,32,.94);
  color:#eef4ff;
  border-bottom:1px solid rgba(148,163,184,.14);
  padding:16px 18px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.075em;
  font-weight:950;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern tbody td{
  vertical-align:top;
  padding:18px;
  border-bottom:1px solid rgba(148,163,184,.12);
  color:#b8c7e5;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern tbody tr{
  transition:background .16s ease, transform .16s ease;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern tbody tr:hover{ background:rgba(82,103,255,.055); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern tbody tr:last-child td{ border-bottom:none; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern .col-id{ white-space:nowrap; width:132px; color:#f8fafc; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern .col-store{ white-space:nowrap; width:110px; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern .col-client{ min-width:220px; color:#f8fafc; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern .col-products{ min-width:300px; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern .col-products ul{ padding-left:1rem; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern .col-products li{ margin-bottom:.35rem; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern .col-amount{ white-space:nowrap; width:160px; color:#fff; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern .col-comm{ white-space:nowrap; width:180px; color:#74e6a0; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern .col-status{ white-space:nowrap; width:160px; }

/* PAGINACIÓN */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .pagination{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding:14px 22px 20px;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .pagination a,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .pagination span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:.38rem .68rem;
  border:1px solid rgba(148,163,184,.16);
  border-radius:12px;
  background:rgba(8,13,25,.42);
  color:var(--muted);
  text-decoration:none;
  font-size:.83rem;
  font-weight:750;
}
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .pagination .active,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .pagination a:hover{
  color:#fff;
  border-color:rgba(82,103,255,.32);
  background:rgba(82,103,255,.16);
}

/* FORMULARIO DE SOLICITUD DE AFILIADO */
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .card-style h2{ font-weight:950; }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .card-style ul{ color:var(--muted); }
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .card-style li strong{ color:#e8eefc; }

/* RESPONSIVE */
@media (max-width: 1200px){
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-hero{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-kpis{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-columns{ grid-template-columns:1fr; }
}
@media (max-width: 992px){
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .tools-bar{ align-items:flex-start; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions form{ width:100%; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions .form-control,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions select,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions button{ flex:1 1 160px; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-responsive{ overflow:visible; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern thead{ display:none; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern tbody tr{
    display:block;
    margin:14px 14px;
    padding:12px 14px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:18px;
    background:rgba(8,13,25,.42);
  }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern tbody td{
    display:grid;
    grid-template-columns:minmax(110px, .42fr) minmax(0,1fr);
    gap:12px;
    border-bottom:1px solid rgba(148,163,184,.10);
    padding:11px 0;
  }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern tbody td:last-child{ border-bottom:none; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern tbody td::before{
    content:attr(data-label);
    color:#8392b0;
    font-weight:900;
    text-transform:uppercase;
    font-size:.72rem;
    letter-spacing:.06em;
  }
}
@media (max-width: 768px){
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-hero{ padding:22px; border-radius:24px; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-header{ align-items:flex-start; flex-direction:column; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    margin-inline:-2px;
  }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-tabs a{ flex:0 0 auto; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .stat-grid{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .period-tabs{ width:100%; justify-content:space-between; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .period-tabs a{ flex:1 1 0; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-card{ padding:18px; border-radius:22px; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-header > div:last-child{ width:100%; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-tag{ width:100%; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-share-intro{ flex-direction:column; padding:16px; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-coupon-pill{ max-width:100%; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-methods-grid{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-head{ align-items:flex-start; flex-direction:column; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-method-link{ white-space:normal; word-break:break-word; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-meta{ align-items:flex-start; flex-direction:column; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-meta strong{ max-width:100%; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-actions{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-link-actions .bm-btn{ width:100%; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .share-advantages-grid{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .classic-link-row{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .classic-link-row .bm-btn{ width:100%; }
}
@media (max-width: 576px){
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .container-fluid{ padding-left:12px; padding-right:12px; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-hero h2{ font-size:2.2rem; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .hero-kpis{ grid-template-columns:1fr; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .card-style{ border-radius:18px; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .coupon-card,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .referral-payment-card,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .summary-performance-card{ padding:18px !important; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .tools-bar{ padding:16px; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions form{ display:grid; grid-template-columns:1fr; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions .form-control,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions select,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-actions button{ width:100%; min-width:0 !important; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .table-modern tbody td{ grid-template-columns:1fr; gap:3px; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-progress-label{ flex-direction:column; }
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .bm-btn{ width:auto; white-space:normal; }
}
@media (prefers-reduced-motion: no-preference){
  :where(html[data-bm-page="refersAnt"]) .affiliate-panel .card-style,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .affiliate-hero,
:where(html[data-bm-page="refersAnt"]) .affiliate-panel .diary-goal-card{
    animation:bm-69d171598a-bmFadeUp .38s ease both;
  }
  @keyframes bm-69d171598a-bmFadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }
}

/* ==================== VISTA: html[data-bm-page="signin"] ==================== */
/* Origen: signin.php:327 */
:where(html[data-bm-page="signin"]):root{
    --bm-page-bg: #0f172a;
    --bm-page-bg-2: #111827;
    --bm-surface: #1e293b;
    --bm-surface-2: #162032;
    --bm-surface-3: #111827;
    --bm-border: #334155;
    --bm-border-strong: #475569;
    --bm-text: #f8fafc;
    --bm-muted: #94a3b8;
    --bm-muted-2: #64748b;
    --bm-primary: #4f6df5;
    --bm-primary-2: #365cf5;
    --bm-primary-soft: rgba(79,109,245,.16);
    --bm-success: #4ade80;
    --bm-danger: #f87171;
    --bm-warning: #fbbf24;
    --bm-shadow: 0 22px 60px rgba(0,0,0,.34);
    --bm-radius: 24px;
    --bm-radius-md: 16px;
    --bm-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  :where(html[data-bm-page="signin"]) body{
    background:
      radial-gradient(circle at 18% 16%, rgba(79,109,245,.10), transparent 28%),
      radial-gradient(circle at 88% 10%, rgba(34,197,94,.07), transparent 24%),
      linear-gradient(180deg, var(--bm-page-bg) 0%, var(--bm-page-bg-2) 100%) !important;
    color: var(--bm-text) !important;
    font-family: var(--bm-font) !important;
  }

  :where(html[data-bm-page="signin"]) .bm-signin-page{
    min-height: calc(100vh - 30px);
    padding: 30px 0 70px;
    color: var(--bm-text);
  }

  :where(html[data-bm-page="signin"]) .bm-auth-container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-topbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
    margin-bottom:26px;
    padding-bottom:22px;
    border-bottom:1px solid rgba(148,163,184,.18);
  }

  :where(html[data-bm-page="signin"]) .bm-auth-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border:1px solid rgba(79,109,245,.30);
    background:rgba(79,109,245,.10);
    color:#c7d2fe;
    border-radius:999px;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:12px;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-kicker-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--bm-success);
    box-shadow:0 0 0 4px rgba(74,222,128,.12);
  }

  :where(html[data-bm-page="signin"]) .bm-auth-title h2{
    margin:0;
    color:var(--bm-text);
    font-size:2.05rem;
    line-height:1.08;
    font-weight:900;
    letter-spacing:-.045em;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-title p{
    margin:10px 0 0;
    color:var(--bm-muted);
    font-size:1rem;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-breadcrumb{
    color:var(--bm-muted);
    font-size:.92rem;
    white-space:nowrap;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-breadcrumb a{
    color:var(--bm-muted);
    text-decoration:none;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-breadcrumb span{
    color:#c7d2fe;
    font-weight:700;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-shell{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, .98fr) minmax(420px, .82fr);
    background:rgba(30,41,59,.82);
    border:1px solid rgba(148,163,184,.18);
    border-radius:var(--bm-radius);
    box-shadow:var(--bm-shadow);
    overflow:hidden;
    backdrop-filter: blur(12px);
  }

  :where(html[data-bm-page="signin"]) .bm-auth-shell::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 35%, rgba(79,109,245,.05));
  }

  :where(html[data-bm-page="signin"]) .bm-auth-visual{
    position:relative;
    padding:38px;
    min-height:640px;
    background:
      radial-gradient(circle at 25% 25%, rgba(79,109,245,.24), transparent 36%),
      radial-gradient(circle at 82% 68%, rgba(14,165,233,.12), transparent 30%),
      linear-gradient(135deg, #1a2540 0%, #111827 100%);
    border-right:1px solid rgba(148,163,184,.16);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-visual::after{
    content:'';
    position:absolute;
    width:360px;
    height:360px;
    right:-150px;
    bottom:-160px;
    border-radius:50%;
    background:rgba(79,109,245,.14);
    filter:blur(2px);
  }

  :where(html[data-bm-page="signin"]) .bm-visual-header,
:where(html[data-bm-page="signin"]) .bm-visual-footer,
:where(html[data-bm-page="signin"]) .bm-visual-art{
    position:relative;
    z-index:1;
  }

  :where(html[data-bm-page="signin"]) .bm-visual-header h1{
    margin:0;
    font-weight:900;
    letter-spacing:-.045em;
    color:var(--bm-text);
    font-size:2.25rem;
    line-height:1.06;
  }

  :where(html[data-bm-page="signin"]) .bm-visual-header h1 span{
    color:#7c92ff;
  }

  :where(html[data-bm-page="signin"]) .bm-visual-header p{
    margin:13px 0 0;
    color:var(--bm-muted);
    max-width:520px;
    font-size:1rem;
  }

  :where(html[data-bm-page="signin"]) .bm-visual-art{
    margin:20px auto;
    width:min(440px, 88%);
    display:flex;
    align-items:center;
    justify-content:center;
  }

  :where(html[data-bm-page="signin"]) .bm-visual-card{
    width:100%;
    border:1px solid rgba(148,163,184,.20);
    border-radius:28px;
    background:rgba(15,23,42,.48);
    box-shadow:0 22px 60px rgba(0,0,0,.30);
    padding:28px;
  }

  :where(html[data-bm-page="signin"]) .bm-visual-card img{
    display:block;
    width:100%;
    max-height:330px;
    object-fit:contain;
    filter: drop-shadow(0 28px 30px rgba(0,0,0,.35));
  }

  :where(html[data-bm-page="signin"]) .bm-benefit-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    position:relative;
    z-index:1;
  }

  :where(html[data-bm-page="signin"]) .bm-benefit{
    padding:14px;
    border-radius:16px;
    border:1px solid rgba(148,163,184,.16);
    background:rgba(15,23,42,.42);
  }

  :where(html[data-bm-page="signin"]) .bm-benefit strong{
    display:block;
    color:var(--bm-text);
    font-size:.86rem;
    margin-bottom:4px;
  }

  :where(html[data-bm-page="signin"]) .bm-benefit span{
    color:var(--bm-muted);
    font-size:.78rem;
    line-height:1.35;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-panel{
    position:relative;
    z-index:1;
    padding:42px;
    background:rgba(30,41,59,.58);
    display:flex;
    align-items:center;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-card{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }

  :where(html[data-bm-page="signin"]) .bm-form-heading{
    margin-bottom:26px;
  }

  :where(html[data-bm-page="signin"]) .bm-step-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(148,163,184,.22);
    background:rgba(15,23,42,.34);
    color:var(--bm-muted);
    padding:8px 12px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:800;
    margin-bottom:16px;
  }

  :where(html[data-bm-page="signin"]) .bm-step-chip b{
    color:#c7d2fe;
  }

  :where(html[data-bm-page="signin"]) .bm-form-heading h6{
    color:var(--bm-text) !important;
    font-size:1.55rem;
    line-height:1.15;
    font-weight:900;
    letter-spacing:-.035em;
    margin:0 0 10px !important;
  }

  :where(html[data-bm-page="signin"]) .bm-form-heading p,
:where(html[data-bm-page="signin"]) .bm-auth-panel .text-sm,
:where(html[data-bm-page="signin"]) .bm-auth-panel .text-gray{
    color:var(--bm-muted) !important;
  }

  :where(html[data-bm-page="signin"]) .bm-alert{
    border:none;
    border-radius:16px;
    padding:14px 16px;
    margin-bottom:18px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:rgba(248,113,113,.12);
    color:#fecaca;
    border:1px solid rgba(248,113,113,.22);
  }

  :where(html[data-bm-page="signin"]) .bm-alert-success{
    background:rgba(74,222,128,.10);
    color:#bbf7d0;
    border-color:rgba(74,222,128,.22);
  }

  :where(html[data-bm-page="signin"]) .bm-alert-icon{
    width:22px;
    height:22px;
    min-width:22px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    margin-top:1px;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-panel .input-style-1{
    margin-bottom:18px;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-panel .input-style-1 label{
    color:var(--bm-text) !important;
    font-weight:800;
    margin-bottom:9px;
    font-size:.92rem;
  }

  :where(html[data-bm-page="signin"]) .bm-input-wrap{
    position:relative;
  }

  :where(html[data-bm-page="signin"]) .bm-input-icon{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--bm-muted-2);
    display:flex;
    pointer-events:none;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-panel .input-style-1 input{
    height:58px;
    border-radius:14px !important;
    border:1px solid var(--bm-border) !important;
    background:rgba(15,23,42,.54) !important;
    color:var(--bm-text) !important;
    padding:0 16px 0 48px !important;
    font-size:1rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    transition:.18s ease;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-panel .input-style-1 input:focus{
    border-color:var(--bm-primary) !important;
    box-shadow:0 0 0 4px rgba(79,109,245,.16) !important;
    outline:none !important;
    background:rgba(15,23,42,.72) !important;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-panel .input-style-1 input::placeholder{
    color:var(--bm-muted-2) !important;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-btn,
:where(html[data-bm-page="signin"]) .bm-auth-panel .main-btn.primary-btn{
    min-height:56px;
    border-radius:14px !important;
    border:none !important;
    background:linear-gradient(135deg, var(--bm-primary), var(--bm-primary-2)) !important;
    color:#fff !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-weight:900;
    letter-spacing:-.01em;
    box-shadow:0 14px 24px rgba(54,92,245,.24);
    transition:.18s ease;
  }

  :where(html[data-bm-page="signin"]) .bm-auth-btn:hover,
:where(html[data-bm-page="signin"]) .bm-auth-panel .main-btn.primary-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 30px rgba(54,92,245,.30);
    filter:brightness(1.04);
  }

  :where(html[data-bm-page="signin"]) .bm-secondary-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#c7d2fe !important;
    font-weight:800;
    text-decoration:none;
    padding:10px 0;
  }

  :where(html[data-bm-page="signin"]) .bm-secondary-link:hover{
    color:#fff !important;
  }

  :where(html[data-bm-page="signin"]) .bm-verify-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
  }

  :where(html[data-bm-page="signin"]) .bm-resend-box{
    padding:16px;
    border-radius:16px;
    background:rgba(15,23,42,.38);
    border:1px solid rgba(148,163,184,.16);
    text-align:center;
  }

  :where(html[data-bm-page="signin"]) .bm-resend-box small{
    color:var(--bm-muted) !important;
  }

  :where(html[data-bm-page="signin"]) .bm-resend-box .btn-link{
    color:#c7d2fe !important;
    font-weight:800;
    text-decoration:none;
  }

  :where(html[data-bm-page="signin"]) .bm-resend-box .btn-link:disabled{
    color:var(--bm-muted-2) !important;
    opacity:1;
  }

  :where(html[data-bm-page="signin"]) .bm-email-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:100%;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(79,109,245,.12);
    color:#dbeafe;
    border:1px solid rgba(79,109,245,.24);
    font-weight:800;
    font-size:.86rem;
    margin-top:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  :where(html[data-bm-page="signin"]) .bm-process-steps{
    display:flex;
    gap:10px;
    margin-top:20px;
    flex-wrap:wrap;
  }

  :where(html[data-bm-page="signin"]) .bm-process-step{
    flex:1 1 140px;
    padding:12px;
    border-radius:14px;
    background:rgba(15,23,42,.30);
    border:1px solid rgba(148,163,184,.14);
    color:var(--bm-muted);
    font-size:.78rem;
  }

  :where(html[data-bm-page="signin"]) .bm-process-step b{
    display:block;
    color:var(--bm-text);
    font-size:.84rem;
    margin-bottom:3px;
  }

  :where(html[data-bm-page="signin"]) .bm-mobile-art{
    display:none;
    margin:0 0 24px;
    padding:18px;
    border-radius:20px;
    background:rgba(15,23,42,.30);
    border:1px solid rgba(148,163,184,.16);
  }

  :where(html[data-bm-page="signin"]) .bm-mobile-art img{
    display:block;
    width:100%;
    max-height:180px;
    object-fit:contain;
  }

  @media (max-width: 1100px){
    :where(html[data-bm-page="signin"]) .bm-auth-shell{
      grid-template-columns:1fr;
    }
    :where(html[data-bm-page="signin"]) .bm-auth-visual{
      min-height:auto;
      border-right:none;
      border-bottom:1px solid rgba(148,163,184,.16);
    }
    :where(html[data-bm-page="signin"]) .bm-visual-art{
      display:none;
    }
    :where(html[data-bm-page="signin"]) .bm-mobile-art{
      display:block;
    }
  }

  @media (max-width: 768px){
    :where(html[data-bm-page="signin"]) .bm-signin-page{
      padding:20px 0 45px;
    }
    :where(html[data-bm-page="signin"]) .bm-auth-container{
      padding:0 14px;
    }
    :where(html[data-bm-page="signin"]) .bm-auth-topbar{
      align-items:flex-start;
      flex-direction:column;
      margin-bottom:18px;
    }
    :where(html[data-bm-page="signin"]) .bm-auth-title h2{
      font-size:1.75rem;
    }
    :where(html[data-bm-page="signin"]) .bm-auth-breadcrumb{
      white-space:normal;
    }
    :where(html[data-bm-page="signin"]) .bm-auth-visual,
:where(html[data-bm-page="signin"]) .bm-auth-panel{
      padding:24px;
    }
    :where(html[data-bm-page="signin"]) .bm-benefit-grid{
      grid-template-columns:1fr;
    }
    :where(html[data-bm-page="signin"]) .bm-verify-actions{
      flex-direction:column;
      align-items:stretch;
    }
    :where(html[data-bm-page="signin"]) .bm-verify-actions .bm-auth-btn{
      width:100%;
    }
  }

  @media (max-width: 480px){
    :where(html[data-bm-page="signin"]) .bm-auth-shell{
      border-radius:18px;
    }
    :where(html[data-bm-page="signin"]) .bm-auth-visual,
:where(html[data-bm-page="signin"]) .bm-auth-panel{
      padding:20px;
    }
    :where(html[data-bm-page="signin"]) .bm-form-heading h6{
      font-size:1.35rem;
    }
    :where(html[data-bm-page="signin"]) .bm-auth-panel .input-style-1 input{
      height:54px;
    }
  }

/* ==================== VISTA: html[data-bm-page="stepbystep"] ==================== */
/* Origen: stepbystep.php:279 */
/* ==========================================================
       STEPBYSTEP.PHP · MISMO LENGUAJE VISUAL DE INDEX.PHP
       Solo se modifica presentación; la lógica PHP permanece igual.
       ========================================================== */
    :where(html[data-bm-page="stepbystep"]):root{
        --bg-body: #111827;
        --bg-body-2: #0f172a;
        --bg-soft: #151f34;

        --surface-white: rgba(30, 41, 59, .94);
        --surface-white-solid: #1e293b;
        --surface-hover: rgba(51, 65, 85, .82);
        --surface-raised: rgba(36, 48, 71, .95);
        --surface-deep: rgba(15, 23, 42, .78);

        --text-primary: #f8fafc;
        --text-secondary: #a5b4cf;
        --text-light: #7f8da9;

        --brand-primary: #5267ff;
        --brand-primary-hover: #6f82ff;
        --brand-primary-dark: #3147dd;
        --brand-soft: rgba(82, 103, 255, .16);
        --brand-border: rgba(82, 103, 255, .34);

        --success-soft: rgba(57, 182, 111, .16);
        --success-text: #55d989;
        --warning-soft: rgba(245, 158, 11, .16);
        --warning-text: #fbbf24;
        --danger-soft: rgba(255, 95, 87, .16);
        --danger-text: #ff7a70;
        --info-soft: rgba(56, 189, 248, .14);
        --info-text: #67d7ff;

        --border-subtle: rgba(148, 163, 184, .16);
        --border-strong: rgba(148, 163, 184, .28);
        --shadow-card: 0 20px 54px rgba(0, 0, 0, .30), 0 1px 0 rgba(255,255,255,.04) inset;

        --radius-card: 24px;
        --radius-panel: 18px;
        --radius-btn: 14px;

        --font-main: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    :where(html[data-bm-page="stepbystep"]):is(html){
        scroll-behavior: smooth;
    }

    :where(html[data-bm-page="stepbystep"]) body{
        background: linear-gradient(180deg, var(--bg-body) 0%, var(--bg-body-2) 100%) !important;
        font-family: var(--font-main);
        color: var(--text-primary);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
    }

    :where(html[data-bm-page="stepbystep"]) body::before{
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 72%);
        opacity: .18;
        z-index: 0;
    }

    :where(html[data-bm-page="stepbystep"]) a{
        text-decoration: none;
        transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    }

    :where(html[data-bm-page="stepbystep"]) .main-wrapper{
        background: transparent !important;
        position: relative;
        z-index: auto;
    }

    /*
       Este es el punto clave para que stepbystep.php tenga exactamente
       el mismo cuerpo visual que index.php: 1220px máximos y centrado.
    */
    :where(html[data-bm-page="stepbystep"]) .stepbystep-container{
        width: 100%;
        max-width: 1220px;
        margin: 0 auto;
        padding: 30px 22px 112px;
    }

    :where(html[data-bm-page="stepbystep"]) .step-nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 22px;
        min-width: 0;
    }

    :where(html[data-bm-page="stepbystep"]) .step-nav-bottom{
        position: fixed;
        left: 50%;
        bottom: 14px;
        width: min(calc(100% - 44px), 1176px);
        transform: translateX(-50%);
        z-index: 1050;
        margin: 0;
        padding: 10px;
        background: rgba(30, 41, 59, .94);
        border: 1px solid var(--border-subtle);
        border-radius: 16px;
        box-shadow: 0 18px 46px rgba(0, 0, 0, .34), 0 1px 0 rgba(255,255,255,.05) inset;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    :where(html[data-bm-page="stepbystep"]) .step-nav-bottom .main-btn.primary-btn{
        min-height: 46px;
    }

    :where(html[data-bm-page="stepbystep"]) .step-nav-spacer{
        flex: 1 1 auto;
        min-width: 0;
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card,
:where(html[data-bm-page="stepbystep"]) .card-style{
        width: 100%;
        min-width: 0;
        background: rgba(15, 23, 42, .30);
        border: 1px solid var(--border-subtle);
        border-radius: 18px;
        color: var(--text-primary);
        padding: 18px;
        box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card{
        overflow: hidden;
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card > :first-child{
        margin-top: 0;
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card > :last-child{
        margin-bottom: 0;
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card img,
:where(html[data-bm-page="stepbystep"]) .step-content-card video,
:where(html[data-bm-page="stepbystep"]) .step-content-card iframe,
:where(html[data-bm-page="stepbystep"]) .step-content-card canvas{
        max-width: 100%;
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card pre{
        max-width: 100%;
        overflow-x: auto;
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card h1,
:where(html[data-bm-page="stepbystep"]) .step-content-card h2,
:where(html[data-bm-page="stepbystep"]) .step-content-card h3,
:where(html[data-bm-page="stepbystep"]) .step-content-card h4,
:where(html[data-bm-page="stepbystep"]) .step-content-card h5,
:where(html[data-bm-page="stepbystep"]) .step-content-card h6{
        color: var(--text-primary);
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card p,
:where(html[data-bm-page="stepbystep"]) .step-content-card li,
:where(html[data-bm-page="stepbystep"]) .step-content-card label,
:where(html[data-bm-page="stepbystep"]) .step-content-card .text-muted{
        color: var(--text-secondary);
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card strong,
:where(html[data-bm-page="stepbystep"]) .step-content-card b{
        color: var(--text-primary);
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card hr{
        border-color: var(--border-subtle);
        opacity: 1;
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card .form-control,
:where(html[data-bm-page="stepbystep"]) .step-content-card .form-select,
:where(html[data-bm-page="stepbystep"]) .step-content-card input[type="text"],
:where(html[data-bm-page="stepbystep"]) .step-content-card input[type="number"],
:where(html[data-bm-page="stepbystep"]) .step-content-card input[type="email"],
:where(html[data-bm-page="stepbystep"]) .step-content-card input[type="password"],
:where(html[data-bm-page="stepbystep"]) .step-content-card textarea,
:where(html[data-bm-page="stepbystep"]) .step-content-card select{
        background: rgba(30, 41, 59, .92);
        border: 1px solid var(--border-subtle);
        color: var(--text-primary);
        border-radius: 12px;
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card .form-control:focus,
:where(html[data-bm-page="stepbystep"]) .step-content-card .form-select:focus,
:where(html[data-bm-page="stepbystep"]) .step-content-card input:focus,
:where(html[data-bm-page="stepbystep"]) .step-content-card textarea:focus,
:where(html[data-bm-page="stepbystep"]) .step-content-card select:focus{
        border-color: var(--brand-border);
        box-shadow: 0 0 0 4px rgba(82, 103, 255, .12);
        outline: none;
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card table{
        color: var(--text-secondary);
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card table th{
        color: var(--text-primary);
    }

    :where(html[data-bm-page="stepbystep"]) .step-content-card .table > :not(caption) > * > *{
        background-color: transparent;
        border-color: var(--border-subtle);
        color: inherit;
    }

    :where(html[data-bm-page="stepbystep"]) .alert{
        border-radius: 14px;
        border: 1px solid var(--border-subtle);
        padding: 14px 16px;
    }

    :where(html[data-bm-page="stepbystep"]) .alert-warning{
        background: var(--warning-soft) !important;
        color: var(--warning-text) !important;
        border-color: rgba(245, 158, 11, .24) !important;
    }

    :where(html[data-bm-page="stepbystep"]) .alert-light{
        background: rgba(30, 41, 59, .72) !important;
        color: var(--text-secondary) !important;
        border-color: var(--border-subtle) !important;
    }

    :where(html[data-bm-page="stepbystep"]) .alert-success{
        background: var(--success-soft) !important;
        color: var(--success-text) !important;
        border-color: rgba(57, 182, 111, .24) !important;
    }

    :where(html[data-bm-page="stepbystep"]) .alert-danger{
        background: var(--danger-soft) !important;
        color: var(--danger-text) !important;
        border-color: rgba(255, 95, 87, .24) !important;
    }

    :where(html[data-bm-page="stepbystep"]) .alert-info{
        background: var(--info-soft) !important;
        color: var(--info-text) !important;
        border-color: rgba(56, 189, 248, .24) !important;
    }

    :where(html[data-bm-page="stepbystep"]) .alert-warning a,
:where(html[data-bm-page="stepbystep"]) .alert-light a,
:where(html[data-bm-page="stepbystep"]) .alert-success a,
:where(html[data-bm-page="stepbystep"]) .alert-danger a,
:where(html[data-bm-page="stepbystep"]) .alert-info a{
        color: #fff !important;
        text-decoration: underline;
    }

    :where(html[data-bm-page="stepbystep"]) .main-btn{
        border-radius: 12px;
        font-weight: 850;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }

    :where(html[data-bm-page="stepbystep"]) .main-btn:hover{
        transform: translateY(-1px);
    }

    :where(html[data-bm-page="stepbystep"]) .main-btn.light-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 18px;
        border-radius: 12px;
        background: rgba(248,250,252,.92);
        color: #0f172a;
        font-weight: 850;
        border: 0;
        box-shadow: 0 8px 20px rgba(0,0,0,.14);
    }

    :where(html[data-bm-page="stepbystep"]) .main-btn.light-btn:hover{
        background: #fff;
        color: #0f172a;
        box-shadow: 0 10px 24px rgba(0,0,0,.20);
    }

    :where(html[data-bm-page="stepbystep"]) .main-btn.primary-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 18px;
        border: 1px solid rgba(130, 148, 255, .30);
        border-radius: 12px;
        background: linear-gradient(180deg, var(--brand-primary-hover), var(--brand-primary));
        color: #fff;
        font-weight: 850;
        box-shadow: 0 12px 26px rgba(49, 71, 221, .24), 0 1px 0 rgba(255,255,255,.15) inset;
        text-align: center;
    }

    :where(html[data-bm-page="stepbystep"]) .main-btn.primary-btn:hover{
        background: linear-gradient(180deg, #7b8cff, #5a6fff);
        color: #fff;
        box-shadow: 0 15px 30px rgba(49, 71, 221, .32), 0 1px 0 rgba(255,255,255,.16) inset;
    }

    @media (max-width: 820px){
        :where(html[data-bm-page="stepbystep"]) .stepbystep-container{
            padding: 24px 14px 108px;
        }

        :where(html[data-bm-page="stepbystep"]) .step-content-card,
:where(html[data-bm-page="stepbystep"]) .card-style{
            padding: 16px;
        }
    }

    @media (max-width: 640px){
        :where(html[data-bm-page="stepbystep"]) .step-nav{
            align-items: stretch;
            flex-direction: column;
        }

        :where(html[data-bm-page="stepbystep"]) .step-nav .main-btn{
            width: 100%;
        }

        :where(html[data-bm-page="stepbystep"]) .step-nav-spacer{
            display: none;
        }

        :where(html[data-bm-page="stepbystep"]) .step-nav-bottom{
            left: 12px;
            right: 12px;
            bottom: 10px;
            width: auto;
            transform: none;
            padding: 8px;
        }
    }

/* ==================== VISTA: html[data-bm-page="upload_executions"] ==================== */
/* Origen: upload_executions.php:783 */
:where(html[data-bm-page="upload_executions"]) .tooltip-wrapper{ position: relative; display: inline-block; }
:where(html[data-bm-page="upload_executions"]) .tooltip-custom{ position: absolute; top: 50%; right: 100%; transform: translate(-.5rem,-50%); background:#343a40; color:#fff; padding:.5rem .75rem; border-radius:.5rem; white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:1200; font-size:.85rem; }
:where(html[data-bm-page="upload_executions"]) .tooltip-custom::after{ content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); border-width:.4rem; border-style:solid; border-color:transparent transparent transparent #343a40; }
:where(html[data-bm-page="upload_executions"]) .tooltip-wrapper:hover .tooltip-custom{ opacity:1; visibility:visible; }
:where(html[data-bm-page="upload_executions"]) .btn-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.5rem; }
:where(html[data-bm-page="upload_executions"]) .upload-card{ border:1px solid #e9ecef; border-radius:12px; padding:18px; background:#fff; }
:where(html[data-bm-page="upload_executions"]) .upload-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
:where(html[data-bm-page="upload_executions"]) .pill{ background:#eef2ff; color:#3949ab; border:1px solid #c5cae9; padding:4px 8px; border-radius:999px; font-weight:700; font-size:.78rem; }
:where(html[data-bm-page="upload_executions"]) .dropzone{ border:2px dashed #cbd5e1; border-radius:12px; padding:24px; text-align:center; transition:.2s border-color,.2s background; background:#f8fafc; cursor:pointer; }
:where(html[data-bm-page="upload_executions"]) .dropzone.dragover{ background:#eef2ff; border-color:#94a3b8; }
:where(html[data-bm-page="upload_executions"]) .small-muted{ color:#6b7280; font-size:.9rem; }
:where(html[data-bm-page="upload_executions"]) .help-list li{ margin-bottom:.25rem; }
:where(html[data-bm-page="upload_executions"]) .preview-table thead th{ position:sticky; top:0; background:#fff; }
:where(html[data-bm-page="upload_executions"]) .badge-soft{ display:inline-block; padding:.2rem .5rem; border-radius:.4rem; border:1px solid #e9ecef; font-weight:700; font-size:.78rem; }
:where(html[data-bm-page="upload_executions"]) .badge-soft.success{ background:#e6f9ed; color:#0f5132; border-color:#bcdcc8; }
:where(html[data-bm-page="upload_executions"]) .badge-soft.danger{ background:#fdeceb; color:#842029; border-color:#f5c2c7; }
:where(html[data-bm-page="upload_executions"]) .badge-soft.info{ background:#e7f1ff; color:#084298; border-color:#b6d4fe; }
:where(html[data-bm-page="upload_executions"]) .upload-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; z-index:5000; }
:where(html[data-bm-page="upload_executions"]) .upload-overlay.show{ display:flex; }
:where(html[data-bm-page="upload_executions"]) .overlay-card{ width:min(560px,92vw); background:#fff; border-radius:14px; box-shadow:0 20px 40px rgba(0,0,0,.18); padding:20px 22px; }
:where(html[data-bm-page="upload_executions"]) .overlay-title{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
:where(html[data-bm-page="upload_executions"]) .spinner{ width:22px; height:22px; border:3px solid #e5e7eb; border-top-color:#3b82f6; border-radius:50%; animation:bm-fc7197556b-spin 1s linear infinite; }
@keyframes bm-fc7197556b-spin{ to{ transform:rotate(360deg);} }
:where(html[data-bm-page="upload_executions"]) .progress{ width:100%; height:10px; background:#e9ecef; border-radius:999px; overflow:hidden; margin-top:8px; }
:where(html[data-bm-page="upload_executions"]) .progress-bar{ width:0%; height:100%; background:#3b82f6; transition:width .15s ease; }
:where(html[data-bm-page="upload_executions"]) .progress-stats{ display:flex; justify-content:space-between; align-items:center; font-size:.9rem; color:#374151; margin-top:6px; }
:where(html[data-bm-page="upload_executions"]) .file-meta{ font-size:.9rem; color:#6b7280; }
:where(html[data-bm-page="upload_executions"]) .hidden{ display:none!important; }
:where(html[data-bm-page="upload_executions"]) #fileInfo strong{ color:#111827; }

/* ================ 4. FLUJOS DE PRODUCTO ================== */
/*
 * BM Product Flow
 * Estilo visual compartido por:
 * - mac_binding_view.php
 * - installer_advancedriskreward_es.php
 * - tutorial_advancedriskreward_es.php
 *
 * Ruta del servidor: /panel/assets/css/bm-product-flow-v.css
 */

.bm-mac-binding-view {
    --brand-primary: #5267ff;
    --brand-primary-hover: #6f82ff;
    --text-primary: #f8fafc;
    --text-secondary: #aab4c6;
    --text-light: #7f8da9;
    --surface-deep: #111827;
    --surface-soft: rgba(255,255,255,.018);
    --border-subtle: rgba(148, 163, 184, .18);
    --border-strong: #64748b;
    --nt-text-main: var(--text-primary);
    --nt-text-muted: var(--text-secondary);
    --nt-border: var(--border-subtle);
    color: var(--text-primary);
}

.bm-mac-binding-view [hidden] {
    display: none !important;
}

.bm-mac-binding-view button,
.bm-mac-binding-view input,
.bm-mac-binding-view select,
.bm-mac-binding-view textarea {
    font: inherit;
}

.bm-mac-binding-view button {
    cursor: pointer;
}

.bm-mac-binding-view .text-muted {
    color: var(--text-secondary) !important;
}

.bm-mac-binding-view .small {
    font-size: .875rem;
}

.bm-mac-binding-view .alert {
    position: relative;
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    background: rgba(30, 41, 59, .5);
}

.bm-mac-binding-view .alert-info {
    border-color: rgba(96, 165, 250, .30);
    background: rgba(37, 99, 235, .08);
}

.bm-mac-binding-view .alert-warning {
    border-color: rgba(251, 191, 36, .32);
    background: rgba(120, 74, 5, .13);
}

.bm-mac-binding-view .alert-danger {
    border-color: rgba(248, 113, 113, .34);
    background: rgba(127, 29, 29, .13);
}

.bm-mac-binding-view .alert-success {
    border-color: rgba(74, 222, 128, .30);
    background: rgba(20, 83, 45, .13);
}

.bm-mac-binding-view .nt-btn-lang {
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    outline: none;
}

.bm-mac-binding-view .main-btn,
.bm-mac-binding-view .nt-btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .72rem 1rem;
    border: 1px solid rgba(130, 148, 255, .30);
    border-radius: 11px;
    background: linear-gradient(180deg, var(--brand-primary-hover), var(--brand-primary));
    color: #fff !important;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(49, 71, 221, .20), 0 1px 0 rgba(255,255,255,.12) inset;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.bm-mac-binding-view .main-btn:hover,
.bm-mac-binding-view .main-btn:focus-visible,
.bm-mac-binding-view .nt-btn-download:hover,
.bm-mac-binding-view .nt-btn-download:focus-visible {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #7b8cff, #5a6fff);
    box-shadow: 0 13px 26px rgba(49, 71, 221, .28), 0 1px 0 rgba(255,255,255,.14) inset;
}

.bm-mac-binding-view .nt-fade-in {
    animation: bm-product-flow-bmProductFlowFadeIn .24s ease both;
}

@keyframes bm-product-flow-bmProductFlowFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/*
             * Esta vista NO define fondo, tipografía global ni tarjeta propia.
             * Hereda el diseño de stepbystep.php / index.php y solo organiza el
             * contenido en un flujo vertical inequívoco.
             */
            .bm-mac-binding-view {
                width: 100%;
            }

            .bm-mac-binding-view .bm-mac-shell {
                width: 100%;
                max-width: 1240px;
                margin: 0 auto;
            }

            .bm-mac-binding-view #bmProductHeading {
                width: 100%;
                max-width: none;
                margin: 0;
                text-align: left;
            }

            .bm-mac-binding-view .bm-product-layout {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
                align-items: center;
                gap: clamp(16px, 2.5vw, 36px);
                width: 100%;
            }

            .bm-mac-binding-view .bm-product-main,
            .bm-mac-binding-view .bm-product-side {
                min-width: 0;
            }

            .bm-mac-binding-view .bm-product-side {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                text-align: right;
                min-width: 0;
            }

            .bm-mac-binding-view .bm-product-side > p {
                margin: 0;
                max-width: 420px;
            }

            .bm-mac-binding-view .bm-product-context {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: .55rem .8rem;
                margin-bottom: 8px;
            }

            .bm-mac-binding-view .bm-product-action {
                display: inline-flex;
                align-items: center;
                gap: .42rem;
                color: var(--brand-primary, #6b7cff);
                font-size: .76rem;
                font-weight: 800;
                letter-spacing: .075em;
                line-height: 1.2;
                text-transform: uppercase;
            }

            .bm-mac-binding-view .bm-product-action::before {
                content: "";
                width: 7px;
                height: 7px;
                flex: 0 0 7px;
                border-radius: 50%;
                background: currentColor;
                box-shadow: 0 0 0 4px rgba(82, 103, 255, .10);
            }

            .bm-mac-binding-view .bm-product-id {
                color: var(--text-light, #7f8da9);
                font-size: .8rem;
                font-weight: 650;
                letter-spacing: .01em;
            }

            .bm-mac-binding-view .bm-product-name {
                margin: 0 !important;
                color: var(--text-primary, #f8fafc);
                font-size: clamp(1.18rem, 2vw, 1.52rem);
                font-weight: 760;
                line-height: 1.24;
                letter-spacing: -.018em;
                overflow-wrap: anywhere;
            }

            .bm-mac-binding-view #bmProductHeading .text-muted {
                max-width: 760px;
                margin-left: 0;
                margin-right: 0;
            }

            .bm-mac-binding-view .bm-current-device-row {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: .3rem .45rem;
                width: fit-content;
                max-width: 100%;
                padding: .44rem .72rem;
                border-radius: 12px;
                border: 1px solid var(--border-subtle, rgba(148, 163, 184, .18));
                background: rgba(255,255,255,.012);
                font-size: .8rem;
                line-height: 1.3;
                overflow-wrap: anywhere;
            }

            .bm-mac-binding-view .bm-current-device-label {
                color: var(--text-secondary, #94a3b8);
            }

            .bm-mac-binding-view .bm-current-device-value {
                color: var(--text-primary, #f8fafc);
                font-weight: 700;
                min-width: 0;
                overflow-wrap: anywhere;
            }

            .bm-mac-binding-view #bmLanguageChooser {
                width: 100%;
                max-width: none;
                margin: 20px 0 2px;
                padding-top: 18px;
                border-top: 1px solid var(--border-subtle, rgba(148, 163, 184, .18));
                text-align: left;
            }

            .bm-mac-binding-view #bmLanguageChooser .bm-language-layout {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
                align-items: center;
                gap: clamp(18px, 3vw, 42px);
                width: 100%;
            }

            .bm-mac-binding-view #bmLanguageChooser .bm-language-copy,
            .bm-mac-binding-view #bmLanguageChooser .bm-language-actions {
                min-width: 0;
            }

            .bm-mac-binding-view #bmLanguageChooser .bm-language-kicker,
            .bm-mac-binding-view .bm-process-kicker {
                margin: 0 0 6px;
                color: var(--brand-primary, #6b7cff);
                font-size: .71rem;
                font-weight: 800;
                letter-spacing: .085em;
                line-height: 1.2;
                text-transform: uppercase;
            }

            .bm-mac-binding-view #bmLanguageChooser .nt-lang-title {
                margin: 0;
                max-width: 430px;
                color: var(--text-primary, #f8fafc);
                font-size: 1.04rem;
                font-weight: 680;
                line-height: 1.42;
            }

            .bm-mac-binding-view #bmLanguageChooser .bm-language-actions {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                align-items: stretch;
                gap: 14px;
                width: 100%;
            }

            .bm-mac-binding-view #bmLanguageChooser .nt-btn-lang {
                width: 100%;
                min-width: 0;
                min-height: 52px;
                padding: .72rem 1rem;
                border-radius: 12px;
                background: rgba(255,255,255,.012);
                font-size: .95rem;
                font-weight: 700;
                transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
            }

            .bm-mac-binding-view #bmLanguageChooser .nt-btn-lang:hover,
            .bm-mac-binding-view #bmLanguageChooser .nt-btn-lang:focus-visible {
                transform: translateY(-1px);
                border-color: rgba(82, 103, 255, .5);
                background: rgba(82, 103, 255, .045);
                box-shadow: 0 8px 20px rgba(82, 103, 255, .08);
            }

            .bm-mac-binding-view #bmActivationFlow {
                width: 100%;
                max-width: none;
                margin: 20px 0 0;
                padding-top: 18px;
                border-top: 1px solid var(--border-subtle, rgba(148, 163, 184, .18));
            }

            .bm-mac-binding-view .bm-process-heading {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 12px 18px;
                margin-bottom: 14px;
            }

            .bm-mac-binding-view .bm-process-heading__copy {
                min-width: 0;
            }

            .bm-mac-binding-view .bm-process-title {
                margin: 0;
                color: var(--text-primary, #f8fafc);
                font-size: 1.04rem;
                font-weight: 680;
                line-height: 1.3;
            }

            .bm-mac-binding-view .bm-mac-flow {
                width: 100%;
                max-width: none;
                margin: 0;
            }

            .bm-mac-binding-view .bm-mac-step {
                position: relative;
                width: 100%;
                padding: 0 0 24px 56px;
            }

            .bm-mac-binding-view .bm-mac-step > .input-style-1,
            .bm-mac-binding-view .bm-mac-step > .alert,
            .bm-mac-binding-view .bm-mac-step > p {
                width: 100%;
                max-width: none;
            }

            .bm-mac-binding-view .bm-mac-step .input-style-1 input[type="text"] {
                width: 100%;
                max-width: none;
            }

            .bm-mac-binding-view .bm-mac-step:not(:last-child)::before {
                content: "";
                position: absolute;
                left: 15px;
                top: 31px;
                bottom: 0;
                width: 2px;
                background: var(--border-subtle, rgba(148, 163, 184, .22));
            }

            .bm-mac-binding-view .bm-mac-step-number {
                position: absolute;
                left: 0;
                top: 0;
                display: inline-flex;
                width: 32px;
                height: 32px;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background: var(--brand-primary, #5267ff);
                color: #fff;
                font-size: .88rem;
                font-weight: 800;
                line-height: 1;
            }

            .bm-mac-binding-view .nt-btn-back {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: auto !important;
                max-width: 100%;
                min-height: 38px;
                padding: .52rem .78rem;
                white-space: nowrap;
                line-height: 1.1;
                border-radius: 10px;
                border: 1px solid var(--border-subtle, rgba(148, 163, 184, .20));
                background: rgba(255,255,255,.018);
                color: var(--text-secondary, #aab4c6);
                font-size: .84rem;
                font-weight: 700;
                transition: border-color .18s ease, background .18s ease, color .18s ease;
            }

            .bm-mac-binding-view .nt-btn-back:hover,
            .bm-mac-binding-view .nt-btn-back:focus-visible {
                border-color: rgba(82, 103, 255, .42);
                background: rgba(82, 103, 255, .06);
                color: var(--text-primary, #f8fafc);
            }

            .bm-mac-binding-view .bm-flow-topbar {
                display: block;
                padding: 14px 16px;
                border-radius: 12px;
            }

            .bm-mac-binding-view .bm-flow-topbar__copy {
                min-width: 0;
                flex: 1 1 auto;
            }

            .bm-mac-binding-view .bm-process-heading .nt-btn-back {
                flex: 0 0 auto;
                margin: 0;
            }

            .bm-mac-binding-view .bm-mac-step-title {
                margin: 0 0 6px;
                font-size: 1rem;
                font-weight: 700;
            }

            .bm-mac-binding-view .bm-mac-step-description {
                margin: 0 0 12px;
            }

            .bm-mac-binding-view .bm-code-example {
                display: inline-block;
                margin-top: 5px;
                padding: 3px 8px;
                border: 1px solid var(--border-subtle, rgba(148, 163, 184, .22));
                border-radius: 6px;
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
                font-size: .84rem;
                letter-spacing: .02em;
            }

            .bm-mac-binding-view .bm-download-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 12px 18px;
                width: 100%;
            }

            .bm-mac-binding-view .bm-download-row .bm-mac-step-description {
                margin: 0;
                min-width: 0;
            }

            .bm-mac-binding-view .bm-download-row .main-btn {
                width: auto !important;
                min-width: 0;
                margin: 0;
                padding: .72rem 1rem;
                white-space: nowrap;
                border-radius: 11px;
            }

            .bm-mac-binding-view #bmMacContinueButton {
                min-height: 46px;
            }

            /*
             * stepbystep.php ya reserva el espacio inferior necesario para la
             * navegación flotante. No se agrega padding dentro de esta plantilla,
             * porque ese espacio terminaría formando un vacío dentro de la tarjeta.
             */
            .bm-mac-binding-view.bm-has-floating-submit {
                padding-bottom: 0;
            }

            .bm-mac-binding-view .bm-required-alert {
                width: 100%;
                margin: 0 0 16px;
                padding: 11px 14px;
                border-radius: 12px;
                font-size: .9rem;
                font-weight: 650;
                line-height: 1.45;
            }

            .bm-mac-binding-view .bm-required-alert[hidden] {
                display: none !important;
            }

            /*
             * IMPORTANTE:
             * El flotante se mueve por JavaScript directamente a <body>.
             * Por eso estas reglas NO dependen de .bm-mac-binding-view.
             * Esto evita que overflow/transform de la tarjeta o del flujo de
             * animación conviertan el "fixed" en un bloque recortado dentro
             * del contenido.
             */
            .bm-mac-floating-submit {
                position: fixed;
                left: 50%;
                bottom: 14px;
                /*
                 * Visible desde el render inicial en mode 0 y mode 1.
                 * JavaScript solo lo mueve a <body> y reajusta su alineación;
                 * la visibilidad ya no depende de que ese montaje se ejecute.
                 */
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 16px;
                box-sizing: border-box;
                width: min(calc(100% - 44px), 1176px);
                margin: 0;
                padding: 10px;
                transform: translateX(-50%);
                z-index: 2147482000;
                background: rgba(30, 41, 59, .94);
                border: 1px solid var(--border-subtle, rgba(148, 163, 184, .16));
                border-radius: 16px;
                box-shadow: 0 18px 46px rgba(0, 0, 0, .34), 0 1px 0 rgba(255,255,255,.05) inset;
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
            }

            .bm-mac-floating-submit.bm-is-mounted {
                display: flex;
            }

            .bm-mac-floating-submit__button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: auto;
                max-width: 100%;
                min-height: 46px;
                margin-left: auto;
                padding: 0 18px;
                border: 1px solid rgba(130, 148, 255, .30);
                border-radius: 12px;
                background: linear-gradient(180deg, var(--brand-primary-hover, #6f82ff), var(--brand-primary, #5267ff));
                color: #fff;
                font-weight: 850;
                line-height: 1.25;
                white-space: normal;
                text-align: center;
                overflow-wrap: anywhere;
                box-shadow: 0 12px 26px rgba(49, 71, 221, .24), 0 1px 0 rgba(255,255,255,.15) inset;
                transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
            }

            .bm-mac-floating-submit__button:hover {
                transform: translateY(-1px);
                background: linear-gradient(180deg, #7b8cff, #5a6fff);
                color: #fff;
                box-shadow: 0 15px 30px rgba(49, 71, 221, .32), 0 1px 0 rgba(255,255,255,.16) inset;
            }

            @media (max-width: 820px) {
                .bm-mac-binding-view.bm-has-floating-submit {
                    padding-bottom: 0;
                }

                .bm-mac-floating-submit {
                    bottom: max(10px, env(safe-area-inset-bottom));
                    width: calc(100% - 28px);
                    padding: 8px;
                }
            }

            @media (max-width: 575.98px) {
                .bm-mac-floating-submit {
                    left: 12px;
                    right: 12px;
                    width: auto;
                    max-width: none;
                    transform: none;
                }

                .bm-mac-floating-submit__button {
                    width: 100%;
                    min-width: 0;
                    min-height: 48px;
                    margin-left: 0;
                    padding: 10px 14px;
                    font-size: .94rem;
                }
            }

            @media (max-width: 380px) {
                .bm-mac-floating-submit {
                    left: 8px;
                    right: 8px;
                    padding: 7px;
                }

                .bm-mac-floating-submit__button {
                    padding-left: 10px;
                    padding-right: 10px;
                    font-size: .88rem;
                }
            }

            /*
             * Los inputs siguen usando input-style-1, pero se refuerza su contraste
             * para que sea evidente dónde debe escribir/pegar el usuario.
             * No se altera el fondo ni la tarjeta heredada de stepbystep.php.
             */
            .bm-mac-binding-view .input-style-1 label {
                display: block;
                margin-bottom: 8px;
                color: var(--text-primary, #f1f5f9) !important;
                font-weight: 700;
            }

            .bm-mac-binding-view .input-style-1 input[type="text"] {
                min-height: 50px;
                padding: 12px 14px !important;
                border: 2px solid var(--border-strong, #64748b) !important;
                border-radius: 8px !important;
                background: var(--surface-deep, #111827) !important;
                color: var(--text-primary, #f8fafc) !important;
                font-size: 1rem !important;
                line-height: 1.35;
                box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px rgba(255,255,255,.025);
                transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
            }

            .bm-mac-binding-view .input-style-1 input[type="text"]::placeholder {
                color: var(--text-secondary, #aab4c6) !important;
                opacity: .9;
            }

            .bm-mac-binding-view .input-style-1 input[type="text"]:focus {
                outline: none !important;
                border-color: var(--brand-primary, #5267ff) !important;
                background: var(--surface-deep, #111827) !important;
                box-shadow: 0 0 0 3px rgba(82, 103, 255, .20) !important;
            }

            .bm-mac-binding-view #macAddress {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
                font-weight: 700;
                letter-spacing: .035em;
            }

            .bm-mac-binding-view .bm-next-step-message {
                margin-bottom: 10px;
            }

            /* Un destino vacío no debe reservar margen dentro de la tarjeta. */
            #bmNextStepDestination:empty {
                display: none;
            }

            @media (max-width: 860px) {
                .bm-mac-binding-view .bm-product-layout {
                    grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
                    gap: 14px 20px;
                }

                .bm-mac-binding-view #bmLanguageChooser .bm-language-layout {
                    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
                    gap: 16px 24px;
                }

                .bm-mac-binding-view .bm-product-side {
                    justify-content: flex-end;
                    text-align: right;
                }
            }

            @media (max-width: 680px) {
                .bm-mac-binding-view .bm-product-layout {
                    grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
                    gap: 10px 14px;
                }

                .bm-mac-binding-view #bmLanguageChooser .bm-language-layout {
                    grid-template-columns: 1fr;
                }

                .bm-mac-binding-view .bm-product-side {
                    justify-content: flex-end;
                    text-align: right;
                }

                .bm-mac-binding-view .bm-current-device-row {
                    width: auto;
                    max-width: 100%;
                }

                .bm-mac-binding-view #bmLanguageChooser {
                    margin-top: 20px;
                    padding-top: 18px;
                }

                .bm-mac-binding-view #bmLanguageChooser .nt-lang-title {
                    max-width: none;
                }

                .bm-mac-binding-view .bm-download-row {
                    grid-template-columns: 1fr;
                    gap: 10px;
                }

                .bm-mac-binding-view .bm-download-row .main-btn {
                    width: fit-content !important;
                    max-width: 100%;
                }
            }

            @media (max-width: 560px) {
                .bm-mac-binding-view .bm-product-layout {
                    grid-template-columns: 1fr;
                    gap: 9px;
                }

                .bm-mac-binding-view .bm-product-side {
                    justify-content: flex-start;
                    text-align: left;
                }

                .bm-mac-binding-view .bm-current-device-row {
                    width: fit-content;
                    max-width: 100%;
                }
            }

            @media (max-width: 520px) {
                .bm-mac-binding-view #bmLanguageChooser .bm-language-actions {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 10px;
                }

                .bm-mac-binding-view .bm-process-heading {
                    grid-template-columns: minmax(0, 1fr) auto;
                    align-items: start;
                }

                .bm-mac-binding-view .bm-process-title {
                    font-size: .98rem;
                }

                .bm-mac-binding-view .nt-btn-back {
                    padding: .5rem .65rem;
                    font-size: .78rem;
                }

                .bm-mac-binding-view .bm-mac-step {
                    padding-left: 42px;
                    padding-bottom: 20px;
                }

                .bm-mac-binding-view .bm-mac-step-number {
                    width: 28px;
                    height: 28px;
                    font-size: .8rem;
                }

                .bm-mac-binding-view .bm-mac-step:not(:last-child)::before {
                    left: 13px;
                    top: 27px;
                }

                .bm-mac-binding-view .bm-product-action {
                    font-size: .7rem;
                    letter-spacing: .055em;
                }

                .bm-mac-binding-view .bm-product-context {
                    gap: .4rem .6rem;
                }

                .bm-mac-binding-view .bm-product-name {
                    font-size: 1.12rem;
                }

                .bm-mac-binding-view .bm-flow-topbar {
                    padding: 12px 13px;
                }
            }

            @media (max-width: 380px) {
                .bm-mac-binding-view #bmLanguageChooser .bm-language-actions {
                    grid-template-columns: 1fr;
                }

                .bm-mac-binding-view .bm-process-heading {
                    grid-template-columns: 1fr;
                }

                .bm-mac-binding-view .bm-process-heading .nt-btn-back {
                    justify-self: start;
                }

                .bm-mac-binding-view .bm-download-row .main-btn {
                    width: 100% !important;
                    white-space: normal;
                    text-align: center;
                }
            }


/* ===== Componentes compartidos para instalación y tutorial ===== */
.bm-mac-binding-view .bm-flow-section {
    width: 100%;
    max-width: none;
    margin: 0;
}

.bm-mac-binding-view .bm-flow-section + .bm-flow-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border-subtle);
}

.bm-mac-binding-view .bm-flow-section-title {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 760;
    line-height: 1.35;
}

.bm-mac-binding-view .bm-flow-section-description {
    margin: 0 0 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.bm-mac-binding-view .bm-step-copy {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.62;
}

.bm-mac-binding-view .bm-step-copy strong,
.bm-mac-binding-view .bm-step-copy b {
    color: var(--text-primary);
}

.bm-mac-binding-view .bm-step-copy + .bm-step-copy {
    margin-top: 8px;
}

.bm-mac-binding-view .bm-step-list {
    margin: 10px 0 0;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.bm-mac-binding-view .bm-step-list li + li {
    margin-top: 4px;
}

.bm-mac-binding-view .nt-dl-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-top: 14px;
}

.bm-mac-binding-view .nt-dl-wrapper a {
    display: inline-flex;
    max-width: 100%;
    text-decoration: none !important;
}

.bm-mac-binding-view .nt-btn-download {
    max-width: 100%;
    white-space: normal;
}

.bm-mac-binding-view .nt-img-wrapper-center {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 14px;
}

.bm-mac-binding-view .bm-image-grid,
.bm-mac-binding-view .d-flex.justify-content-center.flex-wrap.gap-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 12px;
    width: 100%;
}

.bm-mac-binding-view .nt-img-container {
    display: inline-flex;
    max-width: 100%;
    padding: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: rgba(255,255,255,.012);
}

.bm-mac-binding-view .nt-img-thumb {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform .18s ease, opacity .18s ease;
}

.bm-mac-binding-view .nt-img-thumb:hover {
    transform: translateY(-1px);
    opacity: .96;
}

.nt-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 18px;
    background: rgba(3, 7, 18, .88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity .2s ease;
}

.nt-modal-close {
    z-index: 2;
    min-width: 38px;
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(15, 23, 42, .88);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.bm-mac-binding-view .nt-virus-box,
.bm-mac-binding-view .bm-considerations-box {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid rgba(251, 191, 36, .30);
    border-left: 4px solid #fbbf24;
    border-radius: 12px;
    background: rgba(120, 74, 5, .10);
}

.bm-mac-binding-view .nt-virus-text {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.bm-mac-binding-view .nt-virus-text strong {
    color: var(--text-primary);
}

.bm-mac-binding-view .nt-video-container {
    position: relative;
    width: 100%;
    max-width: 920px;
    aspect-ratio: 16 / 9;
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: #050914;
    box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.bm-mac-binding-view .nt-video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 680px) {
    .bm-mac-binding-view .nt-img-wrapper-center,
    .bm-mac-binding-view .nt-dl-wrapper {
        justify-content: stretch;
    }

    .bm-mac-binding-view .nt-dl-wrapper a,
    .bm-mac-binding-view .nt-btn-download {
        width: 100%;
    }
}


.bm-secondary-machine-notice {
            position: fixed;
            inset: 0;
            z-index: 2147483000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(4, 10, 20, 0.82);
            backdrop-filter: blur(7px);
            -webkit-backdrop-filter: blur(7px);
        }

        .bm-secondary-machine-notice[hidden] {
            display: none !important;
        }

        .bm-secondary-machine-notice__dialog {
            width: min(100%, 590px);
            overflow: hidden;
            border: 1px solid rgba(96, 165, 250, 0.42);
            border-radius: 18px;
            background:
                radial-gradient(circle at top right, rgba(37, 99, 235, 0.17), transparent 42%),
                #0d1728;
            box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
            color: #f8fafc;
        }

        .bm-secondary-machine-notice__header {
            display: flex;
            gap: 15px;
            align-items: flex-start;
            padding: 24px 26px 18px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        }

        .bm-secondary-machine-notice__icon {
            display: inline-flex;
            flex: 0 0 48px;
            width: 48px;
            height: 48px;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(96, 165, 250, 0.46);
            border-radius: 14px;
            background: rgba(37, 99, 235, 0.18);
            color: #93c5fd;
        }

        .bm-secondary-machine-notice__title {
            margin: 0;
            color: #ffffff;
            font-size: 1.3rem;
            font-weight: 800;
            line-height: 1.25;
        }

        .bm-secondary-machine-notice__subtitle {
            margin: 6px 0 0;
            color: #b8c5d9;
            font-size: 0.94rem;
            line-height: 1.5;
        }

        .bm-secondary-machine-notice__body {
            padding: 23px 26px 25px;
        }

        .bm-secondary-machine-notice__important {
            margin: 0 0 17px;
            padding: 16px 17px;
            border: 1px solid rgba(251, 191, 36, 0.38);
            border-left: 5px solid #fbbf24;
            border-radius: 11px;
            background: rgba(120, 74, 5, 0.16);
            color: #f8fafc;
            font-size: 1rem;
            line-height: 1.6;
        }

        .bm-secondary-machine-notice__important strong {
            color: #fde68a;
        }

        .bm-secondary-machine-notice__explanation {
            margin: 0 0 19px;
            color: #cbd5e1;
            font-size: 0.94rem;
            line-height: 1.58;
        }

        .bm-secondary-machine-notice__check {
            display: flex;
            gap: 11px;
            align-items: flex-start;
            margin: 0;
            padding: 14px 15px;
            border: 1px solid rgba(148, 163, 184, 0.26);
            border-radius: 11px;
            background: rgba(30, 41, 59, 0.72);
            cursor: pointer;
        }

        .bm-secondary-machine-notice__check input {
            width: 19px;
            height: 19px;
            margin: 2px 0 0;
            flex: 0 0 19px;
            accent-color: #3b82f6;
        }

        .bm-secondary-machine-notice__check span {
            color: #e2e8f0;
            font-size: 0.94rem;
            font-weight: 600;
            line-height: 1.45;
        }

        .bm-secondary-machine-notice__actions {
            display: flex;
            gap: 11px;
            justify-content: flex-end;
            margin-top: 21px;
        }

        .bm-secondary-machine-notice__back,
        .bm-secondary-machine-notice__confirm {
            min-height: 43px;
            padding: 10px 17px;
            border-radius: 10px;
            font-size: 0.93rem;
            font-weight: 750;
            text-decoration: none;
            transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
        }

        .bm-secondary-machine-notice__back {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(148, 163, 184, 0.3);
            background: rgba(30, 41, 59, 0.78);
            color: #dbe7f5;
        }

        .bm-secondary-machine-notice__back:hover {
            color: #ffffff;
            background: rgba(51, 65, 85, 0.9);
        }

        .bm-secondary-machine-notice__confirm {
            border: 1px solid rgba(96, 165, 250, 0.72);
            background: #2563eb;
            color: #ffffff;
        }

        .bm-secondary-machine-notice__confirm:not(:disabled):hover {
            transform: translateY(-1px);
            background: #1d4ed8;
        }

        .bm-secondary-machine-notice__confirm:disabled {
            cursor: not-allowed;
            opacity: 0.42;
        }

        @media (max-width: 575.98px) {
            .bm-secondary-machine-notice {
                padding: 14px;
            }

            .bm-secondary-machine-notice__header,
            .bm-secondary-machine-notice__body {
                padding-left: 19px;
                padding-right: 19px;
            }

            .bm-secondary-machine-notice__actions {
                flex-direction: column-reverse;
            }

            .bm-secondary-machine-notice__back,
            .bm-secondary-machine-notice__confirm {
                width: 100%;
            }
        }


/* ===== BM FLOW V3 · PROGRESO VISUAL + COMPOSICIÓN RESPONSIVE ===== */

/*
 * Un mismo sistema, tres identidades de etapa.
 * El color cambia solo como acento funcional para que el usuario perciba
 * inmediatamente que avanzó, sin romper la homogeneidad entre pantallas.
 */
.bm-mac-binding-view.bm-product-flow-step--1 {
    --bm-flow-accent: #5267ff;
    --bm-flow-accent-rgb: 82, 103, 255;
}

.bm-mac-binding-view.bm-product-flow-step--2 {
    --bm-flow-accent: #14b8a6;
    --bm-flow-accent-rgb: 20, 184, 166;
}

.bm-mac-binding-view.bm-product-flow-step--3 {
    --bm-flow-accent: #8b5cf6;
    --bm-flow-accent-rgb: 139, 92, 246;
}

.bm-mac-binding-view[class*="bm-product-flow-step--"] .bm-product-action,
.bm-mac-binding-view[class*="bm-product-flow-step--"] #bmLanguageChooser .bm-language-kicker,
.bm-mac-binding-view[class*="bm-product-flow-step--"] .bm-process-kicker {
    color: var(--bm-flow-accent);
}

.bm-mac-binding-view[class*="bm-product-flow-step--"] .bm-product-action::before,
.bm-mac-binding-view[class*="bm-product-flow-step--"] .bm-mac-step-number {
    background: var(--bm-flow-accent);
}

.bm-mac-binding-view[class*="bm-product-flow-step--"] .bm-product-action::before {
    box-shadow: 0 0 0 4px rgba(var(--bm-flow-accent-rgb), .11);
}

.bm-mac-binding-view[class*="bm-product-flow-step--"] .bm-flow-topbar {
    border-color: rgba(var(--bm-flow-accent-rgb), .30);
    border-left: 3px solid var(--bm-flow-accent);
    background: linear-gradient(90deg, rgba(var(--bm-flow-accent-rgb), .105), rgba(var(--bm-flow-accent-rgb), .035));
}

.bm-mac-binding-view[class*="bm-product-flow-step--"] #bmLanguageChooser .nt-btn-lang:hover,
.bm-mac-binding-view[class*="bm-product-flow-step--"] #bmLanguageChooser .nt-btn-lang:focus-visible,
.bm-mac-binding-view[class*="bm-product-flow-step--"] .nt-btn-back:hover,
.bm-mac-binding-view[class*="bm-product-flow-step--"] .nt-btn-back:focus-visible {
    border-color: rgba(var(--bm-flow-accent-rgb), .52);
    background: rgba(var(--bm-flow-accent-rgb), .065);
}

/* Indicador visual de las tres etapas. */
.bm-mac-binding-view .bm-stage-progress {
    width: 100%;
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: rgba(255,255,255,.012);
    overflow: hidden;
}

.bm-mac-binding-view .bm-stage-progress__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.bm-mac-binding-view .bm-stage-progress__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 52px;
    padding: 7px 18px 7px 8px;
    border-radius: 12px;
    color: var(--text-light);
}

.bm-mac-binding-view .bm-stage-progress__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 1px;
    height: 30px;
    transform: translateY(-50%);
    background: var(--border-subtle);
}

.bm-mac-binding-view .bm-stage-progress__item.is-current {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(var(--bm-flow-accent-rgb), .14), rgba(var(--bm-flow-accent-rgb), .045));
    box-shadow: inset 0 0 0 1px rgba(var(--bm-flow-accent-rgb), .18);
}

.bm-mac-binding-view .bm-stage-progress__item.is-complete {
    color: var(--text-secondary);
}

.bm-mac-binding-view .bm-stage-progress__marker {
    position: relative;
    display: inline-flex;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: rgba(255,255,255,.018);
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
}

.bm-mac-binding-view .bm-stage-progress__item.is-current .bm-stage-progress__marker {
    border-color: var(--bm-flow-accent);
    background: var(--bm-flow-accent);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(var(--bm-flow-accent-rgb), .10);
}

.bm-mac-binding-view .bm-stage-progress__item.is-complete .bm-stage-progress__marker {
    border-color: rgba(74, 222, 128, .40);
    background: rgba(34, 197, 94, .13);
    color: #66e39a;
}

.bm-mac-binding-view .bm-stage-progress__check {
    display: none;
    font-size: .84rem;
}

.bm-mac-binding-view .bm-stage-progress__item.is-complete .bm-stage-progress__number {
    display: none;
}

.bm-mac-binding-view .bm-stage-progress__item.is-complete .bm-stage-progress__check {
    display: inline;
}

.bm-mac-binding-view .bm-stage-progress__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.bm-mac-binding-view .bm-stage-progress__eyebrow {
    margin-bottom: 3px;
    color: currentColor;
    opacity: .72;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.bm-mac-binding-view .bm-stage-progress__label {
    overflow: hidden;
    color: currentColor;
    font-size: .86rem;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-mac-binding-view .bm-stage-progress__item.is-current .bm-stage-progress__eyebrow {
    color: var(--bm-flow-accent);
    opacity: 1;
}

/*
 * Instalador: aprovecha el ancho disponible. En escritorio, cada instrucción
 * con captura se distribuye en dos zonas; en pantallas menores vuelve a una
 * sola columna de forma natural.
 */
.bm-mac-binding-view .bm-mac-step--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
    column-gap: clamp(24px, 4vw, 58px);
    row-gap: 7px;
    align-items: start;
}

.bm-mac-binding-view .bm-mac-step--media > .bm-mac-step-title,
.bm-mac-binding-view .bm-mac-step--media > .bm-step-copy,
.bm-mac-binding-view .bm-mac-step--media > .bm-step-list {
    grid-column: 1;
    min-width: 0;
}

.bm-mac-binding-view .bm-mac-step--media > .nt-img-wrapper-center {
    grid-column: 2;
    grid-row: 1 / span 12;
    align-self: center;
    justify-content: center;
    margin: 0;
    min-width: 0;
}

.bm-mac-binding-view .bm-mac-step--media .bm-image-grid {
    justify-content: center !important;
}

.bm-mac-binding-view .bm-mac-step--action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
    column-gap: clamp(24px, 4vw, 58px);
    row-gap: 7px;
    align-items: center;
}

.bm-mac-binding-view .bm-mac-step--action > .bm-mac-step-title,
.bm-mac-binding-view .bm-mac-step--action > .bm-step-copy {
    grid-column: 1;
}

.bm-mac-binding-view .bm-mac-step--action > .nt-dl-wrapper {
    grid-column: 2;
    grid-row: 1 / span 4;
    justify-content: center;
    margin: 0;
}

.bm-mac-binding-view .bm-mac-step--action .nt-btn-download {
    width: min(100%, 390px);
}

.bm-mac-binding-view .bm-mac-step--complete {
    margin-top: 4px;
    padding-top: 14px;
    padding-bottom: 14px !important;
    border: 1px solid rgba(74, 222, 128, .20);
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(34, 197, 94, .075), rgba(34, 197, 94, .018));
}

.bm-mac-binding-view .bm-mac-step--complete .bm-mac-step-number {
    top: 14px;
    left: 12px;
    background: #22c55e;
}

.bm-mac-binding-view .bm-mac-step--complete {
    padding-left: 66px;
}

/* Los elementos puramente visuales se centran, evitando acumulación a la izquierda. */
.bm-mac-binding-view .nt-img-wrapper-center,
.bm-mac-binding-view .nt-dl-wrapper {
    justify-content: center;
}

.bm-mac-binding-view .bm-image-grid,
.bm-mac-binding-view .d-flex.justify-content-center.flex-wrap.gap-3 {
    justify-content: center !important;
}

.bm-mac-binding-view .nt-video-container {
    margin-left: auto;
    margin-right: auto;
}

.bm-mac-binding-view .bm-flow-section--featured {
    text-align: center;
}

.bm-mac-binding-view .bm-flow-section--featured .bm-flow-section-description {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.bm-mac-binding-view.bm-product-flow-step--3 .bm-considerations-box {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

/* Mejora del encabezado para que la fase tenga identidad sin agrandar textos. */
.bm-mac-binding-view.bm-product-flow-view #bmProductHeading,
.bm-mac-binding-view.bm-product-flow-step--1 #bmProductHeading {
    position: relative;
    padding: 16px 18px;
    border: 1px solid rgba(var(--bm-flow-accent-rgb), .16);
    border-radius: 15px;
    background:
        radial-gradient(circle at 0 0, rgba(var(--bm-flow-accent-rgb), .075), transparent 42%),
        rgba(255,255,255,.008);
}

@media (max-width: 900px) {
    .bm-mac-binding-view .bm-mac-step--media,
    .bm-mac-binding-view .bm-mac-step--action {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    .bm-mac-binding-view .bm-mac-step--media > .bm-mac-step-title,
    .bm-mac-binding-view .bm-mac-step--media > .bm-step-copy,
    .bm-mac-binding-view .bm-mac-step--media > .bm-step-list,
    .bm-mac-binding-view .bm-mac-step--media > .nt-img-wrapper-center,
    .bm-mac-binding-view .bm-mac-step--action > .bm-mac-step-title,
    .bm-mac-binding-view .bm-mac-step--action > .bm-step-copy,
    .bm-mac-binding-view .bm-mac-step--action > .nt-dl-wrapper {
        grid-column: 1;
        grid-row: auto;
    }

    .bm-mac-binding-view .bm-mac-step--media > .nt-img-wrapper-center,
    .bm-mac-binding-view .bm-mac-step--action > .nt-dl-wrapper {
        margin-top: 5px;
    }
}

@media (max-width: 680px) {
    .bm-mac-binding-view .bm-stage-progress {
        margin-bottom: 18px;
        padding: 10px;
    }

    .bm-mac-binding-view .bm-stage-progress__item {
        gap: 7px;
        min-height: 48px;
        padding: 6px 9px;
    }

    .bm-mac-binding-view .bm-stage-progress__marker {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: .72rem;
    }

    .bm-mac-binding-view .bm-stage-progress__label {
        font-size: .78rem;
    }

    .bm-mac-binding-view .bm-stage-progress__eyebrow {
        font-size: .58rem;
    }

    .bm-mac-binding-view.bm-product-flow-view #bmProductHeading,
    .bm-mac-binding-view.bm-product-flow-step--1 #bmProductHeading {
        padding: 13px 14px;
    }
}

@media (max-width: 500px) {
    .bm-mac-binding-view .bm-stage-progress__item {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 7px 4px;
        text-align: center;
    }

    .bm-mac-binding-view .bm-stage-progress__copy {
        align-items: center;
    }

    .bm-mac-binding-view .bm-stage-progress__item:not(:last-child)::after {
        top: 50%;
        right: 0;
        height: 38px;
    }

    .bm-mac-binding-view .bm-stage-progress__eyebrow {
        display: none;
    }

    .bm-mac-binding-view .bm-stage-progress__label {
        max-width: 92px;
        font-size: .72rem;
    }

    .bm-mac-binding-view .bm-mac-step--complete {
        padding-left: 54px;
    }

    .bm-mac-binding-view .bm-mac-step--complete .bm-mac-step-number {
        left: 10px;
    }
}

/* ===== Extensiones BM Product Flow: tutoriales de bloqueo permanente ===== */
.nt-permanent-device-guide {
    --nt-guide-accent: var(--bm-flow-accent, var(--brand-primary, #5267ff));
    --nt-guide-accent-soft: rgba(var(--bm-flow-accent-rgb, 139, 92, 246), .12);
    --nt-guide-border: var(--border-subtle, rgba(148, 163, 184, .22));
    --nt-guide-surface: var(--surface-deep, #111827);
    --nt-guide-surface-soft: var(--surface-soft, rgba(255,255,255,.018));
    --nt-guide-text: var(--text-primary, #f8fafc);
    --nt-guide-muted: var(--text-secondary, #aab4c6);
}

/* ===== Extensiones BM Product Flow: persona de confianza / instructor ===== */
.bm-trusted-person-view {
    --nt-bg-inner: var(--surface-deep, #111827);
    --nt-border: var(--border-subtle, rgba(148, 163, 184, .18));
    --nt-text-main: var(--text-primary, #f8fafc);
    --nt-text-muted: var(--text-secondary, #aab4c6);
    --nt-primary: var(--brand-primary, #5267ff);
}

/*
    |--------------------------------------------------------------------------
    | Estilos específicos del tutorial
    |--------------------------------------------------------------------------
    */

    .nt-permanent-device-guide {
        --nt-guide-accent: var(--bm-flow-accent, var(--brand-primary, #5267ff));
        --nt-guide-accent-soft: rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.12);
        --nt-guide-border: var(--border-subtle, rgba(148, 163, 184, .22));
        --nt-guide-surface: var(--surface-deep, #111827);
        --nt-guide-surface-soft: var(--surface-soft, rgba(255,255,255,.018));
        --nt-guide-text: var(--text-primary, #f8fafc);
        --nt-guide-muted: var(--text-secondary, #aab4c6);
    }

    .nt-permanent-device-guide *,
.nt-permanent-device-modal * {
        box-sizing: border-box;
    }

    .nt-permanent-device-guide .nt-modern-header p {
        margin-bottom: 0;
    }

    .nt-permanent-device-guide .nt-guide-intro {
        display: grid;
        gap: 18px;
        margin: 24px 0 30px;
    }

    .nt-permanent-device-guide .nt-guide-definition {
        padding: 22px;
        border: 1px solid var(--nt-guide-border);
        border-radius: 18px;
        background:
            linear-gradient(
                135deg,
                var(--nt-guide-accent-soft),
                transparent 68%
            ),
            var(--nt-guide-surface-soft);
    }

    .nt-permanent-device-guide .nt-guide-definition h3 {
        margin: 0 0 12px;
        color: var(--nt-guide-text);
        font-size: clamp(1.15rem, 2vw, 1.45rem);
        line-height: 1.3;
    }

    .nt-permanent-device-guide .nt-guide-definition p {
        margin: 0 0 12px;
        color: var(--nt-guide-muted);
        line-height: 1.7;
    }

    .nt-permanent-device-guide .nt-guide-definition p:last-child {
        margin-bottom: 0;
    }

    .nt-permanent-device-guide .nt-guide-definition strong {
        color: var(--nt-guide-text);
    }

    .nt-permanent-device-guide .nt-permanent-definition {
        margin-top: 17px;
        padding: 16px 18px;
        border: 1px solid rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.3);
        border-radius: 14px;
        background: rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.08);
    }

    .nt-permanent-device-guide .nt-permanent-definition strong {
        display: block;
        margin-bottom: 6px;
        color: var(--nt-guide-text);
    }

    .nt-permanent-device-guide .nt-permanent-definition span {
        display: block;
        color: var(--nt-guide-muted);
        line-height: 1.65;
    }

    .nt-permanent-device-guide .nt-device-structure {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .nt-permanent-device-guide .nt-device-card {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        min-height: 100%;
        padding: 18px;
        border: 1px solid var(--nt-guide-border);
        border-radius: 16px;
        background: var(--nt-guide-surface-soft);
    }

    .nt-permanent-device-guide .nt-device-card.is-primary {
        border-color: rgba(34, 197, 94, 0.28);
        background:
            linear-gradient(
                135deg,
                rgba(34, 197, 94, 0.08),
                transparent 72%
            ),
            var(--nt-guide-surface-soft);
    }

    .nt-permanent-device-guide .nt-device-card.is-secondary {
        border-color: rgba(245, 158, 11, 0.28);
        background:
            linear-gradient(
                135deg,
                rgba(245, 158, 11, 0.08),
                transparent 72%
            ),
            var(--nt-guide-surface-soft);
    }

    .nt-permanent-device-guide .nt-device-icon {
        display: grid;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        place-items: center;
        border-radius: 14px;
        background: var(--nt-guide-accent-soft);
        font-size: 1.25rem;
    }

    .nt-permanent-device-guide .nt-device-card strong {
        display: block;
        margin-bottom: 6px;
        color: var(--nt-guide-text);
    }

    .nt-permanent-device-guide .nt-device-card span {
        display: block;
        color: var(--nt-guide-muted);
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .nt-permanent-device-guide .nt-guide-family {
        padding: 18px;
        border: 1px solid var(--nt-guide-border);
        border-radius: 16px;
        background: var(--nt-guide-surface-soft);
    }

    .nt-permanent-device-guide .nt-guide-family-title {
        display: block;
        margin-bottom: 12px;
        color: var(--nt-guide-text);
        font-weight: 800;
    }

    .nt-permanent-device-guide .nt-guide-family-items {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

    .nt-permanent-device-guide .nt-guide-family-item {
        padding: 7px 11px;
        border: 1px solid rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.26);
        border-radius: 999px;
        background: var(--nt-guide-accent-soft);
        color: var(--nt-guide-text);
        font-size: 0.85rem;
        font-weight: 700;
    }

    .nt-permanent-device-guide .nt-guide-family-item.is-current {
        border-color: rgba(34, 197, 94, 0.38);
        background: rgba(34, 197, 94, 0.1);
    }

    .nt-permanent-device-guide .nt-guide-notice {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 18px;
        border: 1px solid rgba(245, 158, 11, 0.28);
        border-radius: 16px;
        background: rgba(245, 158, 11, 0.08);
        color: var(--nt-guide-muted);
        line-height: 1.65;
    }

    .nt-permanent-device-guide .nt-guide-notice-icon {
        flex: 0 0 auto;
        font-size: 1.2rem;
    }

    .nt-permanent-device-guide .nt-guide-notice strong {
        color: var(--nt-guide-text);
    }

    .nt-permanent-device-guide .nt-guide-progress {
        position: sticky;
        z-index: 15;
        top: 12px;
        display: flex;
        gap: 14px;
        align-items: center;
        margin: 0 0 24px;
        padding: 12px 15px;
        border: 1px solid var(--nt-guide-border);
        border-radius: 14px;
        background: var(--nt-guide-surface);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .nt-permanent-device-guide .nt-guide-progress-track {
        overflow: hidden;
        flex: 1;
        height: 7px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.18);
    }

    .nt-permanent-device-guide .nt-guide-progress-bar {
        width: 10%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(
            90deg,
            var(--nt-guide-accent),
            #8b5cf6
        );
        transition: width 220ms ease;
    }

    .nt-permanent-device-guide .nt-guide-progress-label {
        flex: 0 0 auto;
        color: var(--nt-guide-muted);
        font-size: 0.84rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .nt-permanent-device-guide .nt-timeline {
        margin-top: 0;
    }

    .nt-permanent-device-guide .nt-guide-step {
        scroll-margin-top: 90px;
    }

    .nt-permanent-device-guide .nt-guide-step:last-child {
        border-left-color: transparent;
    }

    .nt-permanent-device-guide .nt-step-heading {
        display: flex;
        gap: 15px;
        align-items: center;
        margin-bottom: 20px;
    }

    .nt-permanent-device-guide .nt-step-number {
        display: grid;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        place-items: center;
        border: 1px solid rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.35);
        border-radius: 15px;
        background:
            linear-gradient(
                145deg,
                rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.2),
                rgba(139, 92, 246, 0.1)
            );
        color: var(--nt-guide-text);
        font-size: 1.05rem;
        font-weight: 800;
        box-shadow: 0 8px 24px rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.1);
    }

    .nt-permanent-device-guide .nt-step-kicker {
        display: block;
        margin-bottom: 3px;
        color: var(--nt-guide-accent);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .nt-permanent-device-guide .nt-step-heading h3 {
        margin: 0;
        color: var(--nt-guide-text);
        font-size: clamp(1.12rem, 2vw, 1.4rem);
        line-height: 1.3;
    }

    .nt-permanent-device-guide .nt-step-grid {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 350px);
        gap: clamp(22px, 4vw, 42px);
        align-items: start;
    }

    .nt-permanent-device-guide .nt-step-copy {
        min-width: 0;
        color: var(--nt-guide-muted);
        font-size: 0.98rem;
        line-height: 1.72;
    }

    .nt-permanent-device-guide .nt-step-copy p {
        margin: 0 0 15px;
    }

    .nt-permanent-device-guide .nt-step-copy p:last-child {
        margin-bottom: 0;
    }

    .nt-permanent-device-guide .nt-step-copy strong {
        color: var(--nt-guide-text);
    }

    .nt-permanent-device-guide .nt-clean-list {
        display: grid;
        gap: 9px;
        margin: 0 0 16px;
        padding: 0;
        list-style: none;
    }

    .nt-permanent-device-guide .nt-clean-list li {
        position: relative;
        padding-left: 24px;
    }

    .nt-permanent-device-guide .nt-clean-list li::before {
        position: absolute;
        top: 0.72em;
        left: 2px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--nt-guide-accent);
        box-shadow:
            0 0 0 5px
            var(--nt-guide-accent-soft);
        content: "";
        transform: translateY(-50%);
    }

    .nt-permanent-device-guide .nt-inline-example {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin: 0 0 16px;
        padding: 13px 15px;
        border: 1px solid var(--nt-guide-border);
        border-radius: 13px;
        background: var(--nt-guide-surface-soft);
    }

    .nt-permanent-device-guide .nt-inline-example span {
        padding: 5px 10px;
        border: 1px solid rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.25);
        border-radius: 999px;
        background: var(--nt-guide-accent-soft);
        color: var(--nt-guide-text);
        font-size: 0.85rem;
        font-weight: 700;
    }

    .nt-permanent-device-guide .nt-warning-inline,
.nt-permanent-device-guide .nt-danger-inline,
.nt-permanent-device-guide .nt-success-inline {
        margin: 16px 0;
        padding: 14px 16px;
        border-radius: 13px;
        line-height: 1.6;
    }

    .nt-permanent-device-guide .nt-warning-inline {
        border: 1px solid rgba(245, 158, 11, 0.3);
        background: rgba(245, 158, 11, 0.08);
    }

    .nt-permanent-device-guide .nt-danger-inline {
        border: 1px solid rgba(239, 68, 68, 0.3);
        background: rgba(239, 68, 68, 0.08);
    }

    .nt-permanent-device-guide .nt-success-inline {
        border: 1px solid rgba(34, 197, 94, 0.3);
        background: rgba(34, 197, 94, 0.08);
    }

    .nt-permanent-device-guide .nt-path-box {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin: 0 0 17px;
        padding: 13px 15px;
        border: 1px solid rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.25);
        border-radius: 13px;
        background: var(--nt-guide-accent-soft);
        color: var(--nt-guide-text);
        font-size: 0.9rem;
        font-weight: 700;
    }

    .nt-permanent-device-guide .nt-path-box span {
        color: var(--nt-guide-accent);
        font-size: 1.1rem;
    }

    .nt-permanent-device-guide .nt-tutorial-shot {
        position: sticky;
        top: 82px;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .nt-permanent-device-guide .nt-shot-trigger {
        position: relative;
        display: block;
        overflow: hidden;
        width: 100%;
        min-height: 320px;
        padding: 0;
        border: 1px solid var(--nt-guide-border);
        border-radius: 20px;
        background:
            linear-gradient(
                145deg,
                rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.08),
                rgba(139, 92, 246, 0.06)
            ),
            var(--nt-guide-surface-soft);
        color: inherit;
        cursor: zoom-in;
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.16);
        transition:
            transform 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .nt-permanent-device-guide .nt-shot-trigger:hover {
        border-color: rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.55);
        box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
        transform: translateY(-3px);
    }

    .nt-permanent-device-guide .nt-shot-trigger:focus-visible {
        outline: 3px solid rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.4);
        outline-offset: 3px;
    }

    .nt-permanent-device-guide .nt-shot-trigger img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 610px;
        object-fit: contain;
        background: rgba(0, 0, 0, 0.12);
    }

    .nt-permanent-device-guide .nt-shot-placeholder {
        display: none;
        min-height: 320px;
        padding: 32px 24px;
        place-content: center;
        place-items: center;
        text-align: center;
    }

    .nt-permanent-device-guide .nt-shot-placeholder-icon {
        display: block;
        margin-bottom: 12px;
        font-size: 2rem;
    }

    .nt-permanent-device-guide .nt-shot-placeholder strong {
        display: block;
        margin-bottom: 8px;
        color: var(--nt-guide-text);
        font-size: 1rem;
    }

    .nt-permanent-device-guide .nt-shot-placeholder small {
        display: block;
        max-width: 260px;
        color: var(--nt-guide-muted);
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .nt-permanent-device-guide .nt-tutorial-shot.is-missing .nt-shot-trigger {
        cursor: default;
    }

    .nt-permanent-device-guide .nt-tutorial-shot.is-missing .nt-shot-trigger img {
        display: none;
    }

    .nt-permanent-device-guide .nt-tutorial-shot.is-missing .nt-shot-placeholder {
        display: grid;
    }

    .nt-permanent-device-guide .nt-shot-hover {
        position: absolute;
        right: 12px;
        bottom: 12px;
        padding: 8px 11px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        background: rgba(2, 6, 23, 0.76);
        color: #ffffff;
        font-size: 0.76rem;
        font-weight: 700;
        opacity: 0;
        transform: translateY(5px);
        transition:
            opacity 180ms ease,
            transform 180ms ease;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .nt-permanent-device-guide .nt-shot-trigger:hover .nt-shot-hover,
.nt-permanent-device-guide .nt-shot-trigger:focus-visible .nt-shot-hover {
        opacity: 1;
        transform: translateY(0);
    }

    .nt-permanent-device-guide .nt-tutorial-shot.is-missing .nt-shot-hover {
        display: none;
    }

    .nt-permanent-device-guide .nt-tutorial-shot figcaption {
        margin-top: 10px;
        color: var(--nt-guide-muted);
        font-size: 0.78rem;
        line-height: 1.45;
        text-align: center;
    }

    .nt-permanent-device-guide .nt-guide-result {
        margin-top: 30px;
        padding: clamp(22px, 4vw, 32px);
        border: 1px solid rgba(34, 197, 94, 0.28);
        border-radius: 20px;
        background:
            linear-gradient(
                135deg,
                rgba(34, 197, 94, 0.1),
                transparent 70%
            ),
            var(--nt-guide-surface-soft);
    }

    .nt-permanent-device-guide .nt-guide-result-header {
        display: flex;
        gap: 13px;
        align-items: center;
        margin-bottom: 12px;
    }

    .nt-permanent-device-guide .nt-guide-result-icon {
        display: grid;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        place-items: center;
        border-radius: 14px;
        background: rgba(34, 197, 94, 0.14);
        font-size: 1.2rem;
    }

    .nt-permanent-device-guide .nt-guide-result h3 {
        margin: 0;
        color: var(--nt-guide-text);
        font-size: 1.25rem;
    }

    .nt-permanent-device-guide .nt-guide-result p {
        margin: 0 0 12px;
        color: var(--nt-guide-muted);
        line-height: 1.7;
    }

    .nt-permanent-device-guide .nt-guide-result p:last-child {
        margin-bottom: 0;
    }

    .nt-permanent-device-guide .nt-guide-result strong {
        color: var(--nt-guide-text);
    }

    /*
    |--------------------------------------------------------------------------
    | Modal para ampliar capturas
    |--------------------------------------------------------------------------
    */

    .nt-permanent-device-modal {
        position: fixed;
        z-index: 99999;
        inset: 0;
        display: none;
        place-items: center;
        padding: 24px;
        background: rgba(2, 6, 23, 0.88);
        opacity: 0;
        transition: opacity 180ms ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .nt-permanent-device-modal.is-visible {
        display: grid;
        opacity: 1;
    }

    .nt-permanent-device-modal .nt-image-modal-dialog {
        position: relative;
        display: grid;
        max-width: min(1000px, 96vw);
        max-height: 94vh;
        gap: 12px;
        padding: 18px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 22px;
        background: #0f172a;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
    }

    .nt-permanent-device-modal img {
        display: block;
        max-width: 100%;
        max-height: calc(94vh - 100px);
        margin: auto;
        border-radius: 14px;
        object-fit: contain;
    }

    .nt-permanent-device-modal .nt-image-modal-caption {
        margin: 0;
        color: #cbd5e1;
        font-size: 0.88rem;
        line-height: 1.5;
        text-align: center;
    }

    .nt-permanent-device-modal .nt-image-modal-close {
        position: absolute;
        z-index: 2;
        top: -13px;
        right: -13px;
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 50%;
        background: #111827;
        color: #ffffff;
        cursor: pointer;
        font-size: 1.1rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .nt-permanent-device-modal .nt-image-modal-close:focus-visible {
        outline: 3px solid rgba(var(--bm-flow-accent-rgb, 139, 92, 246), 0.45);
        outline-offset: 3px;
    }

    /*
    |--------------------------------------------------------------------------
    | Responsive
    |--------------------------------------------------------------------------
    */

    @media (max-width: 960px) {
        .nt-permanent-device-guide .nt-device-structure {
            grid-template-columns: 1fr;
        }

        .nt-permanent-device-guide .nt-step-grid {
            grid-template-columns: 1fr;
        }

        .nt-permanent-device-guide .nt-tutorial-shot {
            position: relative;
            top: auto;
            width: min(100%, 390px);
            max-width: none;
        }
    }

    @media (max-width: 640px) {
        .nt-permanent-device-guide .nt-guide-definition,
.nt-permanent-device-guide .nt-device-card,
.nt-permanent-device-guide .nt-guide-family,
.nt-permanent-device-guide .nt-guide-notice {
            border-radius: 14px;
        }

        .nt-permanent-device-guide .nt-guide-progress {
            top: 8px;
            gap: 10px;
            padding: 10px 12px;
        }

        .nt-permanent-device-guide .nt-guide-progress-label {
            font-size: 0.75rem;
        }

        .nt-permanent-device-guide .nt-step-heading {
            gap: 11px;
            align-items: flex-start;
        }

        .nt-permanent-device-guide .nt-step-number {
            flex-basis: 42px;
            width: 42px;
            height: 42px;
            border-radius: 13px;
        }

        .nt-permanent-device-guide .nt-step-copy {
            font-size: 0.94rem;
        }

        .nt-permanent-device-guide .nt-shot-trigger,
.nt-permanent-device-guide .nt-shot-placeholder {
            min-height: 260px;
        }

        .nt-permanent-device-guide .nt-shot-hover {
            display: none;
        }

        .nt-permanent-device-modal {
            padding: 12px;
        }

        .nt-permanent-device-modal .nt-image-modal-dialog {
            width: 100%;
            padding: 12px;
            border-radius: 17px;
        }

        .nt-permanent-device-modal .nt-image-modal-close {
            top: 7px;
            right: 7px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .nt-permanent-device-guide .nt-shot-trigger,
.nt-permanent-device-guide .nt-shot-hover,
.nt-permanent-device-guide .nt-guide-progress-bar,
.nt-permanent-device-modal {
            transition: none !important;
        }
    }

/* Estilos de Inputs para Dark Mode y consistencia */
    .bm-trusted-person-view .nt-modern-body select,
.bm-trusted-person-view .nt-modern-body input[type="text"],
.bm-trusted-person-view .nt-modern-body input[type="email"],
.bm-trusted-person-view .nt-modern-body input[type="date"] {
        background-color: var(--nt-bg-inner);
        border: 1px solid var(--nt-border);
        color: var(--nt-text-main);
        border-radius: 8px;
        padding: 12px;
        width: 100%;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    
    .bm-trusted-person-view .nt-modern-body select:focus,
.bm-trusted-person-view .nt-modern-body input:focus {
        border-color: var(--nt-primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        outline: none;
    }

    /* Cards del Dashboard (Solución al texto que se salía) */
    .bm-trusted-person-view .tp-menu-card {
         background-color: var(--nt-bg-inner) !important;
         border: 1px solid var(--nt-border) !important;
         border-radius: 12px;
         padding: 25px;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         transition: transform 0.2s, border-color 0.2s;
    }
    .bm-trusted-person-view .tp-menu-card:hover {
        transform: translateY(-3px);
        border-color: var(--nt-primary) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    .bm-trusted-person-view .tp-menu-card h3 {
        color: var(--nt-primary);
        font-size: 1.25rem;
        margin-bottom: 15px;
        font-weight: 700;
        border-bottom: 1px solid var(--nt-border);
        padding-bottom: 10px;
    }
    .bm-trusted-person-view .tp-menu-card p {
        flex-grow: 1; /* Empuja el botón hacia abajo */
        margin-bottom: 20px;
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--nt-text-muted);
    }

    /* Botones primarios mejorados */
    .bm-trusted-person-view .btn-primary {
        background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
        border: none !important;
        border-radius: 50px;
        font-weight: 700;
        padding: 12px 24px;
        color: white !important;
        box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
        width: 100%;
        transition: all 0.2s ease;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }
    .bm-trusted-person-view .btn-primary:hover:not(:disabled) {
        background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
    }
    .bm-trusted-person-view .btn-primary:disabled {
        background: var(--nt-border);
        color: var(--nt-text-muted) !important;
        cursor: not-allowed;
        box-shadow: none;
    }

    /* BOTÓN ROJO SÓLIDO (Para eliminar/retirar) */
    .bm-trusted-person-view .btn-danger-custom {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        border: none !important;
        border-radius: 50px;
        font-weight: 700;
        padding: 12px 24px;
        color: white !important;
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
        width: 100%;
        transition: all 0.2s ease;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }
    .bm-trusted-person-view .btn-danger-custom:hover:not(:disabled) {
        background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
    }
    .bm-trusted-person-view .btn-danger-custom:disabled {
        background: var(--nt-border);
        color: var(--nt-text-muted) !important;
        cursor: not-allowed;
        box-shadow: none;
    }


    /* Botones de Selección (Radio cards) para Instructor */
    .bm-trusted-person-view .btn-selection-card {
        background: var(--nt-bg-inner);
        border: 2px solid var(--nt-border);
        color: var(--nt-text-main);
        border-radius: 12px;
        padding: 15px;
        text-align: left;
        width: 100%;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 10px;
        /* Fix text overflow inside selection buttons */
        white-space: normal; 
        height: auto;
    }
    .bm-trusted-person-view .btn-selection-card:hover {
        background: rgba(59, 130, 246, 0.05);
        border-color: var(--nt-primary);
    }
    .bm-trusted-person-view .btn-selection-card.active {
        background: rgba(59, 130, 246, 0.15);
        border-color: var(--nt-primary);
        color: #fff;
    }
    .bm-trusted-person-view .btn-selection-card strong {
        display: block;
        margin-bottom: 4px;
        color: var(--nt-primary);
    }

    /* Alertas Vibrantes */
    .bm-trusted-person-view .alert {
        position: relative;
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        border: none;
        border-left: 5px solid transparent;
        border-radius: 0 8px 8px 0;
        background: var(--nt-bg-inner); /* Fallback */
    }
    .bm-trusted-person-view .alert-warning {
        background: rgba(245, 158, 11, 0.15) !important;
        border-left-color: #f59e0b !important;
        color: #fbbf24 !important;
    }
    .bm-trusted-person-view .alert-danger {
        background: rgba(239, 68, 68, 0.15) !important;
        border-left-color: #ef4444 !important;
        color: #fca5a5 !important;
    }
    .bm-trusted-person-view .alert-success {
        background: rgba(16, 185, 129, 0.15) !important;
        border-left-color: #10b981 !important;
        color: #6ee7b7 !important;
    }
    .bm-trusted-person-view .alert-secondary {
        background: rgba(71, 85, 105, 0.3) !important;
        border-left-color: #94a3b8 !important;
        color: #cbd5e1 !important;
    }

    /* Utilidades */
    .bm-trusted-person-view .tp-hidden { display: none !important; }
    .bm-trusted-person-view .text-muted { color: var(--nt-text-muted) !important; }
    .bm-trusted-person-view .text-white { color: #fff !important; }
    
    .bm-trusted-person-view .tp-note-box {
        background: rgba(59, 130, 246, 0.1);
        border-left: 4px solid var(--nt-primary);
        padding: 20px;
        border-radius: 0 12px 12px 0;
        margin-bottom: 25px;
        color: var(--nt-text-main);
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Animaciones suaves */
    .bm-trusted-person-view .nt-fade-in { animation: bm-product-flow-fadeIn 0.4s ease-out; }
    @keyframes bm-product-flow-fadeIn { .bm-trusted-person-view from { opacity: 0; transform: translateY(10px); } .bm-trusted-person-view to { opacity: 1; transform: translateY(0); } }
    /* ==========================================================
       PERSONA DE CONFIANZA · REDISEÑO POSTERIOR AL IDIOMA
       Se activa únicamente después de seleccionar Español/English.
       No altera la pantalla inicial de selección de idioma.
       ========================================================== */
    .bm-trusted-person-view #tp_spanish,
.bm-trusted-person-view #tp_english,
.bm-trusted-person-view #tp_topAlertES,
.bm-trusted-person-view #tp_topAlertEN {
        --tp-bg-deep: #0f172a;
        --tp-surface: rgba(30, 41, 59, .94);
        --tp-surface-raised: rgba(36, 48, 71, .96);
        --tp-surface-hover: rgba(51, 65, 85, .78);
        --tp-text: #f8fafc;
        --tp-muted: #a5b4cf;
        --tp-light: #7f8da9;
        --tp-brand: #5267ff;
        --tp-brand-hover: #6f82ff;
        --tp-brand-dark: #3147dd;
        --tp-brand-soft: rgba(82, 103, 255, .14);
        --tp-border: rgba(148, 163, 184, .16);
        --tp-border-strong: rgba(148, 163, 184, .28);
        --tp-success-soft: rgba(57, 182, 111, .15);
        --tp-success: #55d989;
        --tp-warning-soft: rgba(245, 158, 11, .14);
        --tp-warning: #fbbf24;
        --tp-danger-soft: rgba(255, 95, 87, .14);
        --tp-danger: #ff7a70;
        --tp-info-soft: rgba(56, 189, 248, .12);
        --tp-info: #67d7ff;
        --tp-shadow: 0 20px 54px rgba(0, 0, 0, .28), 0 1px 0 rgba(255,255,255,.04) inset;
        --tp-shadow-hover: 0 28px 72px rgba(0, 0, 0, .38), 0 0 0 1px rgba(82,103,255,.12);
        color: var(--tp-text);
        font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .bm-trusted-person-view #tp_spanish,
.bm-trusted-person-view #tp_english {
        width: 100%;
        animation-duration: .32s !important;
    }

    /* Menú principal posterior al idioma */
    .bm-trusted-person-view #tp_es_menu,
.bm-trusted-person-view #tp_en_menu {
        position: relative;
        padding-top: 2px;
    }

    .bm-trusted-person-view #tp_es_menu > .d-flex:first-child,
.bm-trusted-person-view #tp_en_menu > .d-flex:first-child,
.bm-trusted-person-view #tp_es_trusted > .d-flex:first-child,
.bm-trusted-person-view #tp_es_block > .d-flex:first-child,
.bm-trusted-person-view #tp_es_instructor > .d-flex:first-child,
.bm-trusted-person-view #tp_en_trusted > .d-flex:first-child,
.bm-trusted-person-view #tp_en_block > .d-flex:first-child,
.bm-trusted-person-view #tp_en_instructor > .d-flex:first-child {
        margin-bottom: 22px !important;
    }

    .bm-trusted-person-view #tp_spanish .nt-btn-back,
.bm-trusted-person-view #tp_english .nt-btn-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 42px;
        padding: 9px 15px;
        border: 1px solid var(--tp-border);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(36,48,71,.96), rgba(24,34,54,.96));
        color: var(--tp-muted);
        font-size: .86rem;
        font-weight: 750;
        line-height: 1;
        box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.05) inset;
        transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .bm-trusted-person-view #tp_spanish .nt-btn-back span,
.bm-trusted-person-view #tp_english .nt-btn-back span {
        font-size: 1.08rem;
        line-height: 1;
        transition: transform .18s ease;
    }

    .bm-trusted-person-view #tp_spanish .nt-btn-back:hover,
.bm-trusted-person-view #tp_english .nt-btn-back:hover {
        color: var(--tp-text);
        border-color: rgba(82,103,255,.38);
        background: linear-gradient(180deg, rgba(45,59,86,.98), rgba(29,41,64,.98));
        box-shadow: 0 14px 30px rgba(0,0,0,.24), 0 0 0 3px rgba(82,103,255,.07);
        transform: translateY(-1px);
    }

    .bm-trusted-person-view #tp_spanish .nt-btn-back:hover span,
.bm-trusted-person-view #tp_english .nt-btn-back:hover span {
        transform: translateX(-2px);
    }

    .bm-trusted-person-view #tp_spanish .row.g-4,
.bm-trusted-person-view #tp_english .row.g-4 {
        --bs-gutter-x: 20px;
        --bs-gutter-y: 20px;
    }

    .bm-trusted-person-view #tp_spanish .tp-menu-card,
.bm-trusted-person-view #tp_english .tp-menu-card {
        position: relative;
        min-height: 100%;
        padding: 26px;
        border: 1px solid var(--tp-border) !important;
        border-radius: 24px;
        background:
            linear-gradient(135deg, rgba(255,255,255,.045), transparent 36%),
            linear-gradient(180deg, rgba(34,45,66,.97), rgba(26,37,58,.98)) !important;
        box-shadow: var(--tp-shadow);
        isolation: isolate;
        overflow: hidden;
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }

    .bm-trusted-person-view #tp_spanish .tp-menu-card::before,
.bm-trusted-person-view #tp_english .tp-menu-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--tp-brand), #7c8cff 58%, #38bdf8);
        opacity: .9;
        box-shadow: 0 0 22px rgba(82,103,255,.42);
    }

    .bm-trusted-person-view #tp_spanish .tp-menu-card::after,
.bm-trusted-person-view #tp_english .tp-menu-card::after {
        content: "";
        position: absolute;
        width: 145px;
        height: 145px;
        right: -62px;
        top: -65px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(82,103,255,.18), transparent 68%);
        pointer-events: none;
        z-index: -1;
        transition: transform .25s ease, opacity .25s ease;
    }

    .bm-trusted-person-view #tp_spanish .tp-menu-card:hover,
.bm-trusted-person-view #tp_english .tp-menu-card:hover {
        transform: translateY(-5px);
        border-color: rgba(82,103,255,.34) !important;
        box-shadow: var(--tp-shadow-hover);
    }

    .bm-trusted-person-view #tp_spanish .tp-menu-card:hover::after,
.bm-trusted-person-view #tp_english .tp-menu-card:hover::after {
        transform: scale(1.14);
        opacity: 1;
    }

    .bm-trusted-person-view #tp_spanish .tp-menu-card h3,
.bm-trusted-person-view #tp_english .tp-menu-card h3 {
        position: relative;
        margin: 0 0 17px;
        padding: 0 0 16px;
        border-bottom: 1px solid var(--tp-border);
        color: var(--tp-text);
        font-size: clamp(1.12rem, 1.8vw, 1.28rem);
        font-weight: 850;
        line-height: 1.25;
        letter-spacing: -.025em;
    }

    .bm-trusted-person-view #tp_spanish .tp-menu-card h3::after,
.bm-trusted-person-view #tp_english .tp-menu-card h3::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 68px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--tp-brand), transparent);
    }

    .bm-trusted-person-view #tp_spanish .tp-menu-card p,
.bm-trusted-person-view #tp_english .tp-menu-card p {
        margin: 0 0 24px;
        color: var(--tp-muted);
        font-size: .91rem;
        line-height: 1.72;
    }

    /* Vistas internas */
    .bm-trusted-person-view #tp_es_trusted,
.bm-trusted-person-view #tp_es_block,
.bm-trusted-person-view #tp_es_instructor,
.bm-trusted-person-view #tp_en_trusted,
.bm-trusted-person-view #tp_en_block,
.bm-trusted-person-view #tp_en_instructor {
        position: relative;
        padding: clamp(20px, 3vw, 34px);
        border: 1px solid var(--tp-border);
        border-radius: 24px;
        background:
            linear-gradient(135deg, rgba(255,255,255,.035), transparent 34%),
            linear-gradient(180deg, rgba(31,43,64,.96), rgba(22,32,52,.98));
        box-shadow: var(--tp-shadow);
        overflow: hidden;
    }

    .bm-trusted-person-view #tp_es_trusted::before,
.bm-trusted-person-view #tp_es_block::before,
.bm-trusted-person-view #tp_es_instructor::before,
.bm-trusted-person-view #tp_en_trusted::before,
.bm-trusted-person-view #tp_en_block::before,
.bm-trusted-person-view #tp_en_instructor::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--tp-brand), #7c8cff 52%, #38bdf8);
        opacity: .9;
    }

    .bm-trusted-person-view #tp_spanish h3.fw-bold,
.bm-trusted-person-view #tp_spanish h4.fw-bold,
.bm-trusted-person-view #tp_english h3.fw-bold,
.bm-trusted-person-view #tp_english h4.fw-bold {
        margin-bottom: 20px !important;
        color: var(--tp-text) !important;
        font-size: clamp(1.42rem, 2.4vw, 2rem);
        font-weight: 900 !important;
        line-height: 1.12;
        letter-spacing: -.045em;
    }

    .bm-trusted-person-view #tp_spanish .tp-note-box,
.bm-trusted-person-view #tp_english .tp-note-box,
.bm-trusted-person-view #tp_topAlertES .tp-note-box,
.bm-trusted-person-view #tp_topAlertEN .tp-note-box {
        position: relative;
        margin-bottom: 22px;
        padding: 20px 21px 20px 24px;
        border: 1px solid rgba(56,189,248,.20);
        border-left: 4px solid var(--tp-info);
        border-radius: 16px;
        background:
            linear-gradient(90deg, rgba(56,189,248,.12), rgba(56,189,248,.045)),
            rgba(15,23,42,.28);
        color: var(--tp-muted);
        font-size: .93rem;
        line-height: 1.72;
        box-shadow: 0 12px 30px rgba(0,0,0,.15);
    }

    .bm-trusted-person-view #tp_spanish .tp-note-box strong,
.bm-trusted-person-view #tp_english .tp-note-box strong,
.bm-trusted-person-view #tp_topAlertES .tp-note-box strong,
.bm-trusted-person-view #tp_topAlertEN .tp-note-box strong {
        color: var(--tp-text);
    }

    .bm-trusted-person-view #tp_spanish .tp-note-box a,
.bm-trusted-person-view #tp_english .tp-note-box a,
.bm-trusted-person-view #tp_topAlertES .tp-note-box a,
.bm-trusted-person-view #tp_topAlertEN .tp-note-box a {
        color: #93a4ff;
        overflow-wrap: anywhere;
    }

    .bm-trusted-person-view #tp_spanish .nt-timeline,
.bm-trusted-person-view #tp_english .nt-timeline {
        display: grid;
        gap: 18px;
        margin: 0;
        padding: 0;
    }

    .bm-trusted-person-view #tp_spanish .nt-step,
.bm-trusted-person-view #tp_english .nt-step {
        position: relative;
        margin: 0 !important;
        padding: 0;
        border: 1px solid var(--tp-border) !important;
        border-left: 1px solid var(--tp-border) !important;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(36,48,71,.84), rgba(25,36,56,.88));
        box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.035) inset;
        overflow: hidden;
    }

    .bm-trusted-person-view #tp_spanish .nt-step::before,
.bm-trusted-person-view #tp_english .nt-step::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--tp-brand), #38bdf8);
        opacity: .82;
    }

    .bm-trusted-person-view #tp_spanish .nt-step-content,
.bm-trusted-person-view #tp_english .nt-step-content {
        padding: clamp(18px, 2.5vw, 26px);
    }

    .bm-trusted-person-view #tp_spanish .nt-step-content > p.text-white,
.bm-trusted-person-view #tp_spanish .nt-step-content > h5.text-white,
.bm-trusted-person-view #tp_english .nt-step-content > p.text-white,
.bm-trusted-person-view #tp_english .nt-step-content > h5.text-white {
        margin-bottom: 16px !important;
        color: var(--tp-text) !important;
        font-size: 1.04rem !important;
        font-weight: 800;
        letter-spacing: -.018em;
    }

    /* Encabezados de paso orientados a usuarios no técnicos */
    .bm-trusted-person-view #tp_spanish .tp-step-header,
.bm-trusted-person-view #tp_english .tp-step-header {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
    }

    .bm-trusted-person-view #tp_spanish .tp-step-number,
.bm-trusted-person-view #tp_english .tp-step-number {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-width: 68px;
        height: 32px;
        padding: 0 12px;
        border: 1px solid rgba(124,140,255,.34);
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(82,103,255,.23), rgba(56,189,248,.12));
        color: #cbd5ff;
        font-size: .72rem;
        font-weight: 850;
        line-height: 1;
        letter-spacing: .055em;
        text-transform: uppercase;
        box-shadow: 0 8px 18px rgba(0,0,0,.14);
    }

    .bm-trusted-person-view #tp_spanish .tp-step-copy,
.bm-trusted-person-view #tp_english .tp-step-copy {
        min-width: 0;
        flex: 1 1 auto;
    }

    .bm-trusted-person-view #tp_spanish .tp-step-title,
.bm-trusted-person-view #tp_english .tp-step-title {
        margin: 0 0 7px !important;
        color: var(--tp-text) !important;
        font-size: 1.06rem !important;
        font-weight: 850;
        line-height: 1.28;
        letter-spacing: -.02em;
    }

    .bm-trusted-person-view #tp_spanish .tp-step-description,
.bm-trusted-person-view #tp_english .tp-step-description {
        max-width: 720px;
        margin: 0;
        color: var(--tp-muted);
        font-size: .9rem;
        line-height: 1.6;
    }

    .bm-trusted-person-view #tp_spanish .tp-field-label,
.bm-trusted-person-view #tp_english .tp-field-label {
        margin-bottom: 9px;
        color: #d8e0ee !important;
        font-size: .84rem;
        font-weight: 760;
    }

    .bm-trusted-person-view #tp_spanish .btn-selection-card .tp-option-description,
.bm-trusted-person-view #tp_english .btn-selection-card .tp-option-description {
        display: block;
        margin-top: 5px;
        color: var(--tp-muted);
        font-size: .8rem;
        font-weight: 500;
        line-height: 1.48;
    }

    @media (max-width: 575.98px) {
        .bm-trusted-person-view #tp_spanish .tp-step-header,
.bm-trusted-person-view #tp_english .tp-step-header {
            flex-direction: column;
            gap: 10px;
        }

        .bm-trusted-person-view #tp_spanish .tp-step-number,
.bm-trusted-person-view #tp_english .tp-step-number {
            min-width: auto;
        }
    }

    /* Formularios */
    .bm-trusted-person-view #tp_spanish .form-label,
.bm-trusted-person-view #tp_english .form-label {
        margin-bottom: 8px;
        color: var(--tp-muted) !important;
        font-size: .85rem;
        font-weight: 700;
    }

    .bm-trusted-person-view #tp_spanish select,
.bm-trusted-person-view #tp_spanish input[type="text"],
.bm-trusted-person-view #tp_spanish input[type="email"],
.bm-trusted-person-view #tp_spanish input[type="date"],
.bm-trusted-person-view #tp_english select,
.bm-trusted-person-view #tp_english input[type="text"],
.bm-trusted-person-view #tp_english input[type="email"],
.bm-trusted-person-view #tp_english input[type="date"] {
        min-height: 50px;
        padding: 12px 15px;
        border: 1px solid var(--tp-border-strong) !important;
        border-radius: 14px !important;
        background: rgba(15,23,42,.68) !important;
        color: var(--tp-text) !important;
        font-size: .92rem;
        box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .bm-trusted-person-view #tp_spanish select:hover,
.bm-trusted-person-view #tp_spanish input:hover,
.bm-trusted-person-view #tp_english select:hover,
.bm-trusted-person-view #tp_english input:hover {
        border-color: rgba(148,163,184,.40) !important;
        background: rgba(15,23,42,.84) !important;
    }

    .bm-trusted-person-view #tp_spanish select:focus,
.bm-trusted-person-view #tp_spanish input:focus,
.bm-trusted-person-view #tp_english select:focus,
.bm-trusted-person-view #tp_english input:focus {
        outline: none;
        border-color: rgba(82,103,255,.78) !important;
        background: rgba(15,23,42,.92) !important;
        box-shadow: 0 0 0 4px rgba(82,103,255,.13) !important;
    }

    .bm-trusted-person-view #tp_spanish select:disabled,
.bm-trusted-person-view #tp_spanish input:disabled,
.bm-trusted-person-view #tp_english select:disabled,
.bm-trusted-person-view #tp_english input:disabled {
        opacity: .58;
        cursor: not-allowed;
    }

    .bm-trusted-person-view #tp_spanish select option,
.bm-trusted-person-view #tp_english select option {
        background: #172238;
        color: var(--tp-text);
    }

    .bm-trusted-person-view #tp_spanish small.text-muted,
.bm-trusted-person-view #tp_english small.text-muted,
.bm-trusted-person-view #tp_spanish .text-muted,
.bm-trusted-person-view #tp_english .text-muted {
        color: var(--tp-muted) !important;
    }

    .bm-trusted-person-view #tp_spanish .text-warning,
.bm-trusted-person-view #tp_english .text-warning {
        color: var(--tp-warning) !important;
    }

    .bm-trusted-person-view #tp_spanish .btn-primary,
.bm-trusted-person-view #tp_english .btn-primary,
.bm-trusted-person-view #tp_spanish .btn-danger-custom,
.bm-trusted-person-view #tp_english .btn-danger-custom {
        min-height: 48px;
        padding: 12px 18px;
        border: 0 !important;
        border-radius: 14px;
        color: #fff !important;
        font-size: .88rem;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
        box-shadow: 0 12px 28px rgba(0,0,0,.20);
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
    }

    .bm-trusted-person-view #tp_spanish .btn-primary,
.bm-trusted-person-view #tp_english .btn-primary {
        background: linear-gradient(135deg, var(--tp-brand), var(--tp-brand-dark));
    }

    .bm-trusted-person-view #tp_spanish .btn-primary:hover:not(:disabled),
.bm-trusted-person-view #tp_english .btn-primary:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--tp-brand-hover), var(--tp-brand));
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(49,71,221,.32);
    }

    .bm-trusted-person-view #tp_spanish .btn-danger-custom,
.bm-trusted-person-view #tp_english .btn-danger-custom {
        background: linear-gradient(135deg, #ef4444, #c92f2f);
    }

    .bm-trusted-person-view #tp_spanish .btn-danger-custom:hover:not(:disabled),
.bm-trusted-person-view #tp_english .btn-danger-custom:hover:not(:disabled) {
        background: linear-gradient(135deg, #fb625d, #e13b37);
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(239,68,68,.28);
    }

    .bm-trusted-person-view #tp_spanish .btn-primary:disabled,
.bm-trusted-person-view #tp_english .btn-primary:disabled,
.bm-trusted-person-view #tp_spanish .btn-danger-custom:disabled,
.bm-trusted-person-view #tp_english .btn-danger-custom:disabled {
        background: rgba(71,85,105,.58) !important;
        color: rgba(203,213,225,.56) !important;
        box-shadow: none;
        opacity: .76;
    }

    .bm-trusted-person-view #tp_spanish .d-flex.flex-column.flex-md-row.gap-3 > .btn,
.bm-trusted-person-view #tp_english .d-flex.flex-column.flex-md-row.gap-3 > .btn {
        flex: 1 1 0;
    }

    /* Opciones de instructor */
    .bm-trusted-person-view #tp_spanish .btn-selection-card,
.bm-trusted-person-view #tp_english .btn-selection-card {
        position: relative;
        min-height: 66px;
        margin-bottom: 12px;
        padding: 17px 18px 17px 52px;
        border: 1px solid var(--tp-border-strong);
        border-radius: 16px;
        background: rgba(15,23,42,.42);
        color: var(--tp-text);
        box-shadow: 0 10px 24px rgba(0,0,0,.14);
        transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .bm-trusted-person-view #tp_spanish .btn-selection-card::before,
.bm-trusted-person-view #tp_english .btn-selection-card::before {
        content: "";
        position: absolute;
        left: 19px;
        top: 50%;
        width: 18px;
        height: 18px;
        border: 2px solid rgba(148,163,184,.55);
        border-radius: 50%;
        transform: translateY(-50%);
        box-shadow: 0 0 0 4px rgba(148,163,184,.06);
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .bm-trusted-person-view #tp_spanish .btn-selection-card:hover,
.bm-trusted-person-view #tp_english .btn-selection-card:hover {
        transform: translateY(-2px);
        border-color: rgba(82,103,255,.48);
        background: rgba(82,103,255,.08);
        box-shadow: 0 16px 34px rgba(0,0,0,.20);
    }

    .bm-trusted-person-view #tp_spanish .btn-selection-card.active,
.bm-trusted-person-view #tp_english .btn-selection-card.active {
        border-color: rgba(82,103,255,.74);
        background: linear-gradient(90deg, rgba(82,103,255,.18), rgba(82,103,255,.07));
        box-shadow: 0 0 0 4px rgba(82,103,255,.08), 0 16px 34px rgba(0,0,0,.20);
    }

    .bm-trusted-person-view #tp_spanish .btn-selection-card.active::before,
.bm-trusted-person-view #tp_english .btn-selection-card.active::before {
        border: 5px solid var(--tp-brand);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(82,103,255,.15), 0 0 18px rgba(82,103,255,.35);
    }

    .bm-trusted-person-view #tp_spanish .btn-selection-card strong,
.bm-trusted-person-view #tp_english .btn-selection-card strong {
        margin: 0;
        color: var(--tp-text);
        font-weight: 800;
        line-height: 1.35;
    }

    .bm-trusted-person-view #tp_opt1ESContent,
.bm-trusted-person-view #tp_opt2ESContent,
.bm-trusted-person-view #tp_opt1ENContent,
.bm-trusted-person-view #tp_opt2ENContent {
        padding: 20px !important;
        border: 1px solid var(--tp-border) !important;
        border-radius: 16px !important;
        background: rgba(15,23,42,.38) !important;
        box-shadow: 0 12px 28px rgba(0,0,0,.14);
    }

    /* Checkbox cards generados dinámicamente */
    .bm-trusted-person-view #tp_spanish .form-check,
.bm-trusted-person-view #tp_english .form-check {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        margin-bottom: 11px;
        padding: 14px 15px;
        border: 1px solid var(--tp-border);
        border-radius: 14px;
        background: rgba(15,23,42,.36);
        transition: border-color .18s ease, background .18s ease;
    }

    .bm-trusted-person-view #tp_spanish .form-check:hover,
.bm-trusted-person-view #tp_english .form-check:hover {
        border-color: rgba(82,103,255,.36);
        background: rgba(82,103,255,.065);
    }

    .bm-trusted-person-view #tp_spanish .form-check-input,
.bm-trusted-person-view #tp_english .form-check-input {
        width: 18px;
        height: 18px;
        min-height: 18px;
        margin: 2px 0 0;
        padding: 0;
        border-radius: 5px !important;
        background-color: rgba(15,23,42,.76) !important;
        border: 1px solid rgba(148,163,184,.46) !important;
        flex: 0 0 auto;
    }

    .bm-trusted-person-view #tp_spanish .form-check-input:checked,
.bm-trusted-person-view #tp_english .form-check-input:checked {
        background-color: var(--tp-brand) !important;
        border-color: var(--tp-brand) !important;
    }

    .bm-trusted-person-view #tp_spanish .form-check-label,
.bm-trusted-person-view #tp_english .form-check-label {
        color: var(--tp-text) !important;
        font-size: .91rem;
        line-height: 1.45;
    }

    /* Alertas */
    .bm-trusted-person-view #tp_root_.tp-dashboard-active .alert {
        padding: 16px 18px;
        border: 1px solid var(--tp-border) !important;
        border-left-width: 4px !important;
        border-radius: 14px !important;
        color: var(--tp-muted) !important;
        line-height: 1.55;
        box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
    }

    .bm-trusted-person-view #tp_root_.tp-dashboard-active .alert strong,
.bm-trusted-person-view #tp_root_.tp-dashboard-active .alert .alert-heading {
        color: inherit;
    }

    .bm-trusted-person-view #tp_root_.tp-dashboard-active .alert-secondary {
        border-color: var(--tp-border) !important;
        border-left-color: #94a3b8 !important;
        background: rgba(15,23,42,.42) !important;
        color: #cbd5e1 !important;
    }

    .bm-trusted-person-view #tp_root_.tp-dashboard-active .alert-success {
        border-color: rgba(57,182,111,.22) !important;
        border-left-color: var(--tp-success) !important;
        background: var(--tp-success-soft) !important;
        color: #88e9ad !important;
    }

    .bm-trusted-person-view #tp_root_.tp-dashboard-active .alert-warning {
        border-color: rgba(245,158,11,.22) !important;
        border-left-color: var(--tp-warning) !important;
        background: var(--tp-warning-soft) !important;
        color: #ffd36a !important;
    }

    .bm-trusted-person-view #tp_root_.tp-dashboard-active .alert-danger {
        border-color: rgba(255,95,87,.22) !important;
        border-left-color: var(--tp-danger) !important;
        background: var(--tp-danger-soft) !important;
        color: #ff9a93 !important;
    }

    .bm-trusted-person-view #tp_root_.tp-dashboard-active #tp_topAlertES,
.bm-trusted-person-view #tp_root_.tp-dashboard-active #tp_topAlertEN {
        margin: 0 0 22px !important;
    }

    .bm-trusted-person-view #tp_root_.tp-dashboard-active #tp_topAlertES > .alert,
.bm-trusted-person-view #tp_root_.tp-dashboard-active #tp_topAlertEN > .alert {
        margin-bottom: 0;
    }

    /* Video */
    .bm-trusted-person-view #tp_spanish .nt-video-container,
.bm-trusted-person-view #tp_english .nt-video-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        border: 1px solid var(--tp-border);
        border-radius: 18px;
        background: #090e19;
        box-shadow: 0 18px 44px rgba(0,0,0,.28);
    }

    .bm-trusted-person-view #tp_spanish .nt-video-container iframe,
.bm-trusted-person-view #tp_english .nt-video-container iframe {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        border: 0;
    }

    .bm-trusted-person-view #tp_spanish .border-top,
.bm-trusted-person-view #tp_english .border-top {
        border-color: var(--tp-border) !important;
    }

    .bm-trusted-person-view #tp_spanish a,
.bm-trusted-person-view #tp_english a {
        transition: color .18s ease, opacity .18s ease;
    }

    .bm-trusted-person-view #tp_spanish a:hover,
.bm-trusted-person-view #tp_english a:hover {
        color: #b4beff;
    }

    @media (max-width: 991.98px) {
        .bm-trusted-person-view #tp_spanish .tp-menu-card,
.bm-trusted-person-view #tp_english .tp-menu-card {
            padding: 23px;
        }
    }

    @media (max-width: 767.98px) {
        .bm-trusted-person-view #tp_es_trusted,
.bm-trusted-person-view #tp_es_block,
.bm-trusted-person-view #tp_es_instructor,
.bm-trusted-person-view #tp_en_trusted,
.bm-trusted-person-view #tp_en_block,
.bm-trusted-person-view #tp_en_instructor {
            padding: 20px 16px;
            border-radius: 19px;
        }

        .bm-trusted-person-view #tp_spanish .tp-menu-card,
.bm-trusted-person-view #tp_english .tp-menu-card {
            min-height: auto;
            padding: 22px 20px;
            border-radius: 19px;
        }

        .bm-trusted-person-view #tp_spanish .nt-step,
.bm-trusted-person-view #tp_english .nt-step,
.bm-trusted-person-view #tp_spanish .nt-video-container,
.bm-trusted-person-view #tp_english .nt-video-container {
            border-radius: 15px;
        }

        .bm-trusted-person-view #tp_spanish .nt-step-content,
.bm-trusted-person-view #tp_english .nt-step-content {
            padding: 19px 16px;
        }

        .bm-trusted-person-view #tp_spanish .tp-note-box,
.bm-trusted-person-view #tp_english .tp-note-box,
.bm-trusted-person-view #tp_topAlertES .tp-note-box,
.bm-trusted-person-view #tp_topAlertEN .tp-note-box {
            padding: 17px 16px 17px 19px;
            border-radius: 14px;
        }

        .bm-trusted-person-view #tp_spanish .nt-btn-back,
.bm-trusted-person-view #tp_english .nt-btn-back {
            min-height: 40px;
            padding: 9px 13px;
        }

        .bm-trusted-person-view #tp_spanish select,
.bm-trusted-person-view #tp_spanish input[type="text"],
.bm-trusted-person-view #tp_spanish input[type="email"],
.bm-trusted-person-view #tp_spanish input[type="date"],
.bm-trusted-person-view #tp_english select,
.bm-trusted-person-view #tp_english input[type="text"],
.bm-trusted-person-view #tp_english input[type="email"],
.bm-trusted-person-view #tp_english input[type="date"] {
            min-height: 48px;
            font-size: 16px;
        }

        .bm-trusted-person-view #tp_spanish .btn-primary,
.bm-trusted-person-view #tp_english .btn-primary,
.bm-trusted-person-view #tp_spanish .btn-danger-custom,
.bm-trusted-person-view #tp_english .btn-danger-custom {
            width: 100%;
            min-height: 48px;
        }

        .bm-trusted-person-view #tp_spanish .btn-selection-card,
.bm-trusted-person-view #tp_english .btn-selection-card {
            padding: 16px 15px 16px 47px;
        }

        .bm-trusted-person-view #tp_spanish .btn-selection-card::before,
.bm-trusted-person-view #tp_english .btn-selection-card::before {
            left: 17px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bm-trusted-person-view #tp_spanish *,
.bm-trusted-person-view #tp_english * {
            scroll-behavior: auto !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    }


    /* Corrección visual de pasos y estados informativos */
    .bm-trusted-person-view #tp_spanish .nt-timeline > form,
.bm-trusted-person-view #tp_english .nt-timeline > form {
        display: grid;
        gap: 24px;
        width: 100%;
        margin: 0;
    }

    .bm-trusted-person-view #tp_instrSectionES:not(.tp-hidden),
.bm-trusted-person-view #tp_instrSectionEN:not(.tp-hidden) {
        display: grid;
        gap: 22px;
        width: 100%;
    }

    .bm-trusted-person-view #tp_instrSectionES > .tp-selection-summary,
.bm-trusted-person-view #tp_instrSectionEN > .tp-selection-summary {
        margin-bottom: 0 !important;
    }

    .bm-trusted-person-view #tp_spanish .nt-step,
.bm-trusted-person-view #tp_english .nt-step {
        isolation: isolate;
        overflow: visible;
    }

    .bm-trusted-person-view #tp_spanish .nt-timeline::before,
.bm-trusted-person-view #tp_spanish .nt-timeline::after,
.bm-trusted-person-view #tp_english .nt-timeline::before,
.bm-trusted-person-view #tp_english .nt-timeline::after,
.bm-trusted-person-view #tp_spanish .nt-step::before,
.bm-trusted-person-view #tp_spanish .nt-step::after,
.bm-trusted-person-view #tp_english .nt-step::before,
.bm-trusted-person-view #tp_english .nt-step::after {
        display: none !important;
        content: none !important;
    }

    .bm-trusted-person-view #tp_spanish .nt-step + .nt-step,
.bm-trusted-person-view #tp_english .nt-step + .nt-step {
        margin-top: 0 !important;
    }

    .bm-trusted-person-view #tp_spanish .tp-selection-summary,
.bm-trusted-person-view #tp_english .tp-selection-summary {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 74px;
        margin-left: 0;
        margin-right: 0;
        padding: 16px 18px 16px 62px;
        border: 1px solid rgba(148,163,184,.22);
        border-radius: 16px;
        background:
            linear-gradient(135deg, rgba(255,255,255,.035), transparent 55%),
            rgba(15,23,42,.42);
        color: var(--tp-muted);
        text-align: left !important;
        line-height: 1.55;
        box-shadow: 0 10px 24px rgba(0,0,0,.13);
    }

    .bm-trusted-person-view #tp_spanish .tp-selection-summary::before,
.bm-trusted-person-view #tp_english .tp-selection-summary::before {
        position: absolute;
        left: 18px;
        top: 50%;
        display: grid;
        width: 30px;
        height: 30px;
        place-items: center;
        border: 1px solid rgba(148,163,184,.28);
        border-radius: 50%;
        background: rgba(148,163,184,.10);
        color: #b7c1d3;
        font-size: .88rem;
        font-weight: 900;
        line-height: 1;
        transform: translateY(-50%);
    }

    .bm-trusted-person-view #tp_spanish .tp-selection-summary strong,
.bm-trusted-person-view #tp_english .tp-selection-summary strong {
        color: var(--tp-text);
    }

    .bm-trusted-person-view #tp_spanish .tp-summary-placeholder::before,
.bm-trusted-person-view #tp_english .tp-summary-placeholder::before {
        content: "i";
    }

    .bm-trusted-person-view #tp_spanish .tp-summary-empty,
.bm-trusted-person-view #tp_english .tp-summary-empty {
        border-color: rgba(148,163,184,.22);
        background:
            linear-gradient(135deg, rgba(148,163,184,.07), transparent 58%),
            rgba(15,23,42,.45);
    }

    .bm-trusted-person-view #tp_spanish .tp-summary-empty::before,
.bm-trusted-person-view #tp_english .tp-summary-empty::before {
        content: "—";
        background: rgba(148,163,184,.11);
        color: #c3cbd8;
    }

    .bm-trusted-person-view #tp_spanish .tp-summary-active,
.bm-trusted-person-view #tp_english .tp-summary-active {
        border-color: rgba(52,211,153,.28);
        background:
            linear-gradient(135deg, rgba(52,211,153,.115), transparent 60%),
            rgba(15,23,42,.48);
    }

    .bm-trusted-person-view #tp_spanish .tp-summary-active::before,
.bm-trusted-person-view #tp_english .tp-summary-active::before {
        content: "✓";
        border-color: rgba(52,211,153,.38);
        background: rgba(52,211,153,.14);
        color: #6ee7b7;
    }

    .bm-trusted-person-view #tp_spanish .tp-summary-warning,
.bm-trusted-person-view #tp_english .tp-summary-warning {
        border-color: rgba(251,191,36,.30);
        background:
            linear-gradient(135deg, rgba(251,191,36,.11), transparent 60%),
            rgba(15,23,42,.48);
    }

    .bm-trusted-person-view #tp_spanish .tp-summary-warning::before,
.bm-trusted-person-view #tp_english .tp-summary-warning::before {
        content: "!";
        border-color: rgba(251,191,36,.38);
        background: rgba(251,191,36,.14);
        color: #fcd34d;
    }

    .bm-trusted-person-view #tp_spanish .tp-selection-summary small,
.bm-trusted-person-view #tp_english .tp-selection-summary small,
.bm-trusted-person-view #tp_spanish .tp-selection-summary .text-muted,
.bm-trusted-person-view #tp_english .tp-selection-summary .text-muted {
        color: var(--tp-muted) !important;
    }

    @media (max-width: 767.98px) {
        .bm-trusted-person-view #tp_spanish .nt-timeline > form,
.bm-trusted-person-view #tp_english .nt-timeline > form,
.bm-trusted-person-view #tp_instrSectionES:not(.tp-hidden),
.bm-trusted-person-view #tp_instrSectionEN:not(.tp-hidden) {
            gap: 18px;
        }

        .bm-trusted-person-view #tp_spanish .tp-selection-summary,
.bm-trusted-person-view #tp_english .tp-selection-summary {
            min-height: 68px;
            padding: 15px 15px 15px 54px;
            border-radius: 14px;
        }

        .bm-trusted-person-view #tp_spanish .tp-selection-summary::before,
.bm-trusted-person-view #tp_english .tp-selection-summary::before {
            left: 15px;
            width: 27px;
            height: 27px;
        }
    }

.bm-trusted-person-view .tp-option-panel {
    background: rgba(255,255,255,.02);
    border-color: var(--nt-border) !important;
}
.bm-trusted-person-view .tp-border-top {
    border-color: var(--nt-border) !important;
}
.bm-mac-binding-view .bm-js-required-notice {
    margin: 20px auto;
    max-width: 900px;
    padding: 16px;
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 12px;
    background: rgba(245, 158, 11, .08);
    color: var(--text-primary, #f8fafc);
}
.bm-trusted-person-view .tp-step-no-line {
    border-left-color: transparent !important;
}

/* ==================== COMPONENTE REUTILIZABLE ==================== */
/* Origen: templates/add_Emotional_Machine_Emotional_Manager.php:550 */
/* ==========================================================
   COMPUTADORAS SECUNDARIAS · Interfaz directa para crear y gestionar
   Mantiene intacta la lógica PHP y simplifica únicamente la UI.
   ========================================================== */
.bm-add-mach-wrap {
    --bm-bg: rgba(15, 23, 42, .42);
    --bm-panel: rgba(30, 41, 59, .72);
    --bm-panel-strong: rgba(30, 41, 59, .92);
    --bm-text: var(--text-primary, #f8fafc);
    --bm-text-2: var(--text-secondary, #a5b4cf);
    --bm-text-3: var(--text-light, #7f8da9);
    --bm-brand: var(--brand-primary, #5267ff);
    --bm-brand-hover: var(--brand-primary-hover, #6f82ff);
    --bm-brand-dark: var(--brand-primary-dark, #3147dd);
    --bm-border: var(--border-subtle, rgba(148, 163, 184, .16));
    --bm-border-strong: var(--border-strong, rgba(148, 163, 184, .28));
    --bm-success: var(--success-text, #55d989);
    --bm-success-soft: var(--success-soft, rgba(57, 182, 111, .16));
    --bm-warning: var(--warning-text, #fbbf24);
    --bm-warning-soft: var(--warning-soft, rgba(245, 158, 11, .16));
    --bm-danger: var(--danger-text, #ff7a70);
    --bm-danger-soft: var(--danger-soft, rgba(255, 95, 87, .16));
    color: var(--bm-text);
    font-family: var(--font-main, 'Plus Jakarta Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.bm-add-mach-alert {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--bm-border);
    border-radius: 14px;
    background: var(--bm-bg);
    color: var(--bm-text-2);
    font-size: .88rem;
    line-height: 1.5;
}

.bm-add-mach-alert strong {
    color: var(--bm-text);
    font-weight: 900;
}

.bm-add-mach-alert.ok {
    color: #bbf7d0;
    background: var(--bm-success-soft);
    border-color: rgba(57, 182, 111, .25);
}

.bm-add-mach-alert.err {
    color: #fecaca;
    background: var(--bm-danger-soft);
    border-color: rgba(255, 95, 87, .25);
}

.bm-add-mach-alert.warn {
    color: #fde68a;
    background: var(--bm-warning-soft);
    border-color: rgba(245, 158, 11, .25);
}

.bm-add-mach-alert code {
    color: #e2e8f0;
    background: rgba(15, 23, 42, .58);
    border: 1px solid var(--bm-border);
    padding: 3px 7px;
    border-radius: 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.bm-add-mach-page {
    overflow: hidden;
    border: 1px solid var(--bm-border);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(24, 34, 54, .98), rgba(15, 23, 42, .96));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .04) inset;
}

.bm-add-mach-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-bottom: 1px solid var(--bm-border);
    background: rgba(30, 41, 59, .42);
}

.bm-add-mach-hero-copy {
    min-width: 0;
}

.bm-add-mach-title {
    margin: 0 0 7px;
    color: var(--bm-text);
    font-size: clamp(1.35rem, 2.3vw, 1.85rem);
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: -.045em;
}

.bm-add-mach-desc {
    max-width: 760px;
    margin: 0;
    color: var(--bm-text-2);
    font-size: .91rem;
    line-height: 1.55;
}

.bm-add-mach-desc strong {
    color: var(--bm-text);
    font-weight: 900;
}

.bm-add-mach-create-form {
    flex-shrink: 0;
}

.bm-add-mach-btn,
.bm-add-mach-action {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    padding: 10px 16px;
    border: 1px solid transparent;
    text-decoration: none !important;
    font-size: .84rem;
    font-weight: 900;
    line-height: 1.15;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.bm-add-mach-btn {
    color: #fff;
    background: linear-gradient(135deg, var(--bm-brand), var(--bm-brand-dark));
    box-shadow: 0 13px 27px rgba(82, 103, 255, .20);
    white-space: nowrap;
}

.bm-add-mach-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--bm-brand-hover), var(--bm-brand));
    box-shadow: 0 17px 32px rgba(82, 103, 255, .27);
}

.bm-add-mach-btn:disabled {
    opacity: .52;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.bm-add-mach-btn svg,
.bm-add-mach-action svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.bm-add-mach-body {
    padding: 22px 24px 25px;
}

.bm-add-mach-concept {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: flex-start;
    margin: 0 0 22px;
    padding: 15px 16px;
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, .20);
    background: rgba(56, 189, 248, .07);
}

.bm-add-mach-concept-icon {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #b9edff;
    background: rgba(56, 189, 248, .12);
    border: 1px solid rgba(56, 189, 248, .18);
}

.bm-add-mach-concept-icon svg {
    width: 18px;
    height: 18px;
}

.bm-add-mach-concept-title {
    margin: 0 0 4px;
    color: var(--bm-text);
    font-size: .91rem;
    font-weight: 950;
    letter-spacing: -.015em;
}

.bm-add-mach-concept-text {
    margin: 0;
    color: var(--bm-text-2);
    font-size: .82rem;
    line-height: 1.52;
}

.bm-add-mach-concept-text strong {
    color: var(--bm-text);
    font-weight: 900;
}

.bm-add-mach-process {
    margin: 0 0 24px;
}

.bm-add-mach-process-title {
    margin: 0 0 11px;
    color: var(--bm-text);
    font-size: .96rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.bm-add-mach-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.bm-add-mach-process-step {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--bm-border);
    border-radius: 13px;
    background: rgba(15, 23, 42, .30);
}

.bm-add-mach-process-number {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border-radius: 9px;
    color: #dbe4ff;
    background: rgba(82, 103, 255, .18);
    font-size: .75rem;
    font-weight: 950;
}

.bm-add-mach-process-step strong {
    display: block;
    margin-bottom: 4px;
    color: var(--bm-text);
    font-size: .82rem;
    font-weight: 950;
    line-height: 1.25;
}

.bm-add-mach-process-step span:last-child {
    display: block;
    color: var(--bm-text-3);
    font-size: .73rem;
    line-height: 1.42;
}

.bm-add-mach-section + .bm-add-mach-section {
    margin-top: 25px;
    padding-top: 24px;
    border-top: 1px solid var(--bm-border);
}

.bm-add-mach-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.bm-add-mach-section-title {
    margin: 0;
    color: var(--bm-text);
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.bm-add-mach-section-note {
    margin: 4px 0 0;
    color: var(--bm-text-3);
    font-size: .78rem;
    line-height: 1.4;
}

.bm-add-mach-count {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(82, 103, 255, .12);
    border: 1px solid rgba(82, 103, 255, .22);
    color: #dbe4ff;
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
}

.bm-add-mach-search {
    position: relative;
    width: min(100%, 360px);
    margin-bottom: 13px;
}

.bm-add-mach-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    color: var(--bm-text-3);
    pointer-events: none;
}

.bm-add-mach-search input {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px 9px 37px;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    outline: none;
    background: rgba(15, 23, 42, .43);
    color: var(--bm-text);
    font-size: .81rem;
    font-weight: 700;
}

.bm-add-mach-search input:focus {
    border-color: rgba(82, 103, 255, .40);
    box-shadow: 0 0 0 4px rgba(82, 103, 255, .09);
}

.bm-add-mach-search input::placeholder {
    color: var(--bm-text-3);
}

.bm-add-mach-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 11px;
}

.bm-add-mach-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--bm-border);
    border-radius: 15px;
    background: rgba(30, 41, 59, .52);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10), 0 1px 0 rgba(255,255,255,.03) inset;
}

.bm-add-mach-card.is-hidden-by-search {
    display: none;
}

.bm-add-mach-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.bm-add-mach-card-main {
    min-width: 0;
}

.bm-add-mach-card-title {
    margin: 0 0 6px;
    color: var(--bm-text);
    font-size: .91rem;
    font-weight: 950;
    line-height: 1.2;
}

.bm-add-mach-machine {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bm-text-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .69rem;
    line-height: 1.3;
}

.bm-add-mach-card-guidance {
    display: grid;
    gap: 9px;
}

.bm-add-mach-state-note,
.bm-add-mach-next-step {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    background: rgba(15, 23, 42, .30);
}

.bm-add-mach-guidance-icon {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.bm-add-mach-guidance-icon svg {
    width: 16px;
    height: 16px;
}

.bm-add-mach-guidance-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.bm-add-mach-guidance-copy small {
    color: inherit;
    font-size: .57rem;
    font-weight: 950;
    letter-spacing: .075em;
    line-height: 1.2;
    opacity: .78;
    text-transform: uppercase;
}

.bm-add-mach-guidance-copy strong {
    color: var(--bm-text);
    font-size: .73rem;
    font-weight: 850;
    line-height: 1.46;
    overflow-wrap: anywhere;
}

.bm-add-mach-state-note.is-pending {
    color: var(--bm-warning);
    border-color: rgba(245, 158, 11, .22);
    background: rgba(245, 158, 11, .075);
}

.bm-add-mach-state-note.is-pending .bm-add-mach-guidance-icon {
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, .23);
    background: rgba(245, 158, 11, .13);
}

.bm-add-mach-state-note.is-linked {
    color: var(--bm-success);
    border-color: rgba(57, 182, 111, .20);
    background: rgba(57, 182, 111, .065);
}

.bm-add-mach-state-note.is-linked .bm-add-mach-guidance-icon {
    color: #bbf7d0;
    border: 1px solid rgba(57, 182, 111, .22);
    background: rgba(57, 182, 111, .12);
}

.bm-add-mach-next-step {
    color: #b9c6ff;
    border-color: rgba(82, 103, 255, .22);
    background: linear-gradient(135deg, rgba(82, 103, 255, .105), rgba(56, 189, 248, .045));
}

.bm-add-mach-next-step .bm-add-mach-guidance-icon {
    color: #dbe4ff;
    border: 1px solid rgba(82, 103, 255, .24);
    background: rgba(82, 103, 255, .15);
}

.bm-add-mach-next-step.is-ready {
    color: var(--bm-success);
    border-color: rgba(57, 182, 111, .22);
    background: linear-gradient(135deg, rgba(57, 182, 111, .09), rgba(56, 189, 248, .04));
}

.bm-add-mach-next-step.is-ready .bm-add-mach-guidance-icon {
    color: #bbf7d0;
    border-color: rgba(57, 182, 111, .24);
    background: rgba(57, 182, 111, .13);
}

.bm-add-mach-status {
    flex-shrink: 0;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .59rem;
    font-weight: 950;
}

.bm-add-mach-status.ready {
    color: var(--bm-success);
    background: var(--bm-success-soft);
    border: 1px solid rgba(57, 182, 111, .20);
}

.bm-add-mach-status.linked {
    color: #aebcff;
    background: rgba(82, 103, 255, .14);
    border: 1px solid rgba(82, 103, 255, .24);
}

.bm-add-mach-status.pending {
    color: var(--bm-warning);
    background: var(--bm-warning-soft);
    border: 1px solid rgba(245, 158, 11, .20);
}

.bm-add-mach-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: auto;
}

.bm-add-mach-card-actions .bm-add-mach-action {
    width: 100%;
    min-width: 0;
}

.bm-add-mach-action {
    min-height: 37px;
    padding: 8px 10px;
    color: var(--bm-text-2) !important;
    background: rgba(15, 23, 42, .40);
    border-color: var(--bm-border);
    text-align: center;
    white-space: normal;
    font-size: .72rem;
}

.bm-add-mach-action:hover {
    color: var(--bm-text) !important;
    transform: translateY(-1px);
    border-color: rgba(82, 103, 255, .34);
    background: rgba(82, 103, 255, .11);
}

.bm-add-mach-action.primary {
    color: #fff !important;
    border-color: transparent;
    background: linear-gradient(135deg, var(--bm-brand), var(--bm-brand-dark));
    box-shadow: 0 10px 20px rgba(82, 103, 255, .17);
}

.bm-add-mach-action.primary:hover {
    background: linear-gradient(135deg, var(--bm-brand-hover), var(--bm-brand));
}

.bm-add-mach-empty,
.bm-add-mach-empty-search,
.bm-add-mach-tools-empty {
    padding: 17px;
    border: 1px dashed var(--bm-border-strong);
    border-radius: 14px;
    background: rgba(15, 23, 42, .27);
    color: var(--bm-text-2);
    font-size: .84rem;
    line-height: 1.5;
}

.bm-add-mach-empty strong {
    display: block;
    margin-bottom: 3px;
    color: var(--bm-text);
    font-weight: 900;
}

.bm-add-mach-empty-search {
    display: none;
    margin-top: 11px;
}

.bm-add-mach-list-wrap.is-filter-empty .bm-add-mach-empty-search {
    display: block;
}

.bm-add-mach-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.bm-add-mach-tool {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--bm-border);
    border-radius: 11px;
    background: rgba(15, 23, 42, .36);
    color: var(--bm-text-2) !important;
    text-decoration: none !important;
    font-size: .78rem;
    font-weight: 850;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.bm-add-mach-tool:hover {
    color: var(--bm-text) !important;
    transform: translateY(-1px);
    border-color: rgba(82, 103, 255, .34);
    background: rgba(82, 103, 255, .10);
}

.bm-add-mach-tool:disabled {
    opacity: .58;
    cursor: not-allowed;
    transform: none;
}

.bm-add-mach-tool svg {
    width: 16px;
    height: 16px;
}


.bm-machine-confirm[hidden] {
    display: none !important;
}

.bm-machine-confirm {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.bm-machine-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .78);
    backdrop-filter: blur(6px);
}

.bm-machine-confirm-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    border: 1px solid rgba(245, 158, 11, .34);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(30, 41, 59, .99), rgba(15, 23, 42, .99));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
    overflow: hidden;
}

.bm-machine-confirm-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 20px 20px 15px;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.bm-machine-confirm-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #111827;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.bm-machine-confirm-icon svg {
    width: 22px;
    height: 22px;
}

.bm-machine-confirm-title {
    margin: 0 0 5px;
    color: var(--bm-text);
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.bm-machine-confirm-subtitle {
    margin: 0;
    color: var(--bm-text-2);
    font-size: .84rem;
    line-height: 1.5;
}

.bm-machine-confirm-body {
    padding: 18px 20px;
}

.bm-machine-confirm-message {
    margin: 0;
    color: var(--bm-text);
    font-size: .91rem;
    line-height: 1.62;
}

.bm-machine-confirm-warning {
    margin: 14px 0 0;
    padding: 12px 13px;
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: 13px;
    background: rgba(245, 158, 11, .10);
    color: #fde68a;
    font-size: .81rem;
    line-height: 1.5;
}

.bm-machine-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 0 20px 20px;
}

.bm-machine-confirm-button {
    min-height: 41px;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid var(--bm-border);
    background: rgba(15, 23, 42, .45);
    color: var(--bm-text-2);
    font-size: .8rem;
    font-weight: 900;
    cursor: pointer;
}

.bm-machine-confirm-button.primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--bm-brand), var(--bm-brand-dark));
    color: #ffffff;
}

.bm-machine-confirm-button:hover {
    color: var(--bm-text);
    border-color: rgba(82, 103, 255, .34);
}

.bm-machine-confirm-button.primary:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--bm-brand-hover), var(--bm-brand));
}

body.bm-machine-confirm-open {
    overflow: hidden;
}


@media (max-width: 900px) {
    .bm-add-mach-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .bm-add-mach-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: 20px;
    }

    .bm-add-mach-create-form,
    .bm-add-mach-btn {
        width: 100%;
    }

    .bm-add-mach-body {
        padding: 19px 20px 22px;
    }

    .bm-add-mach-section-head {
        align-items: flex-start;
    }
}

@media (max-width: 440px) {
    .bm-add-mach-state-note,
    .bm-add-mach-next-step {
        padding: 10px;
    }

    .bm-add-mach-guidance-icon {
        width: 29px;
        height: 29px;
    }

    .bm-add-mach-process-grid {
        grid-template-columns: 1fr;
    }

    .bm-add-mach-concept {
        grid-template-columns: 1fr;
    }

    .bm-add-mach-hero,
    .bm-add-mach-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .bm-add-mach-card-actions {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   MODAL DE PROCESO · reutiliza los templates de stepbystep.php
   ========================================================== */
.bm-step-modal[hidden] {
    display: none !important;
}

.bm-step-modal {
    position: fixed;
    inset: 0;
    z-index: 21000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.bm-step-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .84);
    backdrop-filter: blur(7px);
}

.bm-step-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 980px);
    max-height: min(92vh, 940px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(30, 41, 59, .995), rgba(15, 23, 42, .995));
    box-shadow: 0 36px 110px rgba(0, 0, 0, .62);
}

.bm-step-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
    background: rgba(15, 23, 42, .30);
}

.bm-step-modal-kicker {
    display: block;
    margin-bottom: 4px;
    color: #9ee7ff;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.bm-step-modal-title {
    margin: 0;
    color: var(--bm-text);
    font-size: 1.12rem;
    font-weight: 950;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.bm-step-modal-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bm-border);
    border-radius: 11px;
    background: rgba(15, 23, 42, .45);
    color: var(--bm-text-2);
    cursor: pointer;
}

.bm-step-modal-close:hover {
    color: var(--bm-text);
    border-color: rgba(82, 103, 255, .34);
    background: rgba(82, 103, 255, .10);
}

.bm-step-modal-close svg {
    width: 18px;
    height: 18px;
}

.bm-step-modal-content {
    min-height: 260px;
    overflow: auto;
    padding: 20px;
    color: var(--bm-text);
    overscroll-behavior: contain;
}

.bm-step-modal-content > .card-style {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.bm-step-modal-content .alert {
    border-radius: 12px;
}

.bm-step-modal-loading,
.bm-step-modal-error {
    min-height: 230px;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: var(--bm-text-2);
    font-size: .88rem;
    line-height: 1.55;
}

.bm-step-modal-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 13px;
    border: 3px solid rgba(148, 163, 184, .20);
    border-top-color: var(--bm-brand);
    border-radius: 999px;
    animation: bm-ff7f481d75-bm-step-spin .8s linear infinite;
}

@keyframes bm-ff7f481d75-bm-step-spin {
    to { transform: rotate(360deg); }
}

.bm-step-modal-error strong {
    display: block;
    margin-bottom: 5px;
    color: var(--bm-danger);
    font-weight: 950;
}

.bm-step-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 17px;
    border-top: 1px solid rgba(148, 163, 184, .15);
    background: rgba(15, 23, 42, .35);
}

.bm-step-modal-foot-note {
    color: var(--bm-text-3);
    font-size: .73rem;
    line-height: 1.35;
}

.bm-step-modal-foot-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.bm-step-modal-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid var(--bm-border);
    border-radius: 11px;
    background: rgba(15, 23, 42, .46);
    color: var(--bm-text-2);
    font-size: .79rem;
    font-weight: 900;
    cursor: pointer;
}

.bm-step-modal-button:hover {
    color: var(--bm-text);
    border-color: rgba(82, 103, 255, .34);
    background: rgba(82, 103, 255, .10);
}

.bm-step-modal-button.primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--bm-brand), var(--bm-brand-dark));
    box-shadow: 0 11px 22px rgba(82, 103, 255, .18);
}

.bm-step-modal-button.primary:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--bm-brand-hover), var(--bm-brand));
}

.bm-step-modal-button[hidden] {
    display: none !important;
}

body.bm-step-modal-open {
    overflow: hidden;
}

/* ==========================================================
   AVISO DE PÁGINA EN CONSTRUCCIÓN · bloqueo temporal total
   ========================================================== */
.bm-construction-lock {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 6, 23, .88);
    backdrop-filter: blur(10px);
}

.bm-construction-dialog {
    position: relative;
    width: min(100%, 610px);
    overflow: hidden;
    border: 1px solid rgba(245, 158, 11, .38);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(30, 41, 59, .995), rgba(15, 23, 42, .995));
    box-shadow: 0 38px 120px rgba(0, 0, 0, .68);
}

.bm-construction-accent {
    height: 6px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
}

.bm-construction-content {
    padding: 28px;
}

.bm-construction-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: 18px;
    color: #fde68a;
    background: rgba(245, 158, 11, .12);
}

.bm-construction-icon svg {
    width: 29px;
    height: 29px;
}

.bm-construction-kicker {
    display: block;
    margin-bottom: 7px;
    color: #fbbf24;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.bm-construction-title {
    margin: 0 0 12px;
    color: var(--bm-text, #f8fafc);
    font-size: clamp(1.45rem, 4vw, 2rem);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -.04em;
}

.bm-construction-text {
    margin: 0;
    color: var(--bm-text-2, #cbd5e1);
    font-size: .95rem;
    line-height: 1.65;
}

.bm-construction-text strong {
    color: var(--bm-text, #f8fafc);
}

.bm-construction-notice {
    margin-top: 18px;
    padding: 14px 15px;
    border: 1px solid rgba(245, 158, 11, .26);
    border-radius: 14px;
    background: rgba(245, 158, 11, .09);
    color: #fde68a;
    font-size: .84rem;
    line-height: 1.55;
}

.bm-construction-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 28px 28px;
}

.bm-construction-developer-form {
    margin: 0;
}

.bm-construction-back,
.bm-construction-developer {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 17px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 12px;
    background: rgba(15, 23, 42, .55);
    color: #e2e8f0 !important;
    text-decoration: none !important;
    font-size: .82rem;
    font-weight: 900;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.bm-construction-developer {
    appearance: none;
    cursor: pointer;
    border-color: rgba(245, 158, 11, .30);
    background: rgba(245, 158, 11, .08);
    color: #fde68a !important;
}

.bm-construction-back:hover,
.bm-construction-developer:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 158, 11, .38);
    background: rgba(245, 158, 11, .10);
}

.bm-construction-back svg,
.bm-construction-developer svg {
    width: 17px;
    height: 17px;
}

.bm-construction-developer-note {
    width: 100%;
    margin: 2px 0 0;
    color: rgba(203, 213, 225, .66);
    font-size: .72rem;
    line-height: 1.4;
    text-align: right;
}

body.bm-construction-open {
    overflow: hidden !important;
}

@media (max-width: 640px) {
    .bm-construction-lock {
        padding: 12px;
    }

    .bm-construction-content {
        padding: 23px 20px 20px;
    }

    .bm-construction-actions {
        padding: 0 20px 22px;
    }

    .bm-construction-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .bm-construction-developer-form,
    .bm-construction-back,
    .bm-construction-developer {
        width: 100%;
    }

    .bm-construction-developer-note {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .bm-step-modal {
        padding: 8px;
    }

    .bm-step-modal-dialog {
        width: 100%;
        max-height: 96vh;
        border-radius: 16px;
    }

    .bm-step-modal-head,
    .bm-step-modal-content,
    .bm-step-modal-foot {
        padding-left: 15px;
        padding-right: 15px;
    }

    .bm-step-modal-foot {
        align-items: stretch;
        flex-direction: column;
    }

    .bm-step-modal-foot-actions,
    .bm-step-modal-button {
        width: 100%;
    }
}



/* ==========================================================
   UX GUIADA · flujo secuencial, tarjetas dinámicas y responsive
   ========================================================== */
.bm-add-mach-hidden-form {
    display: none !important;
}

.bm-add-mach-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: clamp(22px, 4vw, 34px);
    background:
        radial-gradient(circle at 88% 20%, rgba(82, 103, 255, .18), transparent 30%),
        linear-gradient(135deg, rgba(30, 41, 59, .76), rgba(15, 23, 42, .46));
}

.bm-add-mach-eyebrow,
.bm-add-mach-process-kicker,
.bm-add-mach-flow-label {
    display: block;
    color: #aebcff;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.bm-add-mach-eyebrow {
    margin-bottom: 9px;
}

.bm-add-mach-hero-badge {
    width: 112px;
    min-height: 94px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 1px solid rgba(82, 103, 255, .28);
    border-radius: 22px;
    background: rgba(82, 103, 255, .10);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255,255,255,.05);
}

.bm-add-mach-hero-badge span {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 950;
    line-height: 1;
}

.bm-add-mach-hero-badge small {
    color: var(--bm-text-2);
    font-size: .68rem;
    font-weight: 850;
}

.bm-add-mach-process {
    margin: 0 0 28px;
    padding: clamp(17px, 3vw, 24px);
    border: 1px solid var(--bm-border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(30, 41, 59, .42), rgba(15, 23, 42, .25));
}

.bm-add-mach-process-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.bm-add-mach-process-kicker {
    margin-bottom: 6px;
}

.bm-add-mach-process-title {
    margin-bottom: 6px;
    font-size: 1.08rem;
}

.bm-add-mach-process-intro {
    max-width: 760px;
    margin: 0;
    color: var(--bm-text-2);
    font-size: .82rem;
    line-height: 1.55;
}

.bm-add-mach-flow {
    position: relative;
    display: grid;
    gap: 10px;
}

.bm-add-mach-flow::before {
    content: '';
    position: absolute;
    top: 29px;
    bottom: 29px;
    left: 22px;
    width: 2px;
    background: linear-gradient(180deg, rgba(82, 103, 255, .72), rgba(82, 103, 255, .12));
}

.bm-add-mach-flow-step {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 15px 14px 0;
    border: 1px solid transparent;
    border-radius: 15px;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.bm-add-mach-flow-step:hover {
    transform: translateX(3px);
    border-color: var(--bm-border);
    background: rgba(15, 23, 42, .28);
}

.bm-add-mach-flow-step.is-action {
    padding-right: 17px;
    border-color: rgba(82, 103, 255, .28);
    background: rgba(82, 103, 255, .08);
}

.bm-add-mach-flow-marker {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.bm-add-mach-flow-marker span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #172238;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--bm-brand), var(--bm-brand-dark));
    box-shadow: 0 0 0 1px rgba(82, 103, 255, .35), 0 8px 20px rgba(82, 103, 255, .22);
    font-size: .76rem;
    font-weight: 950;
}

.bm-add-mach-flow-step.is-final .bm-add-mach-flow-marker span {
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .32), 0 8px 20px rgba(34, 197, 94, .18);
}

.bm-add-mach-flow-content {
    min-width: 0;
    padding-top: 2px;
}

.bm-add-mach-flow-label {
    margin-bottom: 4px;
    color: var(--bm-text-3);
    font-size: .6rem;
}

.bm-add-mach-flow-content h4 {
    margin: 0 0 5px;
    color: var(--bm-text);
    font-size: .91rem;
    font-weight: 950;
}

.bm-add-mach-flow-content p {
    margin: 0;
    color: var(--bm-text-2);
    font-size: .78rem;
    line-height: 1.5;
}

.bm-add-mach-flow-content p strong {
    color: var(--bm-text);
    font-weight: 900;
}

.bm-add-mach-flow-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 13px;
    margin-top: 13px;
}

.bm-add-mach-flow-action > span {
    color: var(--bm-text-3);
    font-size: .7rem;
    line-height: 1.4;
}

.bm-add-mach-final-warning {
    display: grid;
    gap: 5px;
    margin-top: 13px;
    padding: 13px 14px;
    border: 1px solid rgba(248, 113, 113, .32);
    border-radius: 13px;
    background: rgba(127, 29, 29, .18);
    color: #fecaca;
    font-size: .76rem;
    line-height: 1.5;
}

.bm-add-mach-final-warning strong {
    color: #ffffff;
    font-size: .8rem;
    font-weight: 950;
}

.bm-add-mach-final-warning b {
    color: #ffffff;
    font-weight: 950;
}

.bm-add-mach-card {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.bm-add-mach-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, rgba(82, 103, 255, .95), rgba(56, 189, 248, .65));
    opacity: .72;
}

.bm-add-mach-card:hover {
    transform: translateY(-2px);
    border-color: rgba(82, 103, 255, .28);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .16), 0 1px 0 rgba(255,255,255,.04) inset;
}

.bm-add-mach-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18px, .38fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    background: rgba(15, 23, 42, .28);
}

.bm-add-mach-progress span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--bm-text-3);
    font-size: .62rem;
    font-weight: 850;
}

.bm-add-mach-progress em {
    min-width: 0;
    display: grid;
    gap: 1px;
    color: inherit;
    font-style: normal;
    line-height: 1.18;
    white-space: normal;
}

.bm-add-mach-progress em small {
    color: inherit;
    font-size: .52rem;
    font-weight: 950;
    letter-spacing: .055em;
    line-height: 1.1;
    opacity: .76;
    text-transform: uppercase;
}

.bm-add-mach-progress i {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bm-border-strong);
    border-radius: 999px;
    color: var(--bm-text-3);
    background: rgba(15, 23, 42, .48);
    font-size: .58rem;
    font-style: normal;
    font-weight: 950;
}

.bm-add-mach-progress b {
    height: 2px;
    border-radius: 999px;
    background: var(--bm-border-strong);
}

.bm-add-mach-progress span.is-done {
    color: var(--bm-success);
}

.bm-add-mach-progress span.is-done i {
    border-color: rgba(57, 182, 111, .35);
    color: #dcfce7;
    background: rgba(57, 182, 111, .16);
}

.bm-add-mach-progress span.is-current {
    color: var(--bm-warning);
}

.bm-add-mach-progress span.is-current i {
    border-color: rgba(245, 158, 11, .35);
    color: #fde68a;
    background: rgba(245, 158, 11, .14);
}

.bm-add-mach-card-meta {
    display: grid;
    gap: 5px;
    padding: 10px 11px;
    border-radius: 11px;
    background: rgba(15, 23, 42, .23);
    color: var(--bm-text-3);
    font-size: .68rem;
    line-height: 1.42;
}

.bm-add-mach-card-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.bm-add-mach-card-meta strong {
    color: var(--bm-text-2);
    font-weight: 900;
}

.bm-machine-confirm.is-busy .bm-machine-confirm-button {
    opacity: .58;
    pointer-events: none;
}

@media (max-width: 760px) {
    .bm-add-mach-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .bm-add-mach-hero-badge {
        width: 100%;
        min-height: 64px;
        grid-template-columns: auto auto;
        place-content: center;
        gap: 8px;
        border-radius: 15px;
    }

    .bm-add-mach-hero-badge span {
        font-size: 1.35rem;
    }

    .bm-add-mach-flow-action,
    .bm-add-mach-flow-action .bm-add-mach-btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .bm-add-mach-process {
        padding: 15px 12px;
    }

    .bm-add-mach-flow::before {
        left: 18px;
    }

    .bm-add-mach-flow-step {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding-right: 8px;
    }

    .bm-add-mach-flow-marker span {
        width: 30px;
        height: 30px;
        border-width: 3px;
    }

    .bm-add-mach-progress {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 5px;
    }

    .bm-add-mach-progress b {
        width: 2px;
        height: 8px;
        margin-left: 9px;
    }

    .bm-add-mach-progress span {
        justify-content: flex-start;
    }

    .bm-add-mach-progress span {
        white-space: normal;
    }

    .bm-machine-confirm-actions {
        flex-direction: column-reverse;
    }

    .bm-machine-confirm-button {
        width: 100%;
    }
}


/* Nombre amigable de computadora: compacto, editable y acorde al tema actual. */
.bm-add-mach-create-inline {
    width: min(100%, 660px);
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.bm-add-mach-create-inline label,
.bm-add-mach-name-form label {
    color: var(--bm-text);
    font-size: .76rem;
    font-weight: 900;
}

.bm-add-mach-create-row,
.bm-add-mach-name-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}

.bm-add-mach-create-inline input,
.bm-add-mach-name-form input {
    width: 100%;
    min-height: 43px;
    border: 1px solid var(--bm-border-strong);
    border-radius: 11px;
    background: rgba(15, 23, 42, .56);
    color: var(--bm-text);
    padding: 10px 12px;
    font: inherit;
    font-size: .82rem;
    outline: none;
}

.bm-add-mach-create-inline input:focus,
.bm-add-mach-name-form input:focus {
    border-color: rgba(111, 130, 255, .72);
    box-shadow: 0 0 0 3px rgba(82, 103, 255, .14);
}

.bm-add-mach-create-inline small,
.bm-add-mach-name-form small {
    color: var(--bm-text-3);
    font-size: .69rem;
    line-height: 1.4;
}

.bm-add-mach-name-editor {
    margin-top: 12px;
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    background: rgba(15, 23, 42, .34);
    overflow: hidden;
}

.bm-add-mach-name-editor[open] {
    border-color: rgba(82, 103, 255, .32);
}

.bm-add-mach-name-editor summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    color: var(--bm-text-2);
    font-size: .74rem;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}

.bm-add-mach-name-editor summary::-webkit-details-marker {
    display: none;
}

.bm-add-mach-name-editor summary span {
    color: #aebcff;
    font-size: .68rem;
}

.bm-add-mach-name-form {
    display: grid;
    gap: 7px;
    padding: 0 12px 12px;
}

.bm-add-mach-name-save {
    min-height: 40px;
    border: 1px solid rgba(82, 103, 255, .42);
    border-radius: 10px;
    background: rgba(82, 103, 255, .16);
    color: #dbe3ff;
    padding: 9px 13px;
    font-size: .76rem;
    font-weight: 900;
    cursor: pointer;
}

.bm-add-mach-name-save:hover {
    background: rgba(82, 103, 255, .24);
}

@media (max-width: 720px) {
    .bm-add-mach-create-row,
    .bm-add-mach-name-form-row {
        grid-template-columns: 1fr;
    }

    .bm-add-mach-create-row .bm-add-mach-btn,
    .bm-add-mach-name-save {
        width: 100%;
    }
}

/* ==================== COMPONENTE REUTILIZABLE ==================== */
/* Origen: templates/installer_ninjatrader8_es.php:13 */
/* Ajustes exclusivos de esta guía. Se apoyan en el mismo diseño de bm-product-flow-v2.css. */
    .bm-nt8-guide .bm-nt8-guide-note {
        margin-top: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid rgba(54, 92, 245, 0.22);
        background: rgba(54, 92, 245, 0.08);
        line-height: 1.55;
    }

    .bm-nt8-guide .bm-nt8-image {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    .bm-nt8-guide .bm-nt8-image--xl { max-width: 800px; }
    .bm-nt8-guide .bm-nt8-image--lg { max-width: 740px; }
    .bm-nt8-guide .bm-nt8-image--md { max-width: 580px; }
    .bm-nt8-guide .bm-nt8-image--sm { max-width: 430px; }

    .bm-nt8-guide .bm-nt8-affiliate-note {
        margin-top: 8px;
        font-size: 0.84rem;
        opacity: 0.78;
    }

    /* Botón propio para esta guía: no depende de estilos del instalador de productos. */
    .bm-nt8-guide .bm-nt8-download-wrapper {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 18px 0 10px;
    }

    .bm-nt8-guide .bm-nt8-download-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 12px 22px;
        border: 0;
        border-radius: 10px;
        background: #365CF5 !important;
        color: #ffffff !important;
        font-size: 0.98rem;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
        text-decoration: none !important;
        cursor: pointer;
        box-shadow: 0 7px 18px rgba(54, 92, 245, 0.28);
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .bm-nt8-guide .bm-nt8-download-button:hover,
    .bm-nt8-guide .bm-nt8-download-button:focus {
        background: #2748d8 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        transform: translateY(-1px);
        box-shadow: 0 9px 22px rgba(54, 92, 245, 0.36);
    }

    @media (max-width: 575.98px) {
        .bm-nt8-guide .bm-nt8-download-button {
            width: 100%;
        }
    }

    .bm-nt8-guide .bm-nt8-credential-note {
        font-weight: 700;
    }

    @media (max-width: 767.98px) {
        .bm-nt8-guide .bm-nt8-image--xl,
        .bm-nt8-guide .bm-nt8-image--lg,
        .bm-nt8-guide .bm-nt8-image--md,
        .bm-nt8-guide .bm-nt8-image--sm {
            max-width: 100%;
        }
    }

/* ==================== COMPONENTE REUTILIZABLE ==================== */
/* Origen: templates/tutorial_nt8nt8_es.php:15 */
/*
 * Configuración opcional para múltiples conexiones Rithmic.
 * Cerrada por defecto para mantener el foco en el flujo principal.
 * Su apariencia utiliza la misma paleta oscura del tutorial y un acento
 * violeta muy discreto para indicar que es una opción secundaria.
 */
.bm-rithmic-disclosure {
    --bm-rithmic-bg: rgba(255, 255, 255, 0.038);
    --bm-rithmic-bg-hover: rgba(255, 255, 255, 0.055);
    --bm-rithmic-bg-open: rgba(124, 92, 246, 0.045);
    --bm-rithmic-border: rgba(255, 255, 255, 0.12);
    --bm-rithmic-border-hover: rgba(167, 139, 250, 0.28);
    --bm-rithmic-border-open: rgba(167, 139, 250, 0.34);
    --bm-rithmic-accent: #9b7cf6;
    --bm-rithmic-accent-soft: rgba(155, 124, 246, 0.13);
    --bm-rithmic-title: #f4f6fb;
    --bm-rithmic-text: #aeb6c8;
    --bm-rithmic-muted: #7f899f;
    --bm-rithmic-divider: rgba(255, 255, 255, 0.075);

    position: relative;
    margin-top: 20px;
    border: 1px solid var(--bm-rithmic-border);
    border-radius: 12px;
    background: var(--bm-rithmic-bg);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
    transition:
        border-color .22s ease,
        background-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

/* Acento lateral mínimo: ayuda a identificar que es un bloque interactivo sin competir con los pasos. */
.bm-rithmic-disclosure::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: rgba(155, 124, 246, 0.42);
    opacity: .65;
    transition: opacity .22s ease, background-color .22s ease;
    pointer-events: none;
}

.bm-rithmic-disclosure:hover {
    border-color: var(--bm-rithmic-border-hover);
    background: var(--bm-rithmic-bg-hover);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 8px 24px rgba(0, 0, 0, 0.08);
}

.bm-rithmic-disclosure:hover::before,
.bm-rithmic-disclosure.is-open::before {
    opacity: 1;
    background: var(--bm-rithmic-accent);
}

.bm-rithmic-disclosure.is-open {
    border-color: var(--bm-rithmic-border-open);
    background: var(--bm-rithmic-bg-open);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 12px 28px rgba(0, 0, 0, 0.10);
}

.bm-rithmic-disclosure__toggle {
    width: 100%;
    min-height: 70px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 14px 17px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bm-rithmic-disclosure__toggle:focus-visible {
    outline: 2px solid rgba(155, 124, 246, 0.55);
    outline-offset: -2px;
    border-radius: 11px;
}

.bm-rithmic-disclosure__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    border: 1px solid rgba(155, 124, 246, 0.30);
    border-radius: 9px;
    background: rgba(155, 124, 246, 0.17);
    color: #b8a4ff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.bm-rithmic-disclosure__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bm-rithmic-disclosure__eyebrow {
    color: #b8a4ff;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.bm-rithmic-disclosure__title {
    color: var(--bm-rithmic-title);
    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.bm-rithmic-disclosure__chevron {
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-right: 1.7px solid #8d96aa;
    border-bottom: 1.7px solid #8d96aa;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .24s ease, border-color .22s ease;
}

.bm-rithmic-disclosure:hover .bm-rithmic-disclosure__chevron,
.bm-rithmic-disclosure.is-open .bm-rithmic-disclosure__chevron {
    border-color: #b8a4ff;
}

.bm-rithmic-disclosure.is-open .bm-rithmic-disclosure__chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* Grid rows permite animar altura automática sin usar una altura máxima fija. */
.bm-rithmic-disclosure__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    border-top: 1px solid transparent;
    transition:
        grid-template-rows .30s ease,
        visibility 0s linear .30s,
        border-color .20s ease;
}

.bm-rithmic-disclosure.is-open .bm-rithmic-disclosure__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    border-top-color: var(--bm-rithmic-divider);
    transition:
        grid-template-rows .30s ease,
        visibility 0s linear 0s,
        border-color .20s ease;
}

.bm-rithmic-disclosure__panel-inner {
    min-height: 0;
    overflow: hidden;
}

.bm-rithmic-disclosure__body {
    padding: 15px 15px 17px;
}

.bm-rithmic-disclosure__intro {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-left: 2px solid rgba(155, 124, 246, 0.52);
    border-radius: 9px;
    background: rgba(4, 8, 20, 0.18);
    color: var(--bm-rithmic-text);
    font-size: 12.5px;
    line-height: 1.58;
}

.bm-rithmic-disclosure__divider {
    height: 1px;
    margin: 15px 0;
    background: var(--bm-rithmic-divider);
}

.bm-rithmic-disclosure__section-title,
.bm-rithmic-disclosure .bm-mac-step-title {
    margin: 0 0 5px;
    color: var(--bm-rithmic-title) !important;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.4;
}

.bm-rithmic-disclosure__section-copy,
.bm-rithmic-disclosure .bm-step-copy {
    margin: 0;
    color: var(--bm-rithmic-text) !important;
    font-size: 12.5px;
    line-height: 1.58;
}

/* Conservamos el bloque original de descarga y neutralizamos su apariencia de "paso". */
.bm-rithmic-disclosure .bm-mac-step {
    margin: 0;
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.bm-rithmic-disclosure .bm-mac-step-number {
    display: none;
}

.bm-rithmic-disclosure .nt-dl-wrapper {
    margin-top: 11px;
}

/* El botón conserva la clase original, pero dentro del bloque opcional no debe desbordarse. */
.bm-rithmic-disclosure .nt-btn-download {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.bm-rithmic-disclosure .nt-video-container {
    margin-top: 11px;
}

.bm-rithmic-disclosure .nt-video-container iframe {
    display: block;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .bm-rithmic-disclosure {
        margin-top: 17px;
        border-radius: 11px;
    }

    .bm-rithmic-disclosure__toggle {
        min-height: 66px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 11px;
        padding: 12px 13px 12px 14px;
    }

    .bm-rithmic-disclosure__icon {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
        border-radius: 9px;
        font-size: 12px;
    }

    .bm-rithmic-disclosure__eyebrow {
        font-size: 10.5px;
        letter-spacing: .04em;
    }

    .bm-rithmic-disclosure__title {
        font-size: 14px;
        line-height: 1.38;
    }

    .bm-rithmic-disclosure__body {
        padding: 13px 12px 14px;
    }

    .bm-rithmic-disclosure__intro,
    .bm-rithmic-disclosure__section-copy,
    .bm-rithmic-disclosure .bm-step-copy {
        font-size: 13px;
    }

    .bm-rithmic-disclosure__divider {
        margin: 13px 0;
    }

    .bm-rithmic-disclosure__section-title,
    .bm-rithmic-disclosure .bm-mac-step-title {
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .bm-rithmic-disclosure__toggle {
        gap: 9px;
        padding-left: 11px;
        padding-right: 11px;
    }

    .bm-rithmic-disclosure__icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .bm-rithmic-disclosure__chevron {
        margin-right: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bm-rithmic-disclosure,
    .bm-rithmic-disclosure::before,
    .bm-rithmic-disclosure__panel,
    .bm-rithmic-disclosure__chevron {
        transition: none !important;
    }
}

/* ================ 5. WIDGET DE ASISTENCIA ================= */

/* ==================== VISTA: html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"] ==================== */
/* Origen: chatgpt.php:184, chatgptBK.php:184 */
/* ==========================================
   Página en blanco y widget flotante
   ========================================== */
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]):root{
  --blue:#4a67e8;
  --wa:#25D366;
  --ig1:#feda77; --ig2:#f58529; --ig3:#dd2a7b; --ig4:#8134af; --ig5:#515bd4;
  --shadow:0 16px 40px rgba(0,0,0,.25);
  --radius:16px;
  --text:#0f1720;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) *{box-sizing:border-box}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]):is(html),
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) body{height:100%}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) body{
  margin:0; background:#ffffff; color:var(--text); font:15px/1.55 system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* ---- Botón principal + etiqueta ---- */
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-floating{
  position:fixed; right:18px; bottom:18px; display:flex; align-items:center; gap:10px; z-index:9999;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-pill{
  border:0; background:#ffffff; color:#2b2f33; font-weight:700; padding:10px 14px; border-radius:999px;
  box-shadow:var(--shadow); cursor:pointer; white-space:nowrap; transform:translateZ(0);
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  opacity:.98;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-pill:hover{ transform:translateY(-1px) scale(1.02) }
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-pill:active{ transform:translateY(0) scale(.98) }

:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-bubble{
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:var(--blue); color:#fff; box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.2,.8,.2,1);
  animation:bm-025363c825-bm-pulse 2.4s infinite;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-bubble:hover{ transform:translateY(-2px) scale(1.05) }
@keyframes bm-025363c825-bm-pulse {
  0% { box-shadow:0 0 0 0 rgba(74,103,232,.45)}
  70%{ box-shadow:0 0 0 18px rgba(74,103,232,0)}
  100%{ box-shadow:0 0 0 0 rgba(74,103,232,0)}
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-bubble svg{width:28px;height:28px;display:block}

/* ---- Acciones desplegables ---- */
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-actions{
  position:absolute; right:4px; bottom:70px; display:flex; flex-direction:column; gap:12px;
  transform-origin:bottom right; transform:scale(.8) translateY(10px);
  opacity:0; pointer-events:none; transition:transform .2s ease, opacity .2s ease;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-actions.open{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto }

/* Cada fila de acción: icono circular + etiqueta */
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-row{ display:flex; align-items:center; gap:10px; justify-content:flex-end }

/* botón circular */
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-action{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff; text-decoration:none;
  box-shadow:var(--shadow); border:0; cursor:pointer; transform:translateZ(0);
  transition:transform .15s ease, filter .15s ease;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-action:hover{ transform:translateY(-2px) }
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-wa{ background:var(--wa) }
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-ig{
  background: radial-gradient(120% 120% at 30% 110%, var(--ig1) 0%, var(--ig2) 25%, var(--ig3) 55%, var(--ig4) 80%, var(--ig5) 100%);
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-chat{ background:var(--blue) }
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-action svg{width:28px;height:28px;display:block}

/* etiqueta blanca a la izquierda de cada icono */
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-label{
  background:#ffffff; color:#2b2f33; font-weight:700; padding:8px 12px; border-radius:999px; box-shadow:var(--shadow);
  font-size:13px; line-height:1; transform:translateX(8px); opacity:0; transition:transform .2s ease, opacity .2s ease;
  user-select:none;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-actions.open .bm-label{ transform:translateX(0); opacity:1 }

/* ---- Ventana de chat estilo WhatsApp ---- */
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-chatbox{
  position:fixed; right:18px; bottom:90px; width:min(380px, calc(100vw - 40px));
  background:#f0f2f5; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; z-index:10000; display:none;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-chatbox.open{display:block}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-chatbox-header{
  background:#128C7E; color:#fff; padding:10px 12px; display:flex; align-items:center; gap:8px;
  font-weight:600; position:relative;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-chatbox-header .bm-min{ margin-left:auto; background:transparent; border:0; color:#fff; cursor:pointer; opacity:.95 }
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-chatbox-body{
  background:#e5ddd5 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 8 8"><g fill="%23d8d3cd" fill-opacity="0.35"><circle cx="1" cy="1" r=".5"/><circle cx="5" cy="3" r=".5"/><circle cx="3" cy="5" r=".5"/><circle cx="7" cy="7" r=".5"/></g></svg>') repeat;
  padding:12px; max-height:62vh; overflow:auto;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-msg{ max-width:78%; margin:6px 0; padding:10px 12px; border-radius:10px; font-size:14px; line-height:1.35; white-space:pre-wrap; word-wrap:break-word }
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-msg.agent{ background:#ffffff; border:1px solid #e3e3e3; color:#111; border-top-left-radius:0 }
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-msg.user{ background:#dcf8c6; margin-left:auto; border-top-right-radius:0 }
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-chatbox-input{ background:#f0f0f0; padding:8px; display:flex; gap:8px; align-items:center }
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-chatbox-input input{
  flex:1; border-radius:999px; border:1px solid #dadada; padding:10px 14px; font-size:14px; outline:none; background:#fff;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-send{
  width:46px; height:46px; border-radius:50%; border:0; background:var(--blue); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:transform .15s ease;
}
:where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-send:hover{ transform:translateY(-1px) }

@media (max-width:520px){
  :where(html[data-bm-shell], html[data-bm-page="chatgpt"], html[data-bm-page="chatgptBK"]) .bm-pill{ display:none }
}