@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200..1000&display=swap');


:root { 
   --bg: #000;
   --btn-payment: #000;
   --bg-big: #000;
   --list-item: transparent;
   --content: transparent;
   --content-big: transparent;
   --text: #E7E9EA;
   --toast-bg: #000;
   --toast-border: #005d3e;
   --button-text: #E7E9EA;
   --button-loading-dots: #E7E9EA;
   --button-loading-border: #E7E9EA33;
   --button-text-social: #fff;
   --button-icon-social: #ffffffDD;
   --button-hover-border: #E7E9EA77;
   --text-secondary: #71767B;
   --menu-item-profile-text: #ffffffDD;
   --menu-item-profile-selected: #ffffff;
   --placeholder: #71767B;
   --hr-color:rgba(47, 51, 54, 0.6);
   --border-color-modal:rgba(47, 51, 54, 0.9);
   --header-bg:#21232433;
   --primary-link: #00BA7C;
   --pinned-rew-layout: #e68b00;
   --sub-icon-fill: #000;
   --pinned-rew-text: #fff;
   --rew-icon-fill: #fff;
   --sub-icon-border: #fff; 
   --border-main-comission: #00BA7C;
   --border-bottom-main-nav: #00BA7C;
   --footer-link: #00BA7C;
   --home-footer-link: #00BA7C;
   --card-border: 1px solid rgba(47, 51, 54, 0.5);
   --scrollbar-bg: #1A1A1A;
   --scrollbar-thumb: #4F4F4F;
   --focus: #21232433;
   color-scheme: dark;
   --footer: #21232433;
   --footer-home: #21232433;
   --footer-big: #21232433;
   --img-item-back: #21232433;
   --logo-fill: #85b868;
   --logo-fill-main-big: #85b868;
   --breadcrumb: #fff;
   --collapsible-body-padding: 0px 16px 56px 16px;
   --collapsible-border: 1px solid rgba(47, 51, 54, 0.5);
   --box-shadow: none;
   --footer-hr: rgb(47, 51, 54, 0.8);
   --box-shadow-header: none;
   --box-shadow-header-main: none;
   --box-shadow-main-commision: none;
   --collapsible-header-padding: 24px 18px;
   --header-back-img: linear-gradient(to right, 
  rgba(48, 103, 67, 0.1), 
  rgba(44, 96, 62, 0.2), 
  rgba(41, 88, 57, 0.1), 
  rgba(37, 81, 53, 0.2), 
  rgba(34, 74, 48, 0.1)
);
   --footer-back-img: none;
   --noteBoxes-trans: 0.2;
   --noteBoxes-trans-main: 0.1;
   --danger-color: #FF4C4C;
   --noteBoxes-background: rgba(42, 157, 143, var(--noteBoxes-trans));
   --button-common: #e6e8ebEE;
   --input-border: #444;
   --payment-btn-hover: #44444444;
   --photo-hover: #44444411;
   --photo-svg: #444;
   --img-item-border: #44444455;
   --input-border-hover: #666;
   --centered-loading-bg: #42424255;
   --centered-loading-svg: #85b868;
   --centered-loading-dots: #ffffffCC;
   --centered-loading-text: #ffffffCC;
   --centered-loading-shadow: 0px 5px 15px -3px rgba(0,0,0,0.1);
   --link-danger-hover: rgba(48,48,48,0.1);
   --menu-item-hover: rgba(48,48,48,0.2);
   --table-odd: rgba(242, 242, 242, 0.03);
   --filters: rgba(242, 242, 242, 0.03);
   --main-menu-text-color: #E7E9EA;
   --reward-item-hover: #69696911;
   --loader-payment-color:  rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
   --home-strong-green: #66BB6A;
   --border-faqs-active: #66BB6A66;
   --homeNumberItem-border: #66BB6AAA;
   --homeNumberItem-color: #66BB6A;
   --personal-data-back: none;
   --padding-faq-table: 0px;
   --table-hover: #21232422;
   --status-page-icon: #E7E9EAB3;
   --input-color: #fff;
   --price-received: #00BA7C;
   --icon-page-state: #E7E9EAB3;
   --border-card: rgb(47, 51, 54);
   --initial-avatar: rgb(44, 96, 62);
   --profile-avatar-border: rgba(44, 96, 62);
   --profile-menu-items:rgba(47, 51, 54, 0.1);
   --modal-window-back: #000000EE;
   --expires-layout-bg: #000000EE;
   --background-profile: #000;
   --price: #43A047;
   --award-gold: #FFD700;
   --award-bronze: #8B4513;
   --award-silver: #B0B0B0;

  --pink: #c00042;          
  --pink-soft: #ec3f7a;    
  --orange-text: #dd2c00;
  --orange: #90311a;       
  --purple: #6b1b80;        
  --blue: #3d2597;          
  --green: #2e7d32;      
  --indigo: #3F51B5;       
  --black: #212121;        
  --teal: #008e8e;          
  --lime: #435800;         
  --grey-light: #4e4e4e;    
  --amber: #2f7ea3;        
  --yellow: #8a7c00;        
  --brown: #546872;        
  --blue-grey: #4e342e;    
  --blue-grey-text: #4e342e;
  --yellow-soft: #816100;  

  --yellow-soft-text: #000;  
  --text-black-profile: #fff;
  --border-black-btn: 2px solid #FFFFFF5C;
  --profile-btn-header: #fff;
  --boder-input-code: #FFFFFF40;
  --header-v2-border: rgba(255, 255, 255, 0.15);
  --header-v2-border-menu: rgba(255, 255, 255, 0.25);
  --header-v2-text: #f0f6f2;
  --header-v2-btn-bg: #2E7D3233;
  --header-v2-btn-bg-menu: #000000EE;
  --header-v2-btn-hover: rgba(60, 90, 70, 0.8);
  --header-v2-btn-hover-menu: rgba(60, 90, 70, 0.8);
  --header-v2-accent: #72d19d;

  --lang-modal-bg: #1e1e1e;
  --lang-modal-text: #ffffff;
  --lang-modal-overlay: rgba(0, 0, 0, 0.7);
  --lang-modal-border: #51515199;

  /* Tema oscuro por defecto */
  --aportes-bg: #1e1e1e;
  --aportes-text: #f2f2f2;
  --aportes-border: #333;
  --aportes-accent: #2c7a4b;
  --aportes-accent-bg: #243a2e;

  /* Botón secundario */
  --aportes-btn-sec-bg: transparent;
  --aportes-btn-sec-text: #d1d1d1;
  --aportes-btn-sec-border: #555;
  --aportes-btn-sec-hover: #2c7a4b33;

  /* Ilustración */
  --aportes-illustration-bg1: #243a2e;
  --aportes-illustration-bg2: #1e1e1e;

  --crypto-payment-back: transparent;

  --main-card-bg: linear-gradient(135deg, #28392bBB, #1d2d21BB);
  --main-card-border: 1px solid #3d5944;
  --main-card-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

  --main-username-color: #eafaea;
  --main-balance-color: #eafaea;
  --main-label-color: #a0c7a4;
  --main-icon-border: transparent;
  --main-balance-currency-color: #4b5b75;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
} 

.lightMode {
  --bg: #fff;
  --btn-payment: rgba(0, 136, 89, 0.05);
   --bg-big: #fbfbfb;
   --content: #fff;
   --danger-color: #c62828;
   --content-big: #fff;
   --list-item: #fff;
  --button-hover-border: rgba(14, 14, 14, .3);
   --text: rgb(14, 14, 14);
   --button-text: #fff;
   --button-loading-dots: rgba(87, 90, 89, 1);
   --button-loading-border: rgba(87, 90, 89, 0.3);
   --button-text-social: #0E0E0E;
   --button-icon-social: #0E0E0E88;
   --text-secondary: rgb(87, 90, 89);
   --menu-item-profile-text: rgb(87, 90, 89);
   --menu-item-profile-selected: #000000DD;
   --placeholder: rgba(87, 90, 89, 0.6);
   --toast-border: #969696;
   --toast-bg: #262626;
   --toast-text: rgba(249,249,249,1.0);
   --hr-color:#dadbdd88;
   --border-color-modal:#dadbdd88;
   --logo-fill: #ffffffEE;
   --logo-fill-main-big: #6a9353;
   --header-bg: #008859; /* TODO */
   --primary-link: rgb(52, 140, 121);
   --pinned-rew-layout: #FFD54F;
   --sub-icon-fill: #FFD54F;
   --pinned-rew-text: #fff;
   --rew-icon-fill: #fff;
   --sub-icon-border: #000;
   --border-main-comission: rgba(52, 140, 121, 0.3);
   --border-bottom-main-nav: rgb(52, 140, 121);
   --card-border: 1px solid rgb(241, 241, 241);
    --scrollbar-bg: #EFF3F4;
   --scrollbar-thumb: #B0B0B0;
   --focus: #21232433;
   color-scheme: light;
   --footer-link: rgb(52, 140, 121);
   --home-footer-link: #ffffff;
   --footer: rgba(249,249,249,1.0);
   --footer-home: #008859;
   --footer-big: rgba(225,225,225,0.2);
   --img-item-back: rgba(225,225,225,0.2);
   --breadcrumb: #000;
   --collapsible-body-padding: 0px 16px 56px 16px;
   --footer-hr: rgb(234, 237, 239);
   --table-hover: rgb(251, 251, 251);
   --link-danger-hover: rgba(231,231,231,0.2);
   --collapsible-border: 1px solid rgb(234, 237, 239); 
   --box-shadow: 0 4px 12px -2px rgb(0 0 0 / 8%);
   --box-shadow-header: 0 4px 34px hsla(156, 10%, 59%, .8);
   --box-shadow-header-main: 0 4px 34px hsla(156, 10%, 59%, .4);
   --box-shadow-main-comission: 0 4px 12px hsla(156, 4%, 59%, .2);
    --collapsible-header-padding: 24px 18px;
    --header-back-img: linear-gradient(to right, 
  rgba(48, 103, 67, 0.9), 
  rgba(44, 96, 62, 0.9), 
  rgba(41, 88, 57, 0.9), 
  rgba(37, 81, 53, 0.9), 
  rgba(34, 74, 48, 1)
);
    --footer-back-img: linear-gradient(to right, 
  rgba(48, 103, 67, 0.9), 
  rgba(44, 96, 62, 0.9), 
  rgba(41, 88, 57, 0.9), 
  rgba(37, 81, 53, 0.9), 
  rgba(34, 74, 48, 1)
);
     --noteBoxes-trans: 0.2;
     --noteBoxes-trans-main: 0.1;
      --button-common: #e6e8eb;
      --input-border: #dcdcdc;
      --payment-btn-hover: #dcdcdc88;
      --photo-hover: #e6e6e655;
      --photo-svg: #c6c6c6;
      --img-item-border: #c6c6c699;
      --input-border-hover: #aaa;
      --centered-loading-bg: #42424222;
      --centered-loading-svg: #85b868;
      --centered-loading-dots: rgba(52, 140, 121, 0.7);
      --centered-loading-text: #0E0E0EBB;
      --centered-loading-shadow: 0px 5px 8px -3px rgba(0,0,0,0.1);
      --menu-item-hover: #8a909411;
      --table-odd: rgba(242, 242, 242, 0.5);
       --filters: rgba(242, 242, 242, 0.3);
       --main-menu-text-color: #0E0E0E;
       --reward-item-hover: #fafafa11;
       --loader-payment-color:  rgba(106, 147, 83, 0.3) rgba(106, 147, 83, 0.4) rgba(106, 147, 83, 0.5) rgba(106, 147, 83, 0.6);
       --home-strong-green: hsl(165, 81%, 35%);
       --border-faqs-active: hsla(165, 81%, 35%, 0.6);
       --homeNumberItem-border: hsla(165, 81%, 35%, 0.3);
   --homeNumberItem-color: hsl(165, 81%, 35%);
   --personal-data-back: linear-gradient(to bottom, #ececec55, #fff);
   --padding-faq-table: 0px;
   --status-page-icon: rgba(14, 14, 14, 0.7);
   --input-color: #000;
   --price-received: rgb(52, 140, 121);
   --icon-page-state: rgba(14, 14, 14, 0.4);
   --border-card: #42424222;
   --initial-avatar: #567f35;
   --profile-avatar-border: #567f35BB;
   --profile-menu-items:#F5F5F533;
   --modal-window-back: #000000CC;
   --expires-layout-bg: #C8E6C922;
   --background-profile: linear-gradient(to top, rgba(46, 125, 50, 0.03), rgba(46, 125, 50, 0));
   --price: #43A047;
   --award-gold: #FFD700;
   --award-bronze: #CD7F32;
   --award-silver: #C0C0C0;

  --pink: #ff4081;          
  --pink-soft: #f1749f;    
  --orange-text: #dd2c00;
  --orange: #dd2c00;       
  --purple: #8e24aa;        
  --blue: #6a4ed4;          
  --green: #2e7d32;      
  --indigo: #3F51B5;       
  --black: #494949;        
  --teal: #008e8e;          
  --lime: #6b8a00;         
  --grey-light: #7f7f7f;    
  --amber: #2f7ea3;        
  --yellow: #d8c200;        
  --brown: #78909c;        
  --blue-grey: #80544c;    
  --blue-grey-text: #4e342e;
  --yellow-soft: #d09c00;  

  --yellow-soft-text: #fff;  
  --text-black-profile: #000;
  --border-black-btn: none;
  --profile-btn-header: #fff;
  --boder-input-code: #21232433;
  --header-v2-border: rgba(0, 0, 0, 0.3);
  --header-v2-border-menu: rgba(0, 0, 0, 0.3);
  --header-v2-text: #EEEEEE;
  --header-v2-btn-bg: #2E7D3288;
  --header-v2-btn-bg-menu: #406e42;  
  --header-v2-btn-hover: rgba(210, 230, 220, 0.15);
  --header-v2-btn-hover-menu: rgba(210, 230, 220, 0.1);
  --header-v2-accent: #2f7a50;

  --lang-modal-bg: #ffffff;
  --lang-modal-text: #000;
  --lang-modal-overlay: rgba(0, 0, 0, 0.6);
  --lang-modal-border: #f5f5f5;

  /* Tema claro */
  --aportes-bg: #fff;
  --aportes-text: #222;
  --aportes-border: #e2e2e2;
  --aportes-accent: #2c7a4b;
  --aportes-accent-bg: #eaf7f0;

  /* Botón secundario */
  --aportes-btn-sec-bg: transparent;
  --aportes-btn-sec-text: #2c7a4b;
  --aportes-btn-sec-border: #2c7a4b;
  --aportes-btn-sec-hover: #f0fdf4;

  /* Ilustración */
  --aportes-illustration-bg1: #eaf7f0;
  --aportes-illustration-bg2: #fdfdfd;

  --crypto-payment-back: linear-gradient(160deg, #343434, #404040);

  --main-card-bg: linear-gradient(135deg, #ffffff, #f8fbf9);
  --main-card-border: 1px solid #cde6d2;
  --main-card-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);

  --main-username-color: #1b4332;
  --main-balance-color: #1b4332;
  --main-label-color: #5a7865;
  --main-icon-border: transparent;
  --main-balance-currency-color: #4b5b75;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

}

::-webkit-scrollbar {
   width: 16px; /* Ancho estándar de la scrollbar */
}

::-webkit-scrollbar-track {
   background: var(--scrollbar-bg); /* Color de fondo de la pista */
}

::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb); /* Color de la scrollbar */
}

.collapsible-header, .collapsible-body, .collapsible, ul.collapsible>li, nav
{
  box-shadow: none!important;
}

body { 
  background-color: var(--bg);
  font-family: 'Nunito', sans-serif;
}

 #settingsContent{
  padding: 0px;
}

@media (min-width: 600px) {
  body {
  }

  .nick-profile {
      margin-top: 0px!important;
  }

  #settingsContent{
  padding-left: 48px;
  border-left: 1px solid var(--hr-color);
}
}

#mainContent {
  margin: 0px;
  padding: 0px;
}

@media (min-width: 993px) {
#mainContent {
  
  margin: 0px;
  padding-top: 40px!important;
  padding: 0px;
  border-left: 1px solid var(--hr-color);
}
}

html {
  font-size: 16px; /* 1rem = 16px */
}

html, body {
    color: var(--text);
    font-weight: 400;

    margin: 0;
  padding: 0;
}



.input-hint {
  font-size: 0.875rem; /* 14px / 16px = 0.875rem */
}

.text-secondary {
  color: var(--text-secondary);
}

hr{

  height: 1px;
    color: var(--hr-color);
    background-color: var(--hr-color);
    border: none;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom:1px solid var(--hr-color);
    
}
.logo-container {
    display: flex;
    width: 100%;
    margin-bottom: 0px; 
    padding: 12px 0px 6px 18px;  
    background-color: var(--header-bg);
    box-shadow: var(--box-shadow-header);
    background-image: var(--header-back-img);
}

@media (min-width: 600px) {
  .logo-container {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-bottom: 0px; 
      padding: 12px 0px 6px 0px;  
      background-color: var(--header-bg);
      box-shadow: var(--box-shadow-header);
      background-image: var(--header-back-img);
  }
}

.logoMainBig{
  height: 16pt;
}

.logoMainBig path {
    fill: var(--logo-fill-main-big);
}

.logo {
    height: 15pt;
    vertical-align: middle;
}

.logo-small {
    height: 12pt;
}

.logo.msg {
  height: 24px;
}

.logo path {
    fill: var(--logo-fill);
}

.pageIcon path {
    fill: var(--text);
}

main {
   min-height: 100dvh;
    padding-bottom: 100px;
}

#mainNoPaddingBottom {
  padding-bottom: 0px!important;
}

main.noBottomPadding {
  min-height: 0px;
}

.noBottomPadding {
  padding-bottom: 0px!important;
}


strong {
  font-family: 'Nunito', sans-serif;
  font-weight: 600; /* Peso negrita */
}

h1 { font-size: 1.5rem; } /* 24px / 16px = 1.5rem */
h2 { font-size: 1.375rem; } /* 22px / 16px = 1.375rem */
h3 { font-size: 1.125rem; } /* 18px / 16px = 1.125rem */
h4 { font-size: 1rem; } /* 16px / 16px = 1rem */
h5 { font-size: 0.75rem; } /* 12px / 16px = 0.75rem */
h6 { font-size: 0.625rem; } /* 10px / 16px = 0.625rem */

h1,h2,h3,h4,h5,h6 {
 font-family: 'Nunito', sans-serif;
  font-weight: 600;
  line-height: 1.2;
}


div col {
  padding: 0px;
}

a {
  font-weight: 700;
  color: var(--primary-link);
  text-decoration: none;
}

#trans a{
  font-weight: normal; /* O la que sea por defecto en tu sistema */
  color: inherit; /* Usa el color del texto del contenedor */
  text-decoration: underline; /* Si quieres que sea subrayado por defecto */
}

#transItems a{
  font-weight: normal; /* O la que sea por defecto en tu sistema */
  color: inherit; /* Usa el color del texto del contenedor */
  text-decoration: underline; /* Si quieres que sea subrayado por defecto */
}

#vTransItems a{
  font-weight: normal;
  color: inherit;
  text-decoration: underline;
}

.asLink {
    font-weight: 700;
  color: var(--primary-link);
  text-decoration: none;cursor: pointer;
}

p {
  margin: 0 0 6px 0;
}

.sm {
  margin-bottom: 4px;
}

.md {
  margin-bottom: 16px;
}

.lg {
  margin-bottom: 36px;
}

.margin-left-sm {
  margin-left: 8px!important;
}

.margin-right-sm {
  margin-right: 8px;
}

.margin-bottom-md {
  margin-bottom: 16px!important;
}

.collection {
  border: 1px solid  var(--card-border);
}

.collection .collection-item {
  background: var(--bg);
  border-color: var(--card-border);
}

.col .tableX {
  background-color:  var(--list-item);
  border: var(--card-border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: none;
}

@media (min-width: 993px) {
  .col .tableX {
    box-shadow: var(--box-shadow);
  } 
}

.generic h3 {
  line-height: 1.4;
  font-weight: 400;
}

.generic h1 {
  font-weight: 500;
}

.col .tableX:hover {
background-color: var(--table-hover);
}

.noMargin {
  margin: 0px!important;
}

.noMarginBottom {
  margin-bottom: 0px!important;
}

.noPaddingBottom {
  padding-bottom: 0px!important;
}

.noPadding {
  padding: 0px!important;
}

.noPaddingLeft {
  padding-left: 0 !important;
}

.noPaddingRight {
  padding-right: 0 !important;
}

.roundedImg {
  border-radius: 8px;
}

.file-icon {
  margin-right: 0px;
  padding-left: 4px!important;
  vertical-align: middle;
  margin-bottom: 4px;
  font-size: 1.3125rem; /* 21px */
}

.back-button {
  padding: 4px;
  vertical-align: middle;
  margin-bottom: 4px;
 font-size: 1.125rem; /* 18px / 16px = 1.125rem */
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid transparent;
  padding-left: 0px;
}

.back-button:hover {
background-color: var(--table-hover);
}

.text-icon {
  margin-left: 4px;
  vertical-align: middle;
  margin-bottom: 4px;
}

h4{
  margin: 14px 0;
}

ul.guideItemList > li {
  margin-bottom: 20px;
   margin-left: 10px;
  list-style-type: disc;
}

ul.tos > li {
  margin-bottom: 14px;
    margin-left: 10px;
  list-style-type: disc;
}

.numlist{
  list-style: none;
  padding: 0;
  margin: 0;
}
.numlist li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.numlist .n{
  text-align: right;
}
.numlist .t{
  flex: 1;
}

ol.tos > li {
  margin-bottom: 8px;
    margin-left: 8px;
    padding-left: 8px;
}

.faqs > .collapsible {
  background-color: transparent;
  border: var(--collapsible-border);
  cursor: pointer;
  border-radius: 8px;
  
}


.faqs > .collapsible li {
  border-bottom:1px solid var(--hr-color);
  padding: var(--padding-faq-table);
}

.faqs > .collapsible li:last-child {
  border-bottom: none;
}

.faqs li.active {
    /*background-color: var(--table-hover);*/
    padding: 8px 0;
    padding: var(--padding-faq-table);
}



.faqs > .collapsible li:hover {
background-color: var(--table-hover);
}


.collapsible-header {
  font-size: 1.125rem; /* 18px / 16px = 1.125rem */
  background-color: transparent;
  padding: var(--collapsible-header-padding);
  border: none;
  cursor: pointer;
    display: flex;
    justify-content: space-between; /* Distribuye el contenido a los extremos */
    align-items: center; /* Centra verticalmente el contenido */
}

.iconLink{
  color: var(--primary-link);
}

.collapsible-header .material-icons {
  color: var(--primary-link);
  margin: 0px;
  padding-left: 4px;
    margin-left: auto; /* Empuja el ícono hacia el borde derecho */
}

.collapsible-body {
  padding: var(--collapsible-body-padding);
  border-bottom:none;
}

.keyboard-focused .collapsible-header:focus {
  background-color: var(--focus);
}


.faqsSection:first-of-type {
  margin-top: 48px;
  margin-bottom: 32px;
}

.faqsSection {
  margin-top: 68px;
  margin-bottom: 32px;
}

.faqsSection h3 {
  display: inline;
  font-weight: 800;
}

nav {
  background-color: transparent;

}

.nav-wrapper .breadcrumb{
  color: var(--primary-link);
}

a.breadcrumb{
  font-weight: 600;
  font-size:  1rem; /* 16px */
}

.nav-wrapper .breadcrumb:first-of-type {
    margin-left: 0;
    margin-bottom: 1px;
}


.breadcrumb:before {
  color: var(--breadcrumb);
  vertical-align: middle;
}


.nav-wrapper .col.s12 {
    margin: 0;
    padding: 0;
    margin-bottom: 24px;
    line-height: 1.2; 
    margin-top: 24px;

}

.noteBoxes
{
  border: 1px solid;
  border-radius: 8px;
  margin-bottom: 36px;
  font-size: 0.9375rem; /* 15px */
  box-shadow: var(--box-shadow);
}

.type1
{
  border-color: #E76F5166;
  background-color: rgba(231, 111, 81, var(--noteBoxes-trans)); 
}

.type1 .material-icons {
  color: #E76F51BB;
}

.type2
{
  border-color: #2A9D8F66;
  background-color: var(--noteBoxes-background); 
}

.type3
{
  border-color: #0096C7;
  background-color: rgba(0, 150, 199, var(--noteBoxes-trans)); 
}

.type3WithoutBorder
{
  font-size: 0.9375rem; /* 15px */
  border-color: #0096C733;
  background-color: rgba(0, 150, 199, var(--noteBoxes-trans-main)); 
}

.type4
{
  border-color: #00B353;
  background-color: rgba(0, 179, 83, var(--noteBoxes-trans)); 
}

.type2 .material-icons {
  color: #2A9D8FBB;
  padding: 0px;
}

.type3WithoutBorder .material-icons {
  padding-bottom: 0px;
  color: #0096C7CC;
}

.type3WithoutBorder .file-icon {
  font-size: 1.375rem; /* 22px */
  margin-bottom: 0px;
}

.linkIcon .material-icons {
  color: var(--primary-link);
  padding: 0px;
}

.faqs .tos {
  margin-bottom: 14px;
    margin-left: 10px;
  list-style-type: disc;
  padding-top: 24px;
}

.faqs .tos li {
  border: none;
}

.faqs {
  box-shadow: none;
}

@media (min-width: 993px) {
  .faqs {
    box-shadow: var(--box-shadow);
  } 
}

.themeSwitcher {
    position: absolute;
    right: 14px; 
    top: 11px;
    z-index: 1000; 
    cursor: pointer;
    font-size: 1.75em; /* 28px */
    fill: var(--logo-fill);
    color: var(--logo-fill);
}

.button-18 {
  align-items: center;
  background-color: var(--button-common);
  border: 0;
  border-radius: 100px;
  box-sizing: border-box;
  color: rgb(18, 18, 18);
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem; /* 16px */
  font-weight: 600;
  justify-content: center;
  line-height: 20px;
  max-width: 480px;
  min-height: 40px;
  min-width: 0px;
  overflow: hidden;
  padding: 0px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  border: 1px solid transparent;
}

.button-18:focus {
  background-color: var(--button-common);
}

.button-18.small {
  border-radius: 12px;
  min-height: 32px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid transparent;
  background-color: var(--button-common);
}



.button-18.small-info {
  border-radius: 12px;
  min-height: 32px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid transparent;
  margin-left: 12px;
  margin-bottom: 4px;
}

.button-18.primary {
  background-color: rgba(0, 136, 89, 0.9);
  color: var(--button-text);
}

.button-18.loading {
  background-color: #42424211;
  border: 1px solid var(--button-loading-border);
  color: var(--button-loading-dots);
}

button.button-18.loading:hover {
  background-color: #42424211;
  border: 1px solid var(--button-loading-border);
}

.button-18.google {
  display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns items to the left */
  background-color: var(--bg);
  color: var(--button-text-social);
  border: 1px solid #DB4437;
  min-width: 200px;
  height: 44px;
}

.button-18.mail {
  display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns items to the left */
  background-color: var(--bg);
  color: var(--button-text-social);
  border: 1px solid #0f8341;
  min-width: 200px;
  height: 44px;
}

.button-18.twitter {
  display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns items to the left */
  background-color: var(--bg);
  color: var(--button-text-social);
  border: 1px solid #2f76ad;
  min-width: 200px;
  height: 44px;
}

.button-18.twitter svg {
  margin-right: 30px;
  float: left;
  height: 18px;
  fill: red;
}

.button-18.google svg {
  margin-right: 30px;
  float: left;
  height: 18px;
  fill: red;
}

.button-18.mail svg {
  margin-right: 30px;
  float: left;
  height: 18px;
  stroke: var(--button-icon-social);
}


.button-18.twitter svg path {
  fill: var(--button-icon-social);
}

.button-18.google svg path{
  fill: var(--button-icon-social);
}

.button-18.mail svg path{
  stroke: var(--button-icon-social);
}


.button-18.danger {
  background-color: #B00020;
  color: var(--button-text);
}

.button-18:hover {
  border: 1px solid var(--button-hover-border);
}

.button-18:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  border: 1px solid transparent;
  box-shadow: none;
}

.button-18.twitter:hover {
  border: 1px solid #5891bd;
}

.button-18.mail:hover {
  border: 1px solid #278f54;
}

.button-18.google:hover {
  border: 1px solid #e2695e;
}

.input-field.removeSpace {
  
}

.input-field{
}

input.input-field.confirmText,
textarea.input-field.confirmText,
.textAreaConfirm {
  border: 2px solid var(--input-border) !important;
    border-radius: 7px;
    box-sizing: border-box;
    background-color: var(--bg);
    color: var(--text);
}

input.input-field.confirmText {
    padding: 0px 16px;
}

textarea.input-field.confirmText,
.textAreaConfirm {
  margin: 0px 0px 8px 0px !important;
  padding: 12px 16px !important;
  min-height: 96px;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--bg);
  scrollbar-width: thin;
}

textarea.input-field.confirmText::-webkit-scrollbar,
.textAreaConfirm::-webkit-scrollbar {
  width: 14px;
}

textarea.input-field.confirmText::-webkit-scrollbar-track,
.textAreaConfirm::-webkit-scrollbar-track,
textarea.input-field.confirmText::-webkit-scrollbar-corner,
.textAreaConfirm::-webkit-scrollbar-corner {
  background: var(--bg);
}

textarea.input-field.confirmText::-webkit-scrollbar-thumb,
.textAreaConfirm::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid var(--bg);
}

#customInput {
  border: 2px solid var(--input-border);
  border-radius: 7px;
  padding: 12px 16px;
  background-color: var(--bg);
  outline: none;
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 16px;
  min-height: 96px;
  position: relative;
  max-height: calc(1.5em * 5); /* 5 líneas */
  overflow-y: auto;           /* Scroll si se excede */
}

#customInput::-webkit-scrollbar-thumb {
  cursor: pointer;
}

.show-placeholder:before {
  content: attr(data-placeholder);
  color: #aaa;
  position: absolute;
  left: 16px;
  top: 8px;
  pointer-events: none;
}

input.input-field.confirmText:focus,
textarea.input-field.confirmText:focus,
.textAreaConfirm:focus { 
  outline: none !important;
  outline-style: none !important;
  box-shadow: none !important;
    border-color: var(--input-border-hover) !important;
}

input.input-field.confirmText::placeholder,
textarea.input-field.confirmText::placeholder,
.textAreaConfirm::placeholder { 
  color: var(--placeholder);
  opacity: 1; /* Firefox */
}

input.input-field.confirmText::-ms-input-placeholder,
textarea.input-field.confirmText::-ms-input-placeholder,
.textAreaConfirm::-ms-input-placeholder { 
  color: var(--placeholder);
}

input.invalid,
textarea.invalid {
    border-radius: 7px;
    box-sizing: border-box;
   box-shadow: 0px 2px 0px 0px #F44336BB!important;
}

input.invalid {
    padding: 0px 16px;
}

textarea.invalid {
    padding: 12px 16px;
}

.button-18.loading:hover {
  border: none;
  cursor: initial;
}

.button-18.loading p {
  padding-left: 16px;
}

.button-18.loading.preloader-wrapper {
  padding-top: 19px;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side,var(--button-loading-dots) 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: l7 1s infinite linear;
}
@keyframes l7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}


/* HTML: <div class="loader"></div> */
.loadera {
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: l7 1s infinite linear;
}
@keyframes l7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}

.containera {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /*width: 100vw;*/
}

.centered-child-back {
  padding: 16px 0 24px 0;
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
}

.centered-child-back hr {
  background-color: var(--border-card);
}

.centered-child-back .loader {
 --_g: no-repeat radial-gradient(circle closest-side,var(--centered-loading-dots) 90%,#0000);
 margin: 0 auto;
}

.centered-child-back .logo.msg {
  height: 18px;
}

h3.loading {
  font-weight: 400;
}

.errorMsg {
  padding: 24px 8px;
}

.grecaptcha-badge { visibility: hidden; }


#emojiLogin {
  margin-left: 6px;
  vertical-align: middle;
  margin-bottom: 8px;
}

.loginTitle {
  padding: 0 0  16px 0;
}


@media (min-width: 600px) {
.login {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
}

.login {
  background-color:  var(--content);
}

.login hr {
  margin: 0px;
}
.loginContent {
   padding: 24px 12px;
   margin: 0px 24px!important;
}
.loginTitle {
  padding: 24px 36px;
}
}

.login-webview {
  display: flex;
  flex-direction: column;
}

.login-webview__hero {
  padding: 0 0 22px;
}

.login-webview__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(31, 122, 90, 0.1);
  color: #135742;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.login-webview__title {
  margin: 0px !important;
  font-size: clamp(1.22rem, 2vw, 1.5rem);
  line-height: 1.2;
  font-weight: 600;
  max-width: none;
}

.login-webview__lead {
  margin: 10px 0 0;
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 31rem;
}

.login-webview__support {
  margin: 10px 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 30rem;
}

.login-webview__cta {
  margin-top: 18px;
  width: fit-content;
}

.login-webview__note {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.5;
}

.login-webview__guide {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-webview__guideTitle {
  font-size: 1rem;
}

.login-webview__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0;
}

.login-webview__stepNumber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(31, 122, 90, 0.12);
  color: #135742;
  font-weight: 700;
  flex-shrink: 0;
}

.login-webview__stepText {
  margin: 2px 0 0;
  line-height: 1.55;
  color: var(--text);
}

@media (max-width: 600px) {
  .login-webview {
    padding-left: 8px;
    padding-right: 8px;
  }

  .login-webview__hero {
    padding-bottom: 18px;
  }

  .login-webview__cta {
    width: 100%;
    justify-content: center;
  }
}




.checkbox-wrapper-4 {
  position: relative; /* Necesario para posicionar el SVG */
  display: inline-block; /* Asegura que el contenedor se ajuste al contenido */
}

.checkbox-wrapper-4 .cbx {
  display: inline-block; /* Mantiene el checkbox y el texto en línea */
  vertical-align: middle; /* Alinea verticalmente el contenido */
   cursor: pointer;
   border-radius: 6px;
   color: var(--text);
    font-size: 1rem; /* 16px */
    border-radius: 6px;
}

.checkbox-wrapper-4 .cbx span:first-child {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px; /* Alinea verticalmente el icono */
  border-radius: 4px;
  border: 1px solid #a3a5af;
  box-shadow: 0 1px 1px rgba(0,16,75,0.05);
  text-align: center; /* Centra el SVG dentro del checkbox */
  margin-right: 4px; /* Espacio entre el checkbox y el texto */
}

.checkbox-wrapper-4 .cbx span:last-child {
  display: inline; /* Asegura que el texto siga en línea con el checkbox */
  vertical-align: middle; /* Alinea verticalmente el texto con el checkbox */
}

.checkbox-wrapper-4 .cbx span:first-child svg {
  position: relative;
  top: 25%; /* Ajusta la posición vertical del SVG */
  left: 35%; /* Centra horizontalmente el SVG */
  transform: translate(-50%, -50%); /* Centra el SVG dentro del span */
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
}

.checkbox-wrapper-4 .inp-cbx {
  position: absolute;
  opacity: 0; /* Oculta el checkbox real */
}

.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
  background: var(--primary-link);
  border-color: var(--primary-link);
}

.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}

@media screen and (max-width: 640px) {
  .checkbox-wrapper-4 {
    width: 100%; /* Asegura que el contenedor ocupe el ancho completo en pantallas pequeñas */
  }
  .checkbox-wrapper-4 .cbx {
    display: block; /* Permite que el checkbox y el texto se alineen verticalmente en pantallas pequeñas */
    text-align: left; /* Alinea el texto a la izquierda */
  }
}

  .checkbox-wrapper-4 .inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
  }


.link-danger {
  
  color: var(--danger-color);
  
}

.flat-link:hover {
  background-color: var(--link-danger-hover);
}

.flat-link {
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  padding: 6px 0!important;
}

.padding-horizontal-content {
  padding-left: 8px!important;
  padding-right: 8px!important;
}

.padding-horizontal-md {
  padding-left: 24px!important;
  padding-right: 24px!important;
}

.padding-right-sm {
  padding-right: 12px!important;
}

.padding-horizontal-sm {
  padding-left: 20px!important;
  padding-right: 20px!important;
}

.padding-horizontal-smm {
  padding-left: 16px!important;
  padding-right: 16px!important;
}

.padding-horizontal-smm-config {
  padding-left: 8px!important;
  padding-right: 8px!important;
}

.padding-vertical-md {
  padding-top: 24px;
  padding-bottom: 24px;
}

.padding-vertical-sm {
  padding-top: 16px;
  padding-bottom: 16px;
}

.padding-top-sm {
  padding-top: 16px;
}

.margin-left-md {
  margin-left: 16px!important;
}

.margin-right-md {
  margin-right: 16px!important;
}

.cardi {
  padding: 0px!important;
  margin: 0px!important;
}

@media (min-width: 993px) {
.cardi {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 18px!important;
}

.cardi {
  background-color:  var(--content);
}

.cardi hr {
  margin: 0px;
}
.cardiContent {
   padding: 24px 36px;
}
}



.vertical-icon {
  vertical-align: middle;
  margin-bottom: 4px;
  margin-right: 6px;
}

.pinnedRewIcon {
    vertical-align: middle;
    margin-bottom: 3px;
    color: var(--rew-icon-fill);
    background-color: transparent;
}


.pinnedSubIcon{
 vertical-align: middle;
  margin-bottom: 4px;
  fill: var(--sub-icon-fill);
  color: var(--sub-icon-border);
}

.hidden {
  display: none;
}

.menu-item {
    background-color: transparent;
    border: var(--collapsible-border);
    cursor: pointer;
    border: none;
    border-bottom:1px solid var(--hr-color);
    padding: 20px 12px;
  }

  .menu-items li:last-child:not(.lastBig) {
    border-bottom: none;
  }


  .menu-item:hover {
background-color: var(--menu-item-hover);
}

.menu-item svg {
    margin: 8px 0;
  }

@media (max-width: 600px) {
  .menu-item {
    background-color: transparent;
    cursor: pointer;
  }

  .menu-item:hover {
    background-color: transparent;
    }

  
}




@media (min-width: 600px) {
  .selectedItemConfig {
    background-color: var(--menu-item-hover);
    font-weight: 600;
  }
}

@media (max-width: 599px) {
  .selectedItemConfig {
    border-bottom: 2px solid var(--border-bottom-main-nav);
  }
}





@media (min-width: 993px) {
  .selectedItem {
    background-color: var(--menu-item-hover);
    font-weight: 600;
  }
}

@media (max-width: 992px) {
  .selectedItem {
    border-bottom: 2px solid var(--border-bottom-main-nav);
  }

  #withContentPosts {
    padding-left: 8px!important;
    padding-right: 8px!important; 
  }
}


#mainMenuContainer {
  padding: 16px 0!important;
}

.menu-settings {
  padding: 0px!important;
}

.menu-setting-border {
  padding-right: 0px;
}


.inline {
  display: inline;
}

.vertical {
  vertical-align: middle;
}

.button-18.col {
  height: 40px;
}

.photo {
  width: 140px;
  height: 140px;
  padding: 48px;
  border: 1px solid var(--photo-svg) !important;
   border-radius: 7px;

}

.photo:hover{
  background-color: var(--photo-hover);
  cursor: pointer;
}

.photo svg {
  color: var(--photo-svg);
}

.profileColor {
  height: 52px; 
  width: 52px;  
  border-radius: 12px;  
  cursor: pointer;
  transition: 0.3s ease;
  display: inline-block; 
  box-sizing: border-box;
  margin-right: 4px; /* Espaciado horizontal */
}

.profileColor.bg-black {
  border: var(--border-black-btn);
}

#profileBtnSample.bg-black {
  border: var(--border-black-btn);
}



#profileBtnSample:hover {
  border: none!important;
  padding-left: 13px!important;
  padding-right: 13px!important;
}

#profileBtnSample.bg-black:hover {
  border: var(--border-black-btn)!important;
}

.textareaDiv {
  border: 2px solid var(--input-border) !important;
    border-radius: 7px;
    padding: 10px 16px !important;
    box-sizing: border-box;
    font-size: 1.0625rem; /* 17px */
    word-wrap: break-word;
}

table.striped>tbody>tr:nth-child(odd) {
    background-color: var(--table-odd);
}

.select-menu {
  margin-bottom: 16px;
    position: relative; /* Importante para que el dropdown se posicione respecto a este contenedor */
}

.date-filter {
    margin-bottom: 16px;
}

.date-input-shell {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 12px 0 16px;
    border: 2px solid var(--input-border) !important;
    border-radius: 7px !important;
    box-sizing: border-box;
    background-color: var(--bg) !important;
}

.filter-date-input {
    width: 100%;
    min-width: 0;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
}

.date-input-shell:focus-within {
    border-color: var(--button) !important;
}

.filter-date-input::-webkit-datetime-edit {
    padding: 0 8px 0 0;
}

.filter-date-input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.filter-date-input::-webkit-datetime-edit-text,
.filter-date-input::-webkit-datetime-edit-month-field,
.filter-date-input::-webkit-datetime-edit-day-field,
.filter-date-input::-webkit-datetime-edit-year-field {
    padding: 0;
}

.filter-date-input:focus {
    outline: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.filter-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    margin: 0;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0 16px 16px;
}

.filters-grid .select-menu,
.filters-grid .date-filter {
    margin-bottom: 0;
}

.filter-box {
    min-width: 0;
}

.filter-primary,
.filter-secondary,
.date-filter {
    grid-column: span 1;
}

.filters-toggle-wrap,
#transaction {
    grid-column: 1 / -1;
}

.filters-toggle-wrap {
    display: flex;
    justify-content: center;
}

button.filters-toggle-btn {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: transparent !important;
    color: var(--centered-loading-text);
    cursor: pointer;
    box-shadow: none !important;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.filters-toggle-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.filters-toggle-title {
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
}

.filters-toggle-side {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.filters-toggle-count {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: var(--button-common);
    color: rgb(18, 18, 18);
    font-size: 0.75rem;
    font-weight: 700;
}

.filters-toggle-icon {
    transition: transform 0.2s ease;
}

button.filters-toggle-btn:hover,
button.filters-toggle-btn:focus,
button.filters-toggle-btn:active,
button.filters-toggle-btn:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.filters.filters-expanded .filters-toggle-icon {
    transform: rotate(-180deg);
}

@media (max-width: 992px) {
    .filters-toggle-wrap {
        margin-top: -4px;
    }

    .advanced-filter {
        display: none;
    }

    .filters.filters-expanded .advanced-filter {
        display: block;
    }
}

@media (min-width: 993px) {
    .filters-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        padding: 0 10px 16px;
    }

    .filter-primary,
    .filter-secondary,
    #transaction {
        grid-column: span 4;
    }

    .date-filter {
        grid-column: span 6;
    }

    .filters-toggle-wrap {
        display: none;
    }
}

.select-menu .select-btn {
    display: flex;
    padding: 12px 8px 12px 16px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
     border: 2px solid var(--input-border) !important;
    border-radius: 7px;
    box-sizing: border-box;
    background-color: var(--bg);
}


.select-menu .select-btn:hover {
background-color: var(--menu-item-hover);
}


.select-btn i {
    font-size: 1.5625rem; /* 25px */
    transition: 0.3s;
}
.select-menu.active .select-btn i {
    transform: rotate(-180deg);
}
.select-menu .options {
    position: absolute; /* Cambiamos a absolute para que flote */
    top: 65px; /* Ajusta la distancia desde el botón */
    left: 0;
    width: 100%;
    padding: 4px;
    margin-top: 0; /* Elimina el margen superior */
    border-radius: 8px;
    background: var(--bg);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    display: none;
    border: 2px solid var(--input-border) !important;
    z-index: 2; /* Para que el menú aparezca sobre otros elementos */
}
.select-menu.active .options {
    display: block;
}
.options .option {
    display: flex;
    height: 48px;
    cursor: pointer;
    padding: 0 16px;
    border-radius: 8px;
    align-items: center;
    background:  var(--bg);
}
.options .option:hover {
    background: var(--menu-item-hover);
}

.option .option-text {
    font-size: 1.125rem; /* 18px */
}

.userIcon {
  vertical-align: middle;
  margin-bottom: 4px;
  margin-right: 4px;
}

.tdSmall {
  padding: 8px 12px;
}


.filters {
  padding: 0px!important;
  margin: 0px!important;
  background-color: var(--filters);
  border-radius: 12px;
  border: 1px solid var(--border-card);
}

@media (min-width: 993px) {
.filters {
  border: 1px solid var(--border-card);
  color: var(--centered-loading-text);
  background-color:  var(--filters);
  padding: 0px 6px!important;
}

}

.filtersItem {
  font-size: 0.875rem; /* 14px / 16px = 0.875rem */
}

.itemFile {
  border-radius: 12px;
}

.itemVidFile {
  border-radius: 12px;
}

.tranItemFooter {
  padding: 12px 16px!important;
}

.noResults {
  background-color:  var(--content-big);
  padding: 16px 12px;
}

.tranItem {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 0px!important;
  background-color:  var(--content);
  margin-bottom: 16px;
}

.tranContent {
  padding: 10px 16px 0px 16px!important;
  margin-bottom: 10px;
}


.tranItem hr {
  margin: 0px;
}

.tranHeader {
  font-size: 1rem; /* 16px */
  font-weight: 600;
}

.tranID {
  margin-top: 8px;
}

.tranIDSmall {
  margin-top: 6px;
}

.tranFile {
  margin-top: 2px;
}

.tranPrice {
  font-weight: 600;
}

.tranIcon {
  margin-right: 8px;
  height: 16px;
  vertical-align: middle;
  margin-bottom: 4px;
}


.button-18.flat {
  background-color: var(--bg);
  color: #42424266;
  border: 1px solid #424242AA;
  height: 30px;
  padding: 8px;
  margin-top: 0px;
}

.button-18.flat:hover {
  background-color: #42424211;
}

.button-18.flat svg {
  height: 16px;
  stroke: #424242AA;
}


.c-pill {
  align-items: center;
  font-size: 0.875rem; /* 14px / 16px = 0.875rem */
  display: inline-block;
  height: 100%;
  white-space: nowrap;
  width: auto;
  position: relative;
  border-radius: 12px;
  color: var(--text);
  line-height: 1;
  overflow: hidden;
  padding: 4px 12px 4px 30px;
  text-overflow: ellipsis;
  line-height: 1.25rem;
  word-break: break-word;

  &:before {
    border-radius: 50%;
    content: '';
    height: 10px;
    left: 8px;
    margin-top: -5px;
    position: absolute;
    top: 50%;
    width: 10px;
  }
  
 
}


  .c-pill--success {
    background: #b4eda0; }
    .c-pill--success:before {
      background: #6BC167; }
  .c-pill--warning {
    background-color: #ffc40022;    }
    .c-pill--warning:before {
      background: #ffc400; }
  .c-pill--danger {
    background-color: rgba(231, 111, 81, var(--noteBoxes-trans));  

     }
    .c-pill--danger:before {
      background: #E76F51; }

      .c-pill--info {
    background-color: rgba(0, 150, 199, var(--noteBoxes-trans));    

     }
    .c-pill--info:before {
      background: #0096C7; }





.downloadIcon {
  height: 30px;
  margin: 0px;
  padding: 0px;
  padding-left: 0px;
}

.downloadIcon svg {
  stroke: var(--primary-link);
}

.downloadIcon:hover {
  cursor: pointer;
}

.mdtoast {
text-align: center;
justify-content: center;
  }

.mdtoast.mdt--error {
  background-color: #c62828;
}

.mdtoast.mdt--info {
  background-color: #0d47a1;
}


.bullet-list{
  list-style-type: disc !important;;
}


.rewFooter {
  padding: 12px 16px!important;
}

.rew {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 0px!important;
  background-color:  var(--content);
  margin-bottom: 24px;
}

.rewContent {
  padding: 10px 16px 0px 16px!important;
  margin-bottom: 10px;
}


.rew hr {
  margin: 0px;
}




.rewBought {
  padding: 0px!important;
  margin: 0px!important;
}

@media (min-width: 600px) {
.rewBought {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 0px!important;
  background-color:  var(--content);
  margin-bottom: 24px;
}
.rewBoughtContent {
  padding: 10px 16px 0px 16px!important;
  margin-bottom: 10px;
}
}




.rewBought hr {
  margin: 0px;
}




.cardiAllways {
  border-radius: 12px;
  margin: 0px!important;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 0px 12px!important;
}



.cardiAllways hr {
  margin: 0px;
}

.profileNoPostsStateV2 {
  box-shadow: none !important;
}

.rewBuyTitle {
  text-align: center;
  font-size: 1.0625rem; /* 17px */
  font-weight: 600;
  margin: 12px 0;
}

.button-18.payment {
  display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns items to the left */
  background-color: var(--bg);
  color: var(--button-text-social);
  border: 1px solid var(--button-hover-border);
  height: 60px;
  margin-bottom: 16px;
  font-weight: normal;
}

.button-18.payment svg {
  margin-right: 18px;
}

.button-18.payment img {
  margin-right: 18px;
  width: 22px;
}

.button-18.payment:hover {
  border: 1px solid var(--input-border);
  background-color:  var(--payment-btn-hover);
}

.thumb {
  aspect-ratio: 1 / 1;
  background-color: var(--img-item-back);
  position: relative; 
  border: 1px solid var(--img-item-border) !important;
  border-radius: 12px;
}

.thumbWrapper {
  padding-top: 24px!important;
  margin-bottom: 24px!important;

}

.thumbWrapper p {
  margin-top: 4px;
  margin-bottom: 0px;
  font-size: 0.875rem; /* 14px / 16px = 0.875rem */
}

.thumbContent {
  border: 1px solid var(--img-item-border) !important;
  width: 100%;  /* Hace que el contenido ocupe todo el ancho de .thumb */
  height: 100%; /* Hace que el contenido ocupe toda la altura de .thumb */
  border-radius: inherit; /* Opcional: aplica el mismo borde redondeado */
  box-sizing: border-box; /* Asegura que los bordes se incluyan en las dimensiones */
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--img-item-back);
}


.thumb-img {
  width: 100%;

  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  aspect-ratio: 1;
}

.thumb-icon {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke: var(--photo-svg);
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  padding: 11px 10px 11px 14px;
  stroke: rgb(52, 140, 121);
  fill: rgb(52, 140, 121);
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.thumb-playing-badge {
  display: none;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.thumb-duration-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}

.thumb-error {
  width: 15%;
  height: 15%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke: var(--photo-svg);
}

.noteReward {
    display: flex;
    align-items: flex-start;
    padding: 10px;
   border: 2px solid var(--border-card);
    border-radius: 8px;
    background-color:  var(--content);
}

.comment {
    display: flex;
    align-items: flex-start;
    padding: 10px;
   border: 1px solid var(--border-card);
    border-radius: 8px;
    background-color:  var(--content);
}

.commentWrapper {
  margin-top: 24px!important;
   margin-bottom: 24px!important;
}

.msgReward {
  display: flex;
    align-items: flex-start;
    padding: 10px;
    border-radius: 8px;
    background-color:  var(--content);
    border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  margin-bottom: 24px;
}

.commentWrapper p {
  margin-top: 4px;
  font-size: 0.875rem; /* 14px / 16px = 0.875rem */
  margin-bottom: 0px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 15px;
    margin-top: 4px;
}

.avatar-error {
  background-color: var(--img-item-back);
}

.comment-content {
    display: flex;
    flex-direction: column;
}

.nickname {
    font-weight: 600;
    margin-bottom: 3px;
}

.message {
    line-height: 1.4;
}


.menu-items-big {
  padding-top: 40px;
}

#menu-main-big{
  min-height: 100vh; height: 100%;
}

/*#menu-main-big-items {
  margin-top: 10px; 
}*/

#menu-main-big-options {
  margin-top: 80px;
}

.menu-main-big-option {
  margin-bottom: 16px;
  font-weight: 500;
}

.fullHeight {
  min-height: 100vh!important; height: 100%!important;
}

.btn-add-content {
  margin-right: 8px;
  padding: 8px 16px;
}

.btn-add-content svg {
  margin-right: 12px;
}

.feedbackMain {
  color: var(--centered-loading-text);
  font-weight: 600;
}

.loadingContentMainNew {
  margin-top: 60px;
}

.loadingContentMainNew .loader {
 --_g: no-repeat radial-gradient(circle closest-side,var(--centered-loading-dots) 90%,#0000);
 margin: 0 auto;
}

.loadingContentMain {
  border-radius: 12px;
  color: var(--centered-loading-text);
  margin-top: 80px;
  font-weight: 600;
}

.loadingContentMain .loader {
 --_g: no-repeat radial-gradient(circle closest-side,var(--centered-loading-dots) 90%,#0000);
 margin: 0 auto;
}

.textError {
  color: var(--danger-color);
}

.rewardItem {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 0px!important;
  background-color:  var(--content);
  margin-bottom: 24px;
  /*margin-right: 8px;*/
}

.linkReward {
  color: var(--centered-loading-text)!important;
  font-weight: 400;
}

.rewardItem:hover {
  background-color: var(--reward-item-hover);
  cursor: pointer;
}

.rewardItemContent {
  padding: 10px 16px 0px 16px!important;
  margin-bottom: 10px;
}

@media (min-width: 993px) {
.contentMainLogged {
  margin-left: 40px!important;
}}










.action {
   position: absolute;
  top: 6px;
  right: 10px;
  z-index: 20; /* Asegúrate de que el contenedor tenga un z-index alto */
}


@media (min-width: 600px) {
  .action {
    position: absolute;
    top: 6px;
    right: 16px;
    z-index: 20; /* Asegúrate de que el contenedor tenga un z-index alto */
  }
}

.action .profileBtnHeader {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--profile-btn-header);
}

.action .profileBtnHeader svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 4px;
  stroke: var(--profile-btn-header);
}

.action .menu {
  position: absolute;
  top: 120px;
  right: 0px;
  padding: 10px 0px 0px 0px;
  width: 200px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); /* Cambiado de 'box-sizing' a 'box-shadow' */
  border-radius: 15px;
  visibility: hidden;
  opacity: 0;
  z-index: 30; /* Z-index alto para asegurar que esté al frente */
    background: var(--bg);
    border: 2px solid var(--input-border) !important;
}




.action .menu.active {
  top: 60px;
  visibility: visible;
  opacity: 1;
  padding-top: 0px;
}


.action .menu ul {
  margin-bottom: 0px;
  margin-top: 0px;
}

.action .menu ul li {
  list-style: none;
  padding: 16px;
  border-top: 1px solid var(--input-border);
  display: flex;
  align-items: center;
}

.action .menu ul li:first-child {
  border-top: 0px;
 } 

.action .menu ul li a {
  display: inline-block;
  text-decoration: none;
  color: var(--main-menu-text-color);
  font-weight: 500;
  width: 100%;
}

.action .menu ul li:hover {
  background-color: var(--menu-item-hover);
  cursor: pointer;
}

.nick {
  width: 100%;
  font-size: 1.125rem; /* 18px */
  padding: 8px 0 0 0;
  font-weight: 500;
  color: #555;
  line-height: 1.3em;
  margin-bottom: 0px;
  word-wrap: break-word!important;
  overflow-wrap: break-word!important;
}

.nick p {
  padding: 0px 10px;
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
}

.centered-container {
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
}


.mainProfileUrl{
  border: 1px solid var(--home-strong-green);
  border-radius: 12px;
  padding: 8px 12px!important;
  font-size: 1.0625rem; /* 17px */
}

.mainProfileUrl svg{
  margin-right: 8px;
}

.centered-child-back-payment {
  padding: 16px 0 24px 0;
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: none;
  color: var(--centered-loading-text);
  background-color: var(--bg);
}

@media (min-width: 993px) {
  .centered-child-back-payment {
      box-shadow: var(--centered-loading-shadow);
    }
}

.cardContentPage {
  padding: 0px!important;
  margin: 0px!important;
  background-color:  var(--content);
}

@media (min-width: 993px) {
.cardContentPage {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 24px!important;
}}

.cutText {
  text-overflow: ellipsis!important;
  line-height: 1.8rem!important;
  word-break: break-word!important;
}

.cutTextAccess {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.loaderPayment {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border: 5px solid;
  margin-top: 8px;
  border-color: var(--loader-payment-color);
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

#homeTitle {
  margin-top: 80px;
  text-align: center;
  line-height: 30px;
}

.homeStrongGreen {
  font-weight: 700;
  color: var(--home-strong-green);
}

#tableMainContainer {
  padding: 16px 16px 8px 16px!important;
  margin-left:auto;margin-right:auto;
}


.button-18.login-main {
  border-radius: 12px;
  min-height: 48px;
  padding-left: 12px;
  padding-right: 12px;
  border-collapse: separate;
  border: 1px solid #003725;
  border-radius: 10px!important;
  background-color: #004a31DD;
  box-shadow: var(--box-shadow-main-comission);
  min-width: 300px;
  height: 44px;
  color: #ffffff;
}

#mainCreateAccount {
  font-size: 1rem; /* 16px */
  color: var(--primary-link);
}

#tableMain{
  width: unset;
  margin-left:auto;margin-right:auto;
  border: 1px solid var(--border-main-comission);
  border-collapse: separate;
  border-radius: 14px!important;
  background-color: var(--bg);
  box-shadow: var(--box-shadow-main-comission);
}

@media (min-width: 600px) {
  #tableMain{
      background-color: var(--bg-big);
    } 
} 


#tableMain td {
  padding: 24px;
}

#tableMain td:first-child {
  padding-left: 24px;
}

#tableMain td:last-child {
  padding-right: 24px;  
}

#tableMain tbody tr:first-child td:first-child {
  padding-bottom: 0px;
}

#tableMain tbody tr:first-child td:nth-child(2) {
  padding-bottom: 0px;
}

.logo-container-main {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-bottom: 0px; 
      padding: 12px 0px 6px 0px;  
      background-color: var(--header-bg);
      box-shadow: var(--box-shadow-header-main);
      background-image: var(--header-back-img);
  }



.homeSectionTitle {
  padding-top: 50px;
  
}

.h3Main {
   line-height: 1.6em!important;
   font-size: 1.0625rem; /* 17px */
}

.homeNumberItem {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; 
  border: 2px solid var(--homeNumberItem-border);
  margin-right: 14px;
  color: var(--homeNumberItem-color);
  font-weight: 600;
  width: 32px; /* Ajusta para hacer un círculo */
  height: 32px; /* Ajusta para hacer un círculo */
  text-align: center;
}

.homeNumberItemText {
  padding-top: 6px;
  display: flex;
  align-items: center; /* Alinea verticalmente */
}

.homeItemContainer {
  font-size: 1.0625rem; /* 17px */
  display: flex;
  align-items: center;
}

.homeItemDescription {
  margin-top: 0px;
   line-height: 1.6em;
    padding-left: 48px;
  font-size: 1.0625rem; /* 17px */
}

.fontBig {
  font-size: 1.125rem; /* 18px */
}

.font16 {
  font-size: 1rem; /* 16px */
}


#tableMainNothing{
  width: unset;
  margin-left:auto;margin-right:auto;
  
 border-collapse: separate;
  padding: 18px;
  background: rgba(102, 187, 106, 0.08);
border-radius: 16px;
border: 1px solid rgba(102, 187, 106, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.8px);
-webkit-backdrop-filter: blur(6.8px);
}


#tableMainNothing td {
  padding: 0px;
}

#tableMainNothing td:last-child {
  padding-left: 18px;
}

#tableMainNothing td:first-child {
  padding-right: 18px;  
}



#tableMainNothing tbody tr:first-child td:first-child {
  padding-bottom: 2px;
}

#tableMainNothing tbody tr:first-child td:nth-child(2) {
  padding-bottom: 2px;
}

#moreInfoMain {
  font-size: 1.0625rem; /* 17px */
  padding-bottom: 250px;
  padding-left: 0px!important;
  padding-right: 0px!important;
}

#personalData {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 0.875rem; /* 14px / 16px = 0.875rem */
  background: var(--personal-data-back);
}

#uploadPreview {
  width: 100%;
}

@media (min-width: 600px) {
  #uploadPreview {
    width: 100%;
    max-width: 600px;
  }
}


.statusPageIcon {
  color: var(--status-page-icon);
}

.btnWithPaddingHorizontal{
  padding-right: 48px; 
  padding-left: 48px;
}

#headTableSubs::after
{
    content: "";
    display: block;
    height: 10px;
    width: 100%;
}


.mainBottomMargin {
 margin-bottom: 500px!important; 
}

.bottomMarginToFooter {
  margin-bottom: 200px!important;
}

.faqX {
  font-size: 1rem; /* 16px */
}

.accessItem {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 0px!important;
  background-color:  var(--content);
  margin-bottom: 12px;
  margin-right: 8px;
}

.accessItem:hover {
  background-color: var(--reward-item-hover);
  cursor: pointer;
}

.accessItemContent {
  padding: 10px 16px 0px 16px!important;
  margin-bottom: 10px;
}

.infoIcon {
  margin-left: 12px!important;
  color: #0096C7;
}

.btnsReward{
  margin-right: 8px!important;
}

.labelRadio {
  color: var(--text);
}

.homeSectionGreen {
  background-color: hsl(165deg 81% 35%/4%);
}

.homeSectionInfo {
  background: linear-gradient(to bottom, hsl(165deg 81% 35% / 4%), hsl(165deg 81% 35% / 1%));
}

.homeWhyUseSvg {
  display: inline; 
  vertical-align: middle;
  margin-bottom: 6px;
  margin-right: 12px;
}

.emoji-circle {
    fill: #ffc500;
}

.emoji-shadow {
    fill: #ff9f1e;
}

.emoji-eye-left,
.emoji-eye-right {
    fill: #00305f;
}

.emoji-pupil-left,
.emoji-pupil-right {
    fill: #ffffff;
}

.emoji-mouth {
    fill: #00305f;
}

.emoji-highlight {
    fill: #ffe059;
}

.emoji-glint-large,
.emoji-glint-small {
    fill: #ffe059;
}

#urlSample {
  margin: 0px!important;
  word-wrap: break-word;
  padding-left: 0px!important;
}

#kycGuideImg {
  max-width: 320px;
  cursor: default;
}

.whiteText {
  color: #fff;
}

.blackText {
  color: #424242;
}

#withPhoto {
    width: 140px; /* Asegura que el contenedor ocupe todo el espacio disponible */
    height: 140px; /* Mantiene la relación de aspecto de la imagen */
    display: block; /* Asegura que el contenedor sea de bloque */
    border: 1px solid var(--photo-svg) !important;
   border-radius: 7px;
}

.profileImg {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: 100%; /* La imagen también ocupa toda la altura */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin deformarse */
}


.input-field:disabled {
  color: var(--input-color)!important;
}

.stream-url-field {
  width: 100%;
  min-height: 56px;
  margin: 0 0 8px 0;
  padding: 12px 16px;
  border: 2px solid var(--input-border);
  border-radius: 7px;
  background-color: var(--bg);
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text-secondary);
  line-height: 1.5;
}

.stream-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.stream-actions .button-18.col {
  width: auto;
}

.stream-config-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding-bottom: 2px;
  margin-top: 28px;
}

.stream-config-heading-actions {
  margin-left: auto !important;
  min-width: 160px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.stream-config-heading-actions > .button-18 {
  margin-left: 0 !important;
}

.stream-config-heading-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stream-config-heading-copy strong {
  font-size: 1.1rem;
  line-height: 1.2;
}

.stream-config-heading-spacer {
  margin-top: 16px;
}

.stream-config-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stream-config-layout {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.stream-duration-block {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: none;
}

.stream-section-label {
  margin: 0;
  font-weight: 600;
}

.stream-block-separator {
  margin: 22px 0;
}

.stream-duration-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  flex-shrink: 0;
}

.stream-duration-input {
  margin-bottom: 0 !important;
  text-align: center;
  width: 88px !important;
  min-width: 88px;
}

.stream-duration-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
}

.stream-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 40px;
  height: 40px;
  padding: 0 14px !important;
}

.stream-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  column-gap: 36px;
  row-gap: 14px;
  align-items: start;
  justify-items: start;
  margin-bottom: 0;
  padding-top: 4px;
}

.stream-option-col {
  width: 100%;
  margin-bottom: 0;
  text-align: left;
}

.stream-option-col .checkbox-wrapper-4 {
  display: block;
  width: 100%;
}

.stream-option-col .checkbox-wrapper-4 .cbx {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: flex-start;
}

.stream-option-col .checkbox-wrapper-4 .cbx span:first-child {
  margin-right: 0;
  flex-shrink: 0;
  margin-top: 1px;
}

.stream-option-col .checkbox-wrapper-4 .cbx span:last-child {
  line-height: 1.4;
}

.stream-media-box {
  min-height: 100%;
  padding: 2px 0 0;
}

.stream-media-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}

.stream-media-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 0 0;
  border-top: 1px solid var(--border-card);
}

.stream-media-empty {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.stream-media-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: flex-start;
  gap: 14px;
}

.stream-media-preview.hidden,
.stream-media-fallback.hidden,
.stream-media-audio-player.hidden,
.stream-media-image.hidden,
.stream-media-audio.hidden,
.stream-media-actions.hidden,
.stream-media-empty.hidden {
  display: none !important;
}

.stream-media-image {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 240px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border-card);
  background: var(--bg);
}

.stream-media-image[src=""] {
  display: none;
}

.stream-media-fallback {
  width: 100%;
  max-width: 420px;
  min-height: 118px;
  border: 1px solid var(--border-card);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-big) 88%, var(--text) 12%);
  color: var(--secondary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
}

.stream-media-image-fallback {
  max-width: 320px;
  min-height: 220px;
}

.stream-media-audio-fallback {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.stream-media-audio-fallback-bar {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bg) 72%, var(--text) 28%) 0%,
    color-mix(in srgb, var(--bg) 66%, var(--text) 34%) 55%,
    color-mix(in srgb, var(--bg) 72%, var(--text) 28%) 100%
  );
  position: relative;
}

.stream-media-audio-fallback-bar::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid color-mix(in srgb, var(--text-secondary) 80%, var(--text) 20%);
  transform: translateY(-50%);
}

.stream-media-audio-fallback-bar::after {
  content: "";
  position: absolute;
  left: 52px;
  right: 18px;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-big) 84%, var(--text) 16%);
  transform: translateY(-50%);
}

.stream-media-audio {
  width: 100%;
  max-width: 560px;
}

.stream-media-audio-player {
  width: 100%;
  max-width: 560px;
  min-height: 60px;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-big) 84%, var(--text) 16%);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
}

.stream-media-audio-toggle,
.stream-media-audio-progress {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.stream-media-audio-toggle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, var(--text) 30%);
  color: color-mix(in srgb, var(--text-secondary) 72%, var(--text) 28%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stream-media-audio-toggle:hover,
.stream-media-audio-toggle:focus,
.stream-media-audio-toggle:focus-visible,
.stream-media-audio-toggle:active {
  background: color-mix(in srgb, var(--bg) 62%, var(--text) 38%);
  color: color-mix(in srgb, var(--text-secondary) 62%, var(--text) 38%);
  outline: none;
  box-shadow: none;
}

.stream-media-audio-toggle-play {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
  margin-left: 3px;
}

.stream-media-audio-toggle.is-playing .stream-media-audio-toggle-play {
  width: 12px;
  height: 14px;
  border: 0;
  margin-left: 0;
  background:
    linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px);
}

.stream-media-audio-progress {
  width: 100%;
  display: block;
}

.stream-media-audio-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 64%, var(--text) 36%);
  display: block;
  overflow: hidden;
}

.stream-media-audio-progress-current {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--primary-link);
}

.stream-media-audio-time {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--secondary-text);
  white-space: nowrap;
}

.stream-media-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 992px) {
  .stream-options-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    column-gap: 28px;
  }

  .stream-config-layout {
    align-items: flex-start;
  }

  .stream-media-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stream-duration-block,
  .stream-media-col {
    max-width: 100%;
  }

  .stream-media-col {
    padding-top: 18px;
  }
}

@media (max-width: 760px) {
  .stream-config-heading {
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .stream-config-heading-actions {
    margin-left: 0 !important;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .stream-config-heading-actions:not(:has(.button-18:not(.hidden))) {
    display: none;
  }

  .stream-config-heading-spacer {
    margin-top: 12px;
  }

  .stream-options-grid {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .stream-duration-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
  }

  .stream-media-preview {
    grid-template-columns: 1fr;
  }

  .stream-media-actions .button-18,
  .stream-media-empty .button-18 {
    width: 100%;
    justify-content: center;
  }

  .stream-media-audio-player {
    max-width: 100%;
    min-height: 56px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
  }
}


[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
    background-color: var(--primary-link);
}

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
    border: 2px solid var(--primary-link);
}

.break-all {
  word-break:break-all;
}

.price-received {
  color: var(--price-received);
}

#vidRew {
    max-width: 800px;
    height: auto;
    margin: 0 auto;
}

#vidData{
  padding-left: 16px!important;
  padding-right: 16px!important;
}

.iconPageState {
  color: var(--icon-page-state);
}

.textPageState {
  padding-left: 8px!important;
  padding-right: 8px!important;
}

/* modal */

.modal-window {
  position: fixed;
  background-color: #000000EE;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--text);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.modal-window.noHideBack {
  background-color: var(--modal-window-back)!important;
}

.modal-window:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}


@media (max-width: 500px) {
  .modal-window > div {
    width: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 16px 16px 16px;
    background: var(--bg);
    border: 2px solid var(--border-color-modal);
  }
}

@media (min-width: 501px) {
  .modal-window > div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 16px 16px 16px;
    background: var(--bg);
    border: 2px solid var(--border-color-modal);
  }
}

.modal-window header {
  font-weight: bold;
}
.modal-window h1 {
  font-size: 130%;
  margin: 0 0 40px;
}

.modal-close {
  color: #fff;
  line-height: 50px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 50px;
  text-decoration: none;
  cursor: pointer;
  border-bottom: none;
}

.modal-window > div {
  border-radius: 1rem;
}

.modal-window div:not(:last-of-type) {
  margin-bottom: 15px;
}

.btnModal {
  background-color: white;
  padding: 1em 1.5em;
  border-radius: 0.5rem;
  text-decoration: none;
}
.btnModal i {
  padding-right: 0.3em;
}

.noBorders:hover {
  border: none!important;
}

.fileWrapper {
  margin: 0px;
  padding: 0px; 
  margin-bottom: 16px;
}

.svgContainer {
  margin-top: 2px!important;
  vertical-align: middle;
}

.fileWrapper a {
  font-size: 1rem; /* 16px */
  word-break: break-word;
  word-break: break-all;
}

.fileWrapperSub {
  margin: 0px;
  padding: 0px; 
  margin-top: 16px;
  margin-bottom: 24px;
  font-size: 0.875rem; /* 14px / 16px = 0.875rem */
}

.fileCreatedAt {
  margin-left: 28px!important;
}

.fileWrapperSub a {
  font-size: 1rem; /* 16px */
  word-break: break-word;
  word-break: break-all;
}

@media (max-width: 279px) {
  .fileNameItem{
    padding-left: 0px!important; 
  }
}

.withStarReward {
  fill: var(--pinned-rew-layout);
}

.fileNameText{
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.optionsSub{
  font-size: 0.9375rem!important;/* 15px */
}

.optionsPost{
 font-size: 0.9375rem!important;/* 15px */ 
}

.menu-item-small{
}



.menu-item-profile {
    
    border: var(--collapsible-border);
    cursor: pointer;
    border: none;
    padding: 20px 12px;
    font-size: 0.9375rem!important;/* 15px */
    color: var(--menu-item-profile-text)!important;
  }

.menu-items-profile-layout {
  background-color: var(--profile-menu-items);
  border-bottom: 1px solid var(--hr-color);
}

@media (max-width: 600px) {
  .menu-item-profile {
  font-size: 0.875rem!important; /* 14px / 16px = 0.875rem */;
 } 
} 

  .menu-item-profile:hover {
background-color: none;
}

.menu-item-profile svg {
    margin: 8px 0 0 0;
  }

  .selectedItem-profile svg{
    stroke-width: 2;
  }  

  .selectedItem-profile {
    color: var(--menu-item-profile-selected)!important;
    border-bottom: 2px solid var(--border-bottom-main-nav);
    font-weight: 600;
  }

.menu-item-small-profile{
  padding: 12px 0!important; 
}

.profile-svg-card {
  stroke: var(--centered-loading-text);
}

.my-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--initial-avatar);
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 0.875rem; /* 14px / 16px = 0.875rem */
    margin-right: 8px;
}

.my-circle::before {
    content: attr(title);
}

.profileHistory {
    display: flex;
    align-items: center; /* Centra verticalmente todos los elementos */
    gap: 10px; /* Espaciado entre el círculo, texto y fecha */
    border-radius: 12px;
  border: 1px solid var(--border-card);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 12px!important;
}

.optionsPostProfile{
  margin-top: 4px;
  font-size: 0.8125rem!important; /* 13px */ 
}

.profileHistoryWrapper {
    margin-bottom: 28px;
}

.profileHistoryComment {
  margin-top: 4px;
  font-style: italic;
  text-overflow: ellipsis!important;
  line-height: 1.8rem!important;
  word-break: break-word!important;
}

.soonText {
  font-style: italic;
}

#profileHeader {
  background-color: var(--profile-bg-color, hsl(165deg 81% 35% / 4%));
  padding: 0px;
  border-bottom: 1px solid var(--hr-color);
}

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
    font-size: 1rem; /* 16px */
}

.avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 88px; /* Asegura el tamaño del contenedor */
    height: 88px; /* Asegura el tamaño del contenedor */
}

.avatar-profile {
    width: 100%; /* Ocupa todo el contenedor */
    height: 100%; /* Ocupa todo el contenedor */
    object-fit: cover; /* Recorta y centra la imagen */
    border-radius: 50%; /* Hace que la imagen sea redonda */
     /* border: 3px solid var(--profile-avatar-border);  */
    display: block; /* Elimina espacio adicional generado por imágenes inline */
}
.content-container {
    display: flex;
    padding: 0px!important;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.nick-profile {
    font-weight: bold;
    margin-top: 12px;
    font-size: 1.0625rem; /* 17px */
}

.user-stats-profile {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-stats-profile li {
    margin-bottom: 6px;
    font-size: 0.9375rem!important;/* 15px */
}

.user-stats-profile li:last-child {
  margin-bottom: 0px!important;
}

.about-me-profile {
    font-size: 0.9375rem!important;/* 15px */
    margin-top: 0px;
    line-height: 1.5;
}

@media (min-width: 601px) {
    .profile-header {
        flex-direction: row;
        align-items: center;
    }

    .avatar-container {
        margin-bottom: 0;
        margin-right: 20px;
    }

}

#goalLayout{
  border-bottom: 1px solid var(--hr-color);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--profile-bg-color, hsl(165deg 81% 35% / 8%)) 58%, var(--content)) 0%, color-mix(in srgb, var(--profile-bg-color, hsl(165deg 81% 35% / 5%)) 40%, var(--bg)) 100%) !important;
}

.goal-progress {
    transition: width 0.3s ease-in-out; /* Para animación suave */
}

#goal-progress-percent {
    width: var(--goal-progress-width, 0);
}

.goal-card {
    margin: 18px 0;
}

.goal-description {
    color: var(--text-secondary);
    margin-top: 6px !important;
    margin-bottom: 0px;
    font-size: 14px;
    line-height: 1.35;
}

.goal-description:empty {
  display: none;
}

.goal-title {
  margin-bottom: 0 !important;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
}

.link-profile {
  font-size: 0.9375rem!important;/* 15px */
  display: flex;
  align-items: center;
}

.link-profile svg {
  margin-right: 6px;
}

.stats-item{
  color: var(--text-secondary);
}

.stats-item strong {
  color: var(--text); 
  margin-right: 2px;
}

.progress-container {
    width: 100%;
    height: 26px;
    background-color: var(--progress-bg, #4caf50AA); /* ← usa variable */
    border-radius: 999px;
    position: relative;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: var(--progress-bar, #4caf50); /* ← usa variable */
    border-radius: 999px;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 650;
    font-size: 0.8125rem;
    white-space: nowrap;
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.7),   /* glow difuso */
        1px 1px 2px rgba(0, 0, 0, 0.5); /* contorno sutil */
}

@media (min-width: 601px) {
  #goalLayout #profileOptions {
    float: none !important;
    left: auto !important;
    width: calc(100% - 32px) !important;
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }

  #goalLayout .goal-card > .col {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  #goalLayout .goal-card > .col > .m8 {
    flex: 1 1 auto;
    min-width: 0;
  }

  #goalLayout .goal-card > .col > .m4 {
    flex: 0 0 260px;
    min-width: 210px;
    padding-right: 0;
  }

  #goalLayout .progress-container {
    max-width: 260px;
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  #goalLayout .goal-card {
    margin: 14px 0 16px;
  }

  #goalLayout .goal-title,
  #goalLayout .goal-description {
    text-align: center;
  }

  #goalLayout .goal-description {
    margin-top: 5px !important;
  }

  #goalLayout .progress-container {
    height: 24px;
    max-width: 340px;
    margin: 0 auto;
  }
}

#profileContent{
  background-color: var(--bg)!important;
  padding-bottom: 600px!important;
  position: relative;
  overflow: hidden;
}

@media (max-width: 600px) {

#profileHeader{
  padding: 0px 4px!important;
}
#goalLayout{
 padding: 0px 16px!important; 
}
#profileContent{
 padding: 0px 16px!important; 
 padding-bottom: 600px!important;
}
#description-profile {
      text-align: center;
    }
    #siteLayout {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #statsUser{
      display: flex;
        justify-content: center;
        align-items: center;
    }
}


#profileContent {
  position: relative;
  z-index: 0;
}

#profileContent::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: calc(100% - 10px);
  background: var(--background-profile);
  pointer-events: none;
  z-index: -1;
}


#btnGoTop {
  position: fixed; 
  bottom: 32px; 
  right: 16px; 
  z-index: 99; 
  border: 2px solid var(--primary-link); 
  outline: none; 
  background-color: var(--bg); 
  color: white; 
  cursor: pointer; 
  padding: 10px; 
  border-radius: 50%; 
  font-size: 1.125rem; /* 18px / 16px = 1.125rem */
  width: 48px;
  height: 48px;
}

#btnGoTop .material-icons {
  color: var(--primary-link); 
}

.item-card {
  padding: 20px;
}

.item-icon {
  stroke: var(--text-secondary);
  margin-right: 8px;
}

.item-details {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
  background-color: var(--content-big);
  
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.item-title {
  font-size: 1rem; /* 16px */
  font-weight: bold;
  margin-bottom: 10px;
  padding: 20px 20px 0 20px;
  display: block; /* Ocupa todo el ancho del contenedor padre */
  overflow: hidden; /* Oculta el contenido que exceda el ancho */
  text-overflow: ellipsis; /* Agrega puntos suspensivos al final si el texto es demasiado largo */
  word-break: break-word!important;
}

.item-title.rewTitle {
  padding-top: 10px!important;
}

.item-meta {
  margin-top: 8px;
  padding: 0 20px;
}

.item-meta-second {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
}

.item-price {
  font-size: 1.0625rem; /* 17px */
  color: var(--price);
  font-weight: 650;
  padding: 8px 0!important;
}

.item-price-big {
  font-size: 1.0625rem; /* 17px */
  color: #4caf50;
  font-weight: 650;
  text-align: right;
}

#rewardList .item-card {
  margin-bottom: 32px;
}

.rewards-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 1.125rem;
  margin-top: 0;
  font-weight: 500;
}

.rewards-title::before,
.rewards-title::after {
  content: "";
  flex: 1;
  height: 1px;              /* finita */
  background-color: #cfd8dc; /* más suave que el texto */
  max-width: 120px;         /* controla el largo de las barras */
}



.rewards-count {
  color: var(--text-secondary); /* Cambia este valor al color deseado */
  font-weight: bold; /* Resalta el número */
}

.rightIconRew {
  display: flex; /* Usar flexbox para manejar el SVG */
  align-items: center; /* Centrar verticalmente el SVG */
  justify-content: center; /* Opcional: Centrar horizontalmente si el contenedor es más grande */
}

.show-more-description{
  cursor: pointer;
  font-weight: 700;
  color: var(--primary-link);
  text-decoration: none;
}

.btnProfileItems{
  cursor: pointer;
}

.btnProfileItems:hover {
  background-color: var(--table-hover);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--box-shadow);
}

.rewardItemProfile {
  cursor: pointer;
}

.rewardItemProfile:hover {
  background-color: var(--table-hover);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--box-shadow);
}

.button-18.payment-profile {
  display: flex;
    align-items: center;
  background-color: var(--bg);
  color: var(--button-text-social);
  border: 1px solid var(--button-hover-border);
  margin-bottom: 16px;
  /*width: 100%;*/
  min-width: 150px;
  font-weight: normal;
}

.payment-container {
  width: 100%;
  box-sizing: border-box;
}

.payment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.payment-title {
  width: 100%;
  text-align: left;
}

.button-18.payment-profile-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--btn-payment);
  color: var(--button-text-social);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  padding: 10px 7px;
  min-width: 150px;
  flex: 0 1 calc(33.333% - 12px);
  max-width: calc(33.333% - 12px);
  text-align: center;
}

@media (max-width: 450px) {
  .button-18.payment-profile-new {
    flex: 0 1 90%;
    max-width: 90%;
  }
}

.button-18.payment-profile-new p {
  white-space: nowrap;
}

.button-18.payment-profile-new img {
  width: 20px;
  height: 20px;
}

.button-18.payment-profile-new:hover {
  border: 1px solid var(--button-hover-border);
}



.profile-price {
  display: block;
  font-weight: 400;
  margin: 0px;
}


.button-18.payment-profile svg {
  margin-right: 18px;
}

.button-18.payment-profile img {
  margin-right: 18px;
  width: 22px;
}

.button-18.payment-profile:hover {
  border: 1px solid var(--input-border);
  background-color:  var(--payment-btn-hover);
}

.rewPinned {
  /*border-color: var(--price)!important;*/
}

.rewPinned .rewTitle {
  padding-right: 40px!important;
}

#profileNick{
  margin-bottom: 6px;
}

@media (min-width: 601px) {
  #profileHeader {
    padding: 0 10px !important;
  }

  #profileHeader .profile-header {
    align-items: center;
    justify-content: center;
    gap: 26px;
    min-height: 108px;
  }

  #profileHeader .profile-header > .col:first-child {
    padding: 0 !important;
    flex: 0 0 auto;
  }

  #profileHeader .avatar-container {
    width: 86px;
    height: 86px;
    margin-right: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--content) 60%, transparent);
  }

  #profileHeader .avatar-profile {
    border: 1px solid color-mix(in srgb, var(--input-border) 72%, transparent);
    background: var(--content);
  }

  #profileHeader .content-container {
    min-width: 0;
    max-width: 720px;
    gap: 5px;
  }

  #profileHeader #profileNick {
    margin: 0 0 2px;
    color: var(--text);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  #profileHeader #description-profile {
    margin: 0;
    color: var(--text);
    font-size: 15px !important;
    line-height: 1.45;
  }

  #profileHeader .user-stats-profile {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  #profileHeader .user-stats-profile.hidden,
  #profileHeader #siteLayout.hidden,
  #profileHeader #statsUser.hidden,
  #profileHeader .stats-item.hidden {
    display: none !important;
  }

  #profileHeader .user-stats-profile li {
    margin-bottom: 0;
  }

  #profileHeader #siteLayout {
    line-height: 1.2;
  }

  #profileHeader .link-profile {
    align-items: center;
    width: fit-content;
    max-width: 100%;
    font-size: 15px !important;
    font-weight: 650;
    line-height: 1.2;
  }

  #profileHeader .link-profile svg {
    margin-right: 7px;
    flex-shrink: 0;
  }

  #profileHeader #statsUser {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 12px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.25;
  }

  #profileHeader .stats-item {
    color: var(--text-secondary);
  }

  #profileHeader .stats-item strong {
    color: var(--text);
    font-weight: 650;
  }

  #profileHeader #receivedStats.padding-right-sm {
    padding-right: 0 !important;
  }
}

@media (max-width: 600px) {
  #profileHeader {
    padding: 0 12px !important;
  }

  #profileHeader .profile-header {
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 2px !important;
  }

  #profileHeader .profile-header > .col:first-child,
  #profileHeader .content-container {
    padding: 0 !important;
  }

  #profileHeader .avatar-container {
    width: 84px;
    height: 84px;
    margin: 0 auto 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--content) 60%, transparent);
  }

  #profileHeader .avatar-profile {
    border: 1px solid color-mix(in srgb, var(--input-border) 72%, transparent);
    background: var(--content);
  }

  #profileHeader .content-container {
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 5px;
  }

  #profileHeader .content-container > .sm.hide-on-med-and-up {
    display: none !important;
  }

  #profileHeader .content-container:has(#description-profile.hidden):has(#siteLayout.hidden) {
    gap: 2px;
  }

  #profileHeader #profileNick{
    margin: 0;
    text-align: center!important;
    color: var(--text);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -0.01em;
  }

  #profileHeader #description-profile {
    max-width: 92vw;
    margin: 0 auto;
    color: var(--text);
    font-size: 15px !important;
    line-height: 1.5;
    text-align: center;
  }

  #profileHeader .user-stats-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 0;
  }

  #profileHeader .user-stats-profile.hidden,
  #profileHeader #siteLayout.hidden,
  #profileHeader #statsUser.hidden,
  #profileHeader .stats-item.hidden {
    display: none !important;
  }

  #profileHeader .content-container:has(#description-profile.hidden):has(#siteLayout.hidden) .user-stats-profile {
    margin-top: 0;
  }

  #profileHeader .user-stats-profile li {
    margin-bottom: 0;
  }

  #profileHeader .link-profile {
    justify-content: center;
    max-width: 92vw;
    font-size: 15px !important;
    font-weight: 650;
    line-height: 1.2;
  }

  #profileHeader .link-profile svg {
    margin-right: 7px;
    flex-shrink: 0;
  }

  #profileHeader #statsUser {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 12px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.25;
  }

  #profileHeader #receivedStats.padding-right-sm {
    padding-right: 0 !important;
  }
}

input[type=range]::-webkit-slider-thumb {
        height: 24px;
        width: 24px;
        border-radius: 50% !important;
        background: var(--primary-link) !important;
        -webkit-transition: -webkit-box-shadow .3s;
        transition: -webkit-box-shadow .3s;
        transition: box-shadow .3s;
        transition: box-shadow .3s, -webkit-box-shadow .3s;
        -webkit-appearance: none;
        background-color: #26a69a;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        margin: -10px 0 0 0;
    }

.range-field .thumb {
  display: none;
}

.range-field {
  margin-bottom: 0px;
}

#cantMatSueltos {
   font-size: 1.0625rem; /* 17px */
   font-weight: 600;
}

a.no-default-styles {
    color: inherit; /* Hereda el color del elemento padre */
    text-decoration: none; /* Elimina el subrayado */
    all: unset; /* Opcional: Restablece todos los estilos a su valor inicial */
}

.profileSvgSection {
  margin-right: 8px!important;
}

.profileBuyItem{
  margin-top: 72px!important;
}

#backProfile{
  position: fixed;
    left: 10px;
    top: 56px; 
    z-index: 1000; 
    cursor: pointer;
}

.cardiNew {
  padding: 0px 8px!important;
  margin: 0px!important;
}

@media (min-width: 993px) {
.cardiNew {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  color: var(--centered-loading-text);
  background-color:  var(--content-big);
  padding: 18px!important;
}
}

.commonHeader{
  background-color: hsl(165deg 81% 35%/4%);
  padding: 24px 0px!important;
  border-bottom: 1px solid var(--hr-color);
}

.commonHeader h1{
  vertical-align: middle;
  display: inline;
  font-size: 1.375rem; /* 22px / 16px = 1.375rem */
}

nav {
    position: relative;
    height: auto;
}

.commonHeaderSmall{
  background-color: var(--profile-bg-color, hsl(165deg 81% 35%/4%));
  padding: 12px 0px!important;
  border-bottom: 1px solid var(--hr-color);
}

.commonHeaderSmall h2{
  vertical-align: middle;
  display: inline;
}

.commonHeaderSmall h1{
  font-size: 1.375rem; /* 22px / 16px = 1.375rem */
}

.simpleBorder {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  padding: 18px!important;
}

#headTableSubs {
  padding-bottom: 24px!important;
}

.tran-icon-vertical-icon {
  vertical-align: middle;
  margin-bottom: 4px;
}

#expiresLayout{
  padding: 8px 0px!important;
  background-color: var(--expires-layout-bg);
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--hr-color);
}

#subPriceDetails{
  font-size: 1.0625rem; /* 17px */
  font-weight: 650;
}

.comparison-check {
  color: var(--home-strong-green);
  font-weight: 600;
}
.comparison-clear {
  color: var(--danger-color);
  font-weight: 600;
}

.comparisonTable {
  border: 1px solid var(--hr-color);
}

.comparisonTable th, .comparisonTable td {
  text-align: center;
  padding: 12px;
  font-weight: normal;
}

.comparisonTable th:first-child, .comparisonTable td:first-child {
  text-align: left;
}

#radio-cards-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Asegura que haya espacio entre las tarjetas */
    gap: 8px; /* Agrega la separación de 8px entre los elementos */
}

.radio-card {
    border: 2px solid var(--hr-color);
    border-radius: 10px;
    padding: 16px 0px!important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    box-sizing: border-box;
}

.radio-card > .text-center {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (min-width: 800px) {
  .radio-card {
    flex: 1 1 calc(50% - 8px);
  }
}  

.radio-card:hover {
    border: 2px solid var(--home-strong-green);
    cursor: pointer;
}

.radio-card-check {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
}

.radio-card-check i {
    font-size: 1.6rem;
    color: #016787;
}

.text-center {
    text-align: center;
}

.radio-card-label {
    font-weight: 600;
    font-size: 1.0625rem; /* 17px */
}

.radio-card-label-description {
    margin-top: 16px;
    text-align: left;
    margin-bottom: 12px;
    padding: 0px 16px;
}

.radio-card.selected {
    border: 2px solid var(--home-strong-green);
}

.radio-card.selected .radio-card-check {
    display: inline-flex;
}

.selectedType {
  stroke: var(--home-strong-green);
}

.radio-card-comisiones {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hr-color);
  text-align: left;
  width: 100%;
}

.radio-card-comisiones .comision-title {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: block;
  padding: 0px 16px;
}

.comision-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0px 16px;
}

.comision-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  padding: 6px 10px 4px 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--home-strong-green) 40%, transparent);
  background-color: var(--table-hover, rgba(0,0,0,0.04));
  color: var(--text-secondary);
}

.comision-item strong {
  color: var(--home-strong-green);
}

.comisiones-nota {
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.update-comisiones-card {
  border: 2px solid var(--hr-color);
  border-radius: 10px;
  padding: 16px 0px;
}

.update-comisiones-card .radio-card-comisiones {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.update-comisiones-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 4px;
}



.starAccountType {
  display: inline; 
  vertical-align: middle;
  margin-bottom: 2px;
  margin-right: 8px;
}

.checkAccountType {
  display: inline; 
  vertical-align: middle;
  margin-bottom: 4px;
  margin-right: 4px;
  stroke: rgba(0, 136, 89, 0.9);
}

.accountTypeItem{
  margin-bottom: 8px!important;
}

.comisiones {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 1px;
}

.tarjeta {
  padding: 12px 0px;
  border-radius: 10px;
  border: var(--card-border);
  box-shadow: var(--box-shadow);
  text-align: center;
}

.tarjetaTitle {
  margin-bottom: 6px;
  color: var(--primary-color);
}

/* Diseño para pantallas grandes */
.tarjetas-grandes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.tarjetas-grandes .tarjeta {
  width: 32%;
}

/* Diseño para pantallas chicas */
.tarjetas-chicas {
  display: none;
}

/*
table {
  width: 100%;
  border-collapse: collapse;
}
*/

.tarjeta td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--card-border);
}

/* Mostrar solo el diseño adecuado */
@media (max-width: 767px) {
  .tarjetas-grandes {
    display: none;
  }
  .tarjetas-chicas {
    display: flex;
    flex-direction: column;
  }
  .tarjetaTitle{
    text-align: center;
    font-weight: normal;
  }
  .tarjeta {
    margin-bottom: 36px;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
  .tarjeta table td:last-child {
    text-align: right;
  }
  .tarjeta table tr:last-child {
    border-bottom: none; /* Elimina la línea de división en la última fila */
  }
}

.paymentIconConfig{
  height: 22px;
  width: 22px;
  vertical-align: middle;
  margin-bottom: 6px;
}

.paymentIconConfig:not(:first-child) {
  margin-left: 14px;
}

.pinnedRewLayout {
  background-color: var(--primary-link);
  padding: 2px 10px!important;
  font-weight: 600;
  font-size: 0.9375rem; /* 15px */
  border-bottom-left-radius: 12px;
  border-top-right-radius: 12px;
  position: absolute;
  right: 12px;
  top: 0;
}

.award-icon {
    width: 24px;
    height: 24px;
}

.award-gold {
    fill:var(--award-gold);fill-rule:evenodd;
}

.award-bronze {
  fill:var(--award-bronze);fill-rule:evenodd;
}

.award-silver {
  fill:var(--award-silver);fill-rule:evenodd;
}

.awardDetails {
  padding: 0 !important;
  margin: 0 !important;
  padding-left: 12px!important;
  padding-right: 12px!important;
  font-weight: 600;
  white-space: nowrap;      /* Evita el salto de línea */
  overflow: hidden;         /* Oculta el contenido que sobresale */
  text-overflow: ellipsis;  /* Agrega "..." cuando el texto es demasiado largo */
  max-width: 100%;          /* Asegura que no se extienda más allá del contenedor */
}

.awardPanel {
  margin-bottom: 16px!important;
  padding-left: 16px!important;
  padding-right: 16px!important;
  display: flex;
  align-items: center;
}

.center-text {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#topDonorsLayout {
  border-radius: 12px;
  border: 1px solid var(--border-card);
  color: var(--centered-loading-text);
  background-color: var(--content-big);
  padding: 0 !important;
  overflow: hidden;
}

#topDonorsTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 6px;
  font-weight: 700;
  padding: 0 18px;
}

.cls-2 {
  fill: var(--award-gold);
  fill-rule: evenodd;
}

.leaderboard {
  fill-rule: evenodd;
  margin-right: 0;
  fill: #9E9E9E;
  width: 22px;
  height: 22px;
}

.donor_count_val {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px; /* Espaciado opcional entre el número y el icono */
}

.award-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#donorsContent{
  padding-top: 12px;
  padding-bottom: 4px;
  padding-left: 0px!important;
  padding-right: 0px!important;
}

#donorsContent {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 12px 16px 18px !important;
}

#donorsContent > div {
  min-width: 0;
  position: relative;
}

#donorsContent > div::before {
  content: "#" attr(data-rank);
  flex-shrink: 0;
  min-width: 32px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#donorsContent > div + div {
  border-top: 1px solid var(--hr-color);
  padding-top: 14px;
}

#donorsContent .awardPanel {
  width: 100% !important;
  left: auto !important;
  margin: 0 !important;
  padding: 10px 6px !important;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  min-height: 0;
  gap: 12px;
}

#donorsContent > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

#donorsContent > div.hidden {
  display: none !important;
}

#donorsContent .awardDetails {
  padding: 0 !important;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}

#donorsContent .center-text {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}

#topDonorsLayout .donor_count_val {
  justify-content: flex-end;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
  padding-left: 12px;
}

#topDonorsLayout .award-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 0;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  #donorsContent {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 6px 22px 6px !important;
    align-items: stretch;
  }

  #donorsContent > div + div {
    border-top: 0;
    padding-top: 0;
  }

  #donorsContent.donors-count-1 {
    grid-template-columns: minmax(0, 420px);
    gap: 14px;
    justify-content: center;
    padding: 12px 16px 18px !important;
  }

  #donorsContent.donors-count-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 24px;
  }

  #donorsContent.donors-count-2 #donor0 {
    padding-right: 22px;
    border-right: 1px solid var(--hr-color);
  }

  #donorsContent.donors-count-2 #donor1 {
    padding-left: 22px;
  }

  #donorsContent.donors-count-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 24px;
  }

  #donorsContent.donors-count-3 #donor0 {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    padding-right: 22px;
    border-right: 1px solid var(--hr-color);
  }

  #donorsContent.donors-count-3 #donor1,
  #donorsContent.donors-count-3 #donor2 {
    min-height: 48px;
  }

  #donorsContent.donors-count-3 #donor2 {
    border-top: 1px solid var(--hr-color);
    padding-top: 12px;
    margin-top: 12px;
  }

  #donor0 .awardPanel {
    padding: 10px 6px !important;
  }

  #donorsContent .awardPanel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "medal name"
      "medal count";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
  }

  #donorsContent .awardPanel > div:first-child {
    grid-area: medal;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    height: 100%;
    padding: 0 !important;
  }

  #topDonorsLayout .award-icon {
    display: block;
  }

  #donorsContent .awardDetails {
    grid-area: name;
  }

  #donorsContent .awardPanel > div:last-child {
    grid-area: count;
    justify-self: start;
    padding-left: 0 !important;
  }

  #topDonorsLayout .donor_count_val {
    padding-left: 0;
    justify-content: flex-start;
  }

  #donorsContent.donors-count-1 .awardPanel {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #donorsContent.donors-count-1 .awardPanel > div:first-child {
    align-self: center;
    height: auto;
  }

  #donorsContent.donors-count-1 .awardDetails {
    grid-area: auto;
    flex: 1;
  }

  #donorsContent.donors-count-1 .awardPanel > div:last-child {
    grid-area: auto;
    justify-self: auto;
    margin-left: auto;
    padding-left: 12px !important;
  }

  #topDonorsLayout #donorsContent.donors-count-1 .donor_count_val {
    justify-content: flex-end;
    padding-left: 12px;
  }
}

@media (max-width: 600px) {
  #topDonorsTitle {
    padding: 0 14px;
    font-size: 1rem;
  }

  #donorsContent {
    padding: 14px 12px 12px !important;
  }

  #donorsContent .awardPanel {
    padding: 10px 4px !important;
  }
}

#paymentWrapper{
  display: flex; 
  align-items: center;
}

/* Clases para fondo (background) */
.bg-pink             { background: var(--pink); color: #fff; }
.bg-pink-soft        { background: var(--pink-soft); color: #fff; }
.bg-orange           { background: var(--orange); color: #fff; }
.bg-purple           { background: var(--purple); color: #fff; }
.bg-blue             { background: var(--blue); color: #fff; }
.bg-green            { background: var(--green); color: #fff; }
.bg-indigo           { background: var(--indigo); color: #fff; }
.bg-black            { background: var(--black); color: #fff; }
.bg-teal             { background: var(--teal); color: #fff; }
.bg-lime             { background: var(--lime); color: #fff; }
.bg-grey-light       { background: var(--grey-light); color: #fff; }
.bg-amber            { background: var(--amber); color: #fff; }
.bg-yellow           { background: var(--yellow); color: #fff; }
.bg-brown            { background: var(--brown); color: #fff; }
.bg-blue-grey        { background: var(--blue-grey); color: #fff; }
.bg-yellow-soft      { background: var(--yellow-soft); color: #fff; }

/* Clases para texto (color de texto) */
.text-pink           { color: var(--pink); }
.text-pink-soft      { color: var(--pink-soft); }
.text-orange         { color: var(--orange-text); }
.text-purple         { color: var(--purple); }
.text-blue           { color: var(--blue); }
.text-green          { color: var(--green); }
.text-indigo         { color: var(--indigo); }
.text-black          { color: var(--text-black-profile); }
.text-teal           { color: var(--teal); }
.text-lime           { color: var(--lime); }
.text-grey-light     { color: var(--grey-light); }
.text-amber          { color: var(--amber); }
.text-yellow         { color: var(--yellow); }
.text-brown          { color: var(--brown); }
.text-blue-grey      { color: var(--blue-grey-text); }
.text-yellow-soft    { color: var(--yellow-soft); }


#profileBtnSample:focus {
  background-color: inherit;
}


/* btn share site */

.pink-light { background-color: #f8bbd0; }
.pink-vivid { background-color: #ff4081; }
.pink-dark { background-color: #e91e63; }
.orange-dark { background-color: #dd2c00; }
.cyan-light { background-color: #18ffff; }
.blue-light { background-color: #90caf9; }
.blue-dark { background-color: #2962ff; }
.purple-light { background-color: #7c4dff; }
.purple-dark { background-color: #8e24aa; }
.lime-light { background-color: #c6ff00; }
.green-dark { background-color: #2e7d32; }
.yellow-light { background-color: #ffeb3b; }
.amber-light { background-color: #ffe082; }
.yellow-dark { background-color: #fbc02d; }
.brown-dark { background-color: #4e342e; }
.black { background-color: #000; }
.blue-grey { background-color: #78909c; }
.grey-light { background-color: #f5f5f5; }


.gradientProfile{
  background-color: var(--bg)!important;
  padding-bottom: 600px!important;
  position: relative;
  overflow: hidden;
}

.gradientProfile {
  position: relative;
  z-index: 0;
}

.gradientProfile::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: calc(100% - 10px);
  background: var(--background-profile);
  pointer-events: none;
  z-index: -1;
}

.news-list {
  list-style: none;
  padding: 16px 0px 4px 0px;
  margin: 0;
}

.news-item {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  padding-left: 8px;
  padding-right: 8px;
  text-align: left;
  transition: background 0.2s ease;
}


.centered-child-back-captcha {
  padding: 16px;
  border-radius: 12px;
  margin-left: 16px;
  margin-right: 16px;
  border: 1px solid var(--border-card);
  box-shadow: var(--centered-loading-shadow);
  color: var(--centered-loading-text);
}

.centered-child-back-captcha hr {
  background-color: var(--border-card);
}

.noImgSelect {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

.noImgClick {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

.verification-code-input {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.code-digit {
  width: 48px;
  height: 56px;
  font-size: 28px;
  text-align: center;
  border: 2px solid var(--boder-input-code)!important;
  border-radius: 8px;
  background-color: white;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.code-digit:focus {
  border-color: var(--primary-link);
  box-shadow: 0 0 4px rgba(133, 184, 104, 0.6);
}

/* ========================= */
/* HEADER BASE               */
/* ========================= */
.header-v2-main {
  background-color: var(--header-bg);
  background-image: var(--header-back-img);
  box-shadow: var(--box-shadow-header);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  backdrop-filter: none;
  border-bottom: 1px solid var(--hr-color);
  top: 0;
  z-index: 50;
}

@media (min-width: 600px) {
  .header-v2-main {
    justify-content: center;
  }
}
@media (max-width: 599px) {
  .header-v2-main {
    padding: 16px 0 16px 14px;
  }
}

/* ========================= */
/* LOGO                      */
/* ========================= */
.header-v2-logo {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--header-v2-accent);
}

.header-v2-logo .logo {
  height: 20px;
  width: auto;
  display: block;
}

/* ========================= */
/* ACTIONS                   */
/* ========================= */
.header-v2-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  right: 14px;
  z-index: 20;
}
@media (min-width: 600px) {
  .header-v2-actions {
    right: 16px;
  }
}
@media (max-width: 599px) {
  .header-v2-actions {
    right: 8px;
    gap: 6px;
  }
}

/* ========================= */
/* BOTÓN LOGIN               */
/* ========================= */


.header-v2-btn-login {
  position: relative;
  z-index: 0;
  height: 38px;
  padding: 7px 22px;
  border-radius: 14px;
  background: var(--header-v2-btn-bg);
  color: var(--header-v2-text);
  text-decoration: none;
  border: 1px solid var(--header-v2-border);
  font-weight: 600;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

/* Borde animado */
.header-v2-btn-login::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;          /* mismo radio que el botón */
  padding: 2px;                 /* grosor del borde */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0.05) 100%
  );
  background-size: 200% 100%;
  animation: borderMove 10s linear infinite; /* lento y elegante */

  /* máscara para que solo se vea el borde */
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none; /* no bloquea clics */
  z-index: -1;
}

@keyframes borderMove {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.header-v2-btn-login:hover {
  background: var(--header-v2-btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ========================= */
/* DROPDOWNS (idioma + user) */
/* ========================= */
.header-v2-lang-selector,
.header-v2-user-selector {
  position: relative;
}

.header-v2-lang-btn,
.header-v2-user-btn {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--header-v2-btn-bg);
  border: 1px solid var(--header-v2-border);
  cursor: pointer;
  font-weight: 550;
  transition: background 0.2s, transform 0.15s;
  color: var(--header-v2-text);
}

/* Hover: solo cuando el menú no está activo */
.header-v2-lang-btn:hover:not(.active),
.header-v2-user-btn:hover:not(.active) {
  background: var(--header-v2-btn-hover);
  transform: translateY(-1px);
}

/* Focus (click): que no cambie color */
.header-v2-lang-btn:focus,
.header-v2-user-btn:focus {
  background: var(--header-v2-btn-bg);
  outline: none;
}

/* Estado activo (cuando el menú está abierto) */
.header-v2-lang-btn.active,
.header-v2-user-btn.active {
  background: var(--header-v2-btn-hover);
  transform: translateY(-1px);
}


.header-v2-lang-btn svg,
.header-v2-user-btn svg {
  width: 20px;
  height: 20px;
}

.header-v2-lang-text {
  margin-left: 6px;
}

/* ========================= */
/* MENÚS                     */
/* ========================= */
.header-v2-lang-menu,
.header-v2-user-menu {
  position: absolute;
  top: 110%;
  right: 0;
  background: var(--header-v2-btn-bg-menu);
  backdrop-filter: blur(10px);
  border: 1px solid var(--header-v2-border-menu);
  border-radius: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  flex-direction: column;
  min-width: max-content;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  animation: header-v2-fadeScale 0.2s ease;
  z-index: 100;
   overflow: hidden; /* corta el fondo del li en las esquinas */
}

.header-v2-lang-menu li,
.header-v2-user-menu li {
  padding: 10px 22px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--header-v2-text);
  transition: background 0.2s, color 0.2s;
}

.header-v2-lang-menu li:hover,
.header-v2-user-menu li:hover {
  background: var(--header-v2-btn-hover-menu);
  color: var(--header-v2-accent);
}

/* Texto blanco en lightMode */
.lightMode .header-v2-lang-menu li,
.lightMode .header-v2-user-menu li {
  color: #fff !important;
}

/* ========================= */
/* ANIMACIÓN                 */
/* ========================= */
@keyframes header-v2-fadeScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================= */
/* MOBILE AJUSTES            */
/* ========================= */
@media (max-width: 700px) {
  .header-v2-lang-text {
    display: none;
  }
  .header-v2-lang-btn {
    padding: 6px 10px;
  }
}

.header-v2-user-text {
  padding-left: 4px;
  display: inline-flex;
  align-items: center;   /* centra vertical */
  gap: 4px;              /* espacio entre texto y flecha */
}
.header-v2-user-text svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ====== Matecito Home Redesign (compatible con tus variables) ====== */
.container-mtc{max-width:1100px;margin:0 auto;padding:0 18px}
.container-mtc.narrow{max-width:860px}

.card-elev{
  background:var(--content, #fff);
  border:var(--card-border, 1px solid rgba(47,51,54,.2));
  border-radius:18px; box-shadow:var(--box-shadow, 0 6px 28px rgba(0,0,0,.06));
}

/* HERO */
.hero-mtc{background:var(--bg-big,#fbfbfb);padding:32px 0 44px;background-image:var(--header-back-img);background-size:cover}
.hero-mtc .container-mtc{
  display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch
}
.hero-title{font-size:2rem;line-height:1.15;margin:0 0 12px}
.hero-title .accent{color:var(--home-strong-green,#2e7d32)}
.kpis{display:inline-block;padding:14px 16px;margin:8px 0 14px}
.kpi-line{display:flex;gap:12px;justify-content:space-between;align-items:center}
.kpi-line small{color:var(--text-secondary)}
.kpi-line strong{font-weight:800}

.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 6px}
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;font-weight:800;
  border:2px solid transparent;transition:.2s;
}
.btn-cta.solid{background:var(--home-strong-green);color:#fff}
.btn-cta.solid:hover{filter:brightness(.95)}
.btn-cta.outline{color:var(--home-strong-green);background:transparent;border-color:var(--home-strong-green)}
.btn-cta.outline:hover{background-color:color-mix(in srgb, var(--home-strong-green) 12%, transparent)}

.trust{color:var(--text-secondary);margin-top:2px}

.hero-right{padding:18px}
.hero-feature{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.ic{
  width:42px;height:42px;border-radius:12px;flex:0 0 42px;
  display:grid;place-items:center;font-weight:900;
  background:color-mix(in srgb, var(--home-strong-green) 12%, transparent);
  border:2px solid var(--home-strong-green);color:var(--home-strong-green)
}

/* SECTIONS */
.section-mtc{padding:42px 0}
.section-mtc.alt{background:var(--bg-big)}
.sec-title{font-size:1.6rem;text-align:center;margin:0 0 10px}
.lead{color:var(--text-secondary);text-align:center;margin:0 auto 8px}
.no-mb{margin-bottom:0}

/* GRID “POR QUÉ USAR” */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.card-mtc{padding:20px}
.card-mtc h3{margin:8px 0 6px;font-size:1.125rem}
.card-mtc p{margin:0;color:var(--text-secondary)}
.ic2{
  width:40px;height:40px;border-radius:12px;margin-bottom:4px;
  display:grid;place-items:center;font-weight:900;
  background:color-mix(in srgb, var(--home-strong-green) 12%, transparent);
  border:2px solid var(--home-strong-green);color:var(--home-strong-green)
}

/* TIMELINE “CÓMO FUNCIONA” */
.steps{max-width:720px;margin:14px auto 0}
.step{display:flex;gap:12px;align-items:center;margin:10px 0}
.badge{
  width:36px;height:36px;border-radius:50%;
  background:var(--home-strong-green);color:#fff;display:grid;place-items:center;font-weight:900
}

/* CTA AYUDA */
.cta-help{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px;background:var(--bg-big);border:1px solid var(--border-card)}
.cta-title{margin:0}

/* RESPONSIVE */
@media (max-width: 992px){
  .hero-mtc .container-mtc{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}

/* modal language */
 .lang-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.lang-modal.hidden {
  display: none;
}

.lang-modal-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--lang-modal-overlay);
}

.lang-modal-content {
  position: relative;
  background: var(--lang-modal-bg);
  color: var(--lang-modal-text);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--lang-modal-border);
  width: 90%;
  max-width: 400px;
  z-index: 2001;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.lang-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.lang-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-modal-list li {
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}

.lang-modal-list li:hover {
  background: var(--lang-modal-border);
}

.lang-modal-content h2,
.lang-modal-content li {
  color: var(--lang-modal-text);             /* Forzar texto negro */
}

.header-v2-lang-icon {
  display: inline-flex;
  align-items: center;   /* centra vertical */
  justify-content: center; /* centra horizontal */
  width: 20px;   /* ajustá según tamaño del ícono */
  height: 20px;  /* idem */
}

.header-v2-lang-icon svg {
  width: 100%;
  height: 100%;
  display: block; /* elimina espacio fantasma inline */
}

.lang-modal-content h2 {
  margin-bottom: 12px;
  margin-top: 12px;
}


.aportes-empty-state {
      padding: 24px 16px!important;
      margin: auto;
    }

   

    .aportes-empty-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 36px;
      margin-top: 0px;
    }

    .aportes-empty-subtext {
      font-size: 16px;
      color: #555;
      margin-bottom: 28px;
    }

    .aportes-empty-list {
      text-align: left;
      margin: 0 auto 32px auto;
      max-width: 440px;
    }

    .aportes-empty-item {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      margin-bottom: 20px;
    }

    .aportes-empty-item-icon {
      margin-top: 2px;
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      color: #2c7a4b;
    }

    .aportes-empty-item-text {
      font-size: 15px;
      line-height: 1.4;
    }

    .aportes-illustration-wrapper {
  background: linear-gradient(135deg, var(--aportes-illustration-bg1), var(--aportes-illustration-bg2));
  border-radius: 16px;
  width: 200px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

 .aportes-illustration-wrapper img {
      width: 180px;
    }

    .aportes-btn {
      padding: 12px 24px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      background: #2c7a4b;
      color: #fff;
      transition: background 0.2s;
    }

    .aportes-btn:hover {
      background: #25673f;
    }

    .aportes-btn.secondary {
       background: var(--aportes-btn-sec-bg);
  color: var(--aportes-btn-sec-text);
  border: 1px solid var(--aportes-btn-sec-border);
      margin-left: 12px;
    }

    .aportes-btn.secondary:hover {
      background: var(--aportes-btn-sec-hover);
    }


.login-code-input {
  width: 42px;
  height: 56px;
  font-size: 22px;
  border-radius: 8px;
  border: 1px solid #ccc;
  text-align: center;
  transition: border-color 0.2s;
}
.login-code-input:focus {
  border-color: #1f7a5a;
  outline: none;
}
.login-code-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
}
#codeTimer {
  font-weight:600;
}
#login-code-msg{
  font-size:14px;line-height:1.5;
}


.payment-amounts {
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  margin-bottom: 14px;
  text-align: center;
  width: 100%;
  letter-spacing: 0.3px;
  display: inline-block;
  position: relative;
  color: var(--price);
}

.payment-amounts::after {
  content: "";
  display: block;
  width: 160px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--text-secondary), transparent);
  margin: 4px auto 0;
  opacity: 0.2;
}

.price-value {
  font-weight: 700;
  font-size: 1.110rem;
  text-align: center;
}


.payment-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.mtc-pay-method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--btn-payment);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 8px 12px;
  min-width: 140px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
  cursor: pointer;
  min-height: 44px;
}

.mtc-pay-method:focus,
.mtc-pay-method:active {
  background-color: var(--btn-payment) !important;
  box-shadow: none !important;
  outline: none !important;
}

img#iconMp {
  max-width: 20px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
img#iconPp {
  width: 20px;
  height: 20px;
  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
img#iconCr {
  max-width: 20px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
img#iconCC {
  max-width: 20px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mtc-pay-method:hover {
  border-color: var(--home-strong-green);
  background-color: color-mix(in srgb, var(--home-strong-green) 5%, var(--btn-payment));
  box-shadow: 0 0 8px rgba(102,187,106,0.25);
  transform: translateY(-1.5px);
}

.mtc-pay-method:hover img {
  opacity: 1;
  transform: scale(1.05);
}

@media (max-width: 480px) {
  .payment-methods {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .mtc-pay-method {
    width: 80%;
    max-width: 280px;
  }
}


#paymentsSueltos{
  padding-top: 0px!important;
}

#paymentsPrice{
  padding-top: 0px!important;
}

.force_hidden {
  display: none!important;
}

/* =========================================================
   Card de usuario principal
   ========================================================= */
.main_user-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--main-card-bg);
  border: var(--main-card-border);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: var(--main-card-shadow);
  max-width: 420px;
  margin: 0px auto 20px auto;
  cursor: default;
}

.mainDashReferralBanner {
  border: 1px solid color-mix(in srgb, var(--profile-bg-color, #16a34a) 18%, var(--input-border));
  border-radius: 16px;
  background-color: color-mix(in srgb, var(--content) 93%, var(--bg-big));
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--profile-bg-color, #16a34a) 10%, transparent), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  box-shadow: var(--main-card-shadow);
  overflow: hidden;
  margin-bottom: 24px;
}

.mainDashReferralBanner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 6px 15px 10px;
}

.mainDashReferralBanner__texts {
  min-width: 0;
}

.mainDashReferralBanner__eyebrow {
  display: inline-block;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.9;
  margin-bottom: 4px;
}

.mainDashReferralBanner__title {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 3px;
}

.mainDashReferralBanner__desc {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.35;
}

.mainDashReferralBanner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--profile-bg-color, #16a34a) 18%, var(--input-border));
  background: var(--content);
  color: var(--profile-bg-color, #16a34a);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mainDashReferralBanner__cta:hover {
  text-decoration: none;
  opacity: 0.9;
}

.main_user-top,
.main_user-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.main_user-summary {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 26px;
}

.main_user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
  min-width: 0;
  flex: 1;
}

.main_user-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--main-icon-border);
  box-shadow: none;
}

.main_user-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main_user-details {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0; /* necesario para que el texto pueda cortarse en flex */
  flex: 1;
}

.main_username {
  font-weight: 700;
  color: var(--main-username-color);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; /* asegúrate que sea bloque o inline-block */
  flex: 1; /* permite que se ajuste al espacio dinámico */
}

.main_user-label {
  padding-top: 3px;
  font-size: 12px;
  color: var(--main-label-color);
}

.main_user-balance {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.main_balances-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.main_balance-label {
  display: block;
  font-size: 11px;
  color: var(--main-label-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.main_balance-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-weight: 700;
  color: var(--main-balance-color);
  font-size: 14px;
  padding: 1px 0;
  border-radius: 999px;
  background: transparent;
  border: none;
}

.main_usdt-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  flex-shrink: 0;
  fill:#50af95;fill-rule:evenodd;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 480px) {
  .main_user-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .mainDashReferralBanner__content {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 9px 14px 10px;
  }

  .main_user-balance {
    align-self: flex-start;
  }

  .main_balances-container {
    justify-content: flex-start;
  }

  .main_balance-value {
    justify-content: flex-start;
  }

  /* Evitar desborde del nombre */
  .main_username {
    white-space: normal;
    word-break: break-word;
  }
}

/* WALLET */

.main_wallet-card {
  background: var(--main-card-bg);
  border: var(--main-card-border);
  border-radius: 16px;
  box-shadow: var(--main-card-shadow);
  margin-bottom: 32px;
  padding-left: 8px;
  padding-right: 8px;
}



.main_wallet-header {
  padding-top: 10px;
  padding-left: 8px;
  padding-right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.main_wallet-title {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--main-username-color);
}

.main_wallet-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

.main_wallet-label {
  font-size: 15px;
  color: var(--main-label-color);
}

.main_wallet-value {
  padding-left: 8px;
  font-weight: 700;
  color: var(--main-balance-color);
  font-size: 15px;
}

.main_wallet-value-pending {
  font-weight: 700;
  padding-left: 8px;
  color: #dba200; /* amarillo suave para pendiente */
  font-size: 15px;
}

.main_withdraw-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: var(--main-card-border);
  border-radius: 16px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.main_withdraw-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.main_withdraw-amount {
  font-weight: 700;
  font-size: 15px;
  color: var(--main-balance-color);
}

.main_withdraw-network {
  font-size: 14px;
  color: var(--main-label-color);
}

.main_withdraw-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.main_withdraw-status {
  font-weight: 700;
  font-size: 14px;
  text-transform: capitalize;
}

.main_withdraw-date {
  font-size: 13px;
  color: var(--main-label-color);
}

#decimal_info {
  font-size: 13px;
  padding-left: 8px;
  color: var(--text-secondary);
}
.withdrawal_info {
 font-size: 14px;
  color: var(--text-secondary); 
}

/* Colores por estado */
.status-success { color: #4caf50; }
.status-pending { color: #dba200; }
.status-failed  { color: #e53935; }
.status-default { color: var(--main-label-color); }

@media (max-width: 480px) {
  .main_withdraw-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .main_withdraw-right {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
}

.main_withdraw-form {
  background: var(--main-card-bg);
  border: var(--main-card-border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: var(--main-card-shadow);
}

.main_withdraw-form-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--main-username-color);
}

.main_withdraw-info {
  font-size: 14px;
  color: var(--main-label-color);
  margin-bottom: 16px;
}

.main_withdraw-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.main_withdraw-label {
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--main-label-color);
}

.main_withdraw-input,
.main_withdraw-select {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--content);
}

.main_withdraw-birthdate-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 6px;
}

.main_withdraw-birthdate-input {
  width: 54px;
  min-width: 0;
  margin: 0 !important;
  text-align: center;
}

.main_withdraw-birthdate-input.year {
  width: 72px;
}

.main_withdraw-birthdate-separator {
  color: var(--main-label-color);
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
}

input.main_withdraw-input::placeholder { 
  color: var(--placeholder);
  opacity: 1; /* Firefox */
}

.main_withdraw-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/**/

#commMsg {
  display: inline-flex;
  align-items: center;
}

#commMsg img {
  margin-right: 2px;
}

#commMsg img:not(:first-child) {
  margin-left: 20px;
}

#showNews {
  cursor: pointer;
}


/* ==========================================
   DESKTOP — icono + texto centrados
   y ANÓNIMO abajo centrado
   ========================================== */

.mtc-pay-method.crypto {
    position: relative;
    display: flex;
    flex-direction: column; 
    align-items: center;   /* centra el icono + texto */
    justify-content: center;
    padding-bottom: 2px!important;
}

.crypto-top {
    display: flex;
    align-items: center;  /* icono + texto alineados */
    justify-content: center;
    gap: 10px;             /* separación idéntica a otros botones */
}

/* Texto ANÓNIMO */
.crypto-bottom {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* pega el texto al fondo */
  height: 100%;
}

.anon-text {
    display: block;
    font-size: 0.78rem;
    margin-top: 0px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ==========================================
   MOBILE — ANÓNIMO arriba derecha
   sin desalinear icono + texto
   ========================================== */

@media (max-width: 480px) {

    .mtc-pay-method.crypto {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-bottom: 8px!important;
    }

    .crypto-bottom {
        position: absolute;
        top: 0;
        right: 6px;
        margin: 0;
        width: auto;
    }

    .anon-text {
      margin-top: 2px;
        font-size: 0.7rem;
    }
}

.release-info {
    display: flex;
    align-items: center;      /* centra icono + texto verticalmente */
    gap: 2px;                 /* espacio entre icono y texto */
    color: #6c6c6c;           /* tono gris diferenciador */
    font-size: 14px;          /* un toque más chico */
}

.release-info i {
    font-size: 16px !important;  /* icono más alineado al texto */
    margin-top: 3px;
}


.main_balances-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  cursor: default;
  gap: 4px 10px;
  min-width: 0;
}

.main_usd-icon {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .main_user-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .main_balances-container {
    align-self: flex-start;
  }
}

.main_balance-currency {
  color: var(--text-secondary);
  font-weight: 600;
  opacity: 1;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.main_user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  flex-shrink: 0;
  margin-top: 8px;
}

.main_user-bottom {
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

.main_user-meta {
  position: relative;
  display: block;
  margin-top: 2px;
  padding-left: 12px;
  color: var(--profile-bg-color, #16a34a);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.main_user-meta.hidden {
  display: none !important;
}

.main_user-meta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%);
}

.main_user-meta::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  transform: translateY(-50%) scale(0.7);
  animation: mainUserMetaPulse 1.9s ease-out infinite;
}

@keyframes mainUserMetaPulse {
  0% {
    opacity: 0.75;
    transform: translateY(-50%) scale(0.7);
  }

  70% {
    opacity: 0;
    transform: translateY(-50%) scale(1.5);
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1.5);
  }
}

.main_user-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-card);
  background: var(--content);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.main_user-action-btn i.material-icons {
  font-size: 15px;
  line-height: 1;
}

.main_referral-icon {
  width: 15px;
  height: 15px;
  display: block;
  color: currentColor;
  flex-shrink: 0;
}

.main_user-action-btn:hover,
.main_user-action-btn:focus {
  border-color: var(--button-hover-border);
  background: var(--content);
  color: var(--text);
  outline: none;
  box-shadow: none;
}

@media (min-width: 728px) {
  .main_user-card {
    max-width: 100%;
    margin: 0 0 20px 0;
    padding: 14px 18px;
  }

  .main_user-top {
    margin-bottom: 2px;
  }

  .main_user-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "summary actions"
      "meta actions";
    align-items: end;
    column-gap: 18px;
    row-gap: 6px;
  }

  .main_user-summary {
    grid-area: summary;
    gap: 6px 30px;
  }

  .main_user-meta {
    grid-area: meta;
    margin-top: 0;
    margin-bottom: 0;
  }

  .main_user-actions {
    grid-area: actions;
    width: auto;
    margin-top: 0;
    align-self: end;
  }

  .main_user-card--compact .main_user-bottom {
    grid-template-areas: "summary actions";
    align-items: center;
  }

  .main_user-card--compact .main_user-actions {
    align-self: center;
  }
}

@media (max-width: 480px) {
  .main_user-card {
    position: relative;
  }

  .main_user-top,
  .main_user-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .main_balances-container {
    flex: 1;
    width: auto;
  }

  .main_user-actions {
    position: absolute;
    top: 10px;
    right: 12px;
    width: auto;
    justify-content: flex-end;
    gap: 4px;
  }

  .main_user-action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .main_user-action-btn span {
    display: none;
  }

  .main_user-action-btn i.material-icons {
    font-size: 16px;
  }

  .main_user-meta {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 0px;
  }
}

/* Sub-etiqueta ANÓNIMO: estilo discreto */
.small-anon {
  font-size: 11px;
  font-weight: 600;
  color: var(--main-label-color);
  letter-spacing: 0.3px;
  opacity: 0.8;
  margin: 0;             /* elimina espacios extra */
  padding: 0;
  line-height: 1;        /* necesario para bajarlo más */
  display: block;
}

@media (max-width: 480px) {
  .small-anon {
    padding-bottom: 4px;
  }
}

/* === Grid general === */
.main_wallet-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 48px;
  padding: 12px 8px;
}

/* === Columnas === */
.wallet-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Título de cada moneda */
.wallet-col-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--main-username-color);
  border-bottom: 1px solid var(--main-card-border-color, #eee);
  padding-bottom: 4px;
}

/* Filas */
.wallet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Etiquetas */
.wallet-label {
  font-size: 14px;
  color: var(--main-label-color);
}

/* Valores */
.wallet-value {
  font-weight: 700;
  color: var(--main-balance-color);
  font-size: 14px;
}

.wallet-value-pending {
  font-weight: 700;
  /*color: #dba200;  amarillo */
  font-size: 14px;
}

.wallet-value-release {
  font-weight: 700;
  /*color: #ff6b00;  naranja "a liberar" */
  font-size: 14px;
}

/* Mobile: columna simple */
@media (max-width: 599px) {
  .main_wallet-body-grid {
    grid-template-columns: 1fr;
  }
}

/* Cuando solo hay 1 columna */
.main_wallet-card.single-wallet {
  max-width: 480px;     /* Ajusta a tu gusto: 420–520px queda bien */
  width: 100%;
  margin-bottom: 32px;
}

/* Ajustar grid a 1 columna */
.main_wallet-card.single-wallet .main_wallet-body-grid {
  grid-template-columns: 1fr !important;
  gap: 12px 0 !important; /* ya no hace falta gap horizontal */
}

.mtc-fee-badge{
  padding:1px 6px;
  border-radius:8px;
  font-size:0.8125rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.2px;
  background: color-mix(in srgb, #00BA7C 5%, transparent);
  color: currentColor;
  border: 1px solid color-mix(in srgb, #00BA7C 15%, transparent);

  white-space: nowrap;
}

.mtc-fee-badge strong{
  font-weight:600;
}

.paymentTitle {
  font-size: 17px!important;
}

.configPayNoFeeNotice {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 6px;
  color: var(--profile-bg-color, #16a34a);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.mtc-fee-badge-guide{
  margin-left: 8px;
  padding:1px 6px;
  border-radius:8px;
  font-size:0.8125rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.2px;
  color: currentColor;
  border: 1px solid color-mix(in srgb, #00BA7C 20%, transparent);

  white-space: nowrap;
}

.mtc-fee-badge-guide strong{
  font-weight:600;
}

.mfp-img,
.thumb-img,
.mfp-img *,
.thumb-img *,
.video-js,
.video-js * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.videoPageV2__returnLink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.videoPageV2__returnLink:hover {
  text-decoration: underline;
}

.videoPageV2__returnLink--below {
  margin-top: 24px;
  margin-bottom: 6px;
  justify-content: center;
}

@media (max-width: 600px) {
  .videoPageV2__returnLink {
    font-size: 13px;
  }
}

.reward-order-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.reward-order-label {
    white-space: nowrap;
    color: var(--text-secondary);
}

.reward-order-select {
    display: inline-block;
    min-width: 140px;

    padding: 6px 28px 6px 10px;
    font-size: 14px;

    border-radius: 6px;
    border: 1px solid var(--input-border);

    background-color: var(--bg);
    color: var(--input-color);

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}


.reward-order-select:hover {
    border-color: var(--input-border-hover);
}

.reward-order-select:focus {
    outline: none;
    border-color: var(--input-border);
}

.box-sub-months-select {
    width: 100%;
    max-width: 180px;
    border: 2px solid var(--input-border) !important;
    border-radius: 7px;
}

.box-sub-months-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.box-sub-months-row strong {
    flex: 1;
}

@media (max-width: 600px) {
  .box-sub-months-row {
    gap: 12px;
  }

  .box-sub-months-select {
    max-width: 180px;
  }
}

footer {
  background-color:var(--footer-home)!important;
  background-image: var(--footer-back-img);
  color: var(--text-secondary); 
  padding: 20px 0 8px 0;
}

footer hr { background-color: #15432e55; height: 1px; border: 0; }

footer a {
  color: #E8F5E9;
  font-weight: 620;
}

.foot {
  display: grid;
  align-items: start;
  gap: 20px;
}

.foot-brand {
  font-weight: 800;
  font-size: 20px;
}

.foot-links {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 12px 56px;
  justify-content: end;
}

/* Pantallas grandes: logo a la izq, links a la der */
@media (min-width: 768px) {
  .foot {
    grid-template-columns: auto 1fr;
  }
  .foot-links {
    justify-content: flex-end;
    text-align: left;
  }
}

/* Pantallas chicas: logo arriba, links abajo */
@media (max-width: 829px) {
  .foot {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .foot-links {
    margin-top: 32px;
    grid-template-columns: 1fr 1fr ;
    justify-content: center;
    text-align: left;
  }
  footer {
    padding: 12px 0;
    padding-bottom: 8px;
  }
}

/* Pantallas chicas: logo arriba, links abajo */
@media (max-width: 500px) {
  .foot-links {
    margin-top: 32px;
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: left;
  }
}
#footerDesc {
  font-size: 14px!important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 6px;
  color: #E8F5E9;
  padding: 6px 0px!important;
}

.textAreaLight {
  border: 2px solid var(--input-border) !important;
  border-radius: 7px!important;
}

.clearBtnReports {
  padding-top: 8px!important;
}

#report-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;

  border-radius: 12px;
  background-color: var(--card-bg-color);
  border: 1px solid var(--hr-color);

  color: var(--text-color);
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition: all 0.15s ease;
}

#report-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  pointer-events: none;
}

#report-btn:hover {
  background-color: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.3);
  color: #dc3545;
}

#privCodeDetails {
  margin-top: 5px;
  display: flex;
  align-items: center;
}

#privateCodeText {
  letter-spacing: 2px;
  color: var(--primary-700);
  font-size: 1.1em;
}

#regeneratePrivateCodeBtn {
  margin-left: 15px;
  font-size: 0.85em;
  cursor: pointer;
  text-decoration: underline;
}

#privateCodeWarning {
  font-size: 0.875rem;
  color: #cc3300;
  margin-top: 5px;
  font-weight: bold;
  line-height: 1.4;
}

/* ========================================
   Private Profile View
   ======================================== */

#private {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 52px);
  margin-bottom: 200px;
}

.private-profile-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}


/* Glow de fondo decorativo 
.private-bg-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 186, 124, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}*/

/* Columnas del layout */
.private-visual-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin-bottom: 12px;
}

.private-content-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 100%;
}

.private-form-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Avatar con candado */
.private-avatar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  z-index: 1;
}

.private-avatar-ring {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 136, 89, 0.2), rgba(0, 186, 124, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(0, 186, 124, 0.2);
}

.private-avatar-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(0, 136, 89, 0.3), rgba(0, 186, 124, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 186, 124, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.private-lock-icon {
  color: var(--text);
  opacity: 0.7;
}

.private-avatar-pulse {
  position: absolute;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 186, 124, 0.15);
}


/* Separador decorativo */
.private-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 140px;
  margin: 0 auto;
  z-index: 1;
}

.private-separator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hr-color), transparent);
}

.private-separator-icon {
  color: var(--text-secondary);
  opacity: 0.4;
  flex-shrink: 0;
}

/* Título */
.private-title {
  font-weight: 400;
  color: var(--text);
  line-height: 1.6;
  max-width: 300px;
  margin: 0;
  font-size: 1rem;
  z-index: 1;
}

/* Inputs de código */
.private-code-container {
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 1;
}

.private-code-inputs {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.private-code-digit {
  width: 54px !important;
  height: 60px !important;
  text-align: center !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  font-family: 'Nunito', sans-serif !important;
  letter-spacing: 0 !important;
  background-color: transparent !important;
  border: 1.5px solid var(--boder-input-code) !important;
  border-bottom: 1.5px solid var(--boder-input-code) !important;
  border-radius: 16px !important;
  color: var(--text) !important;
  outline: none !important;
  caret-color: #00BA7C;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-transform: uppercase;
  box-shadow: none !important;
}

.private-code-digit::placeholder {
  color: var(--text-secondary);
  opacity: 0.3;
  font-size: 1.75rem;
  line-height: 60px;
}

.private-code-digit:focus {
  border-color: rgba(0, 186, 124, 0.6) !important;
  border-bottom-color: rgba(0, 186, 124, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(0, 186, 124, 0.08) !important;
  transform: scale(1.06);
}

.private-code-digit.filled {
  border-color: rgba(0, 186, 124, 0.4) !important;
  border-bottom-color: rgba(0, 186, 124, 0.4) !important;
}

.private-code-digit.error {
  border-color: var(--danger-color) !important;
  border-bottom-color: var(--danger-color) !important;
}

/* Botón acceder / login */
.private-access-btn {
  min-width: 200px;
  padding-left: 36px;
  padding-right: 36px;
  transition: opacity 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
  z-index: 1;
}

.private-access-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.private-access-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 136, 89, 0.25);
}

a.private-access-btn {
  color: var(--button-text);
  text-decoration: none;
  display: inline-flex;
}

a.private-access-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 136, 89, 0.25);
}

.pricePresetList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pricePresetBtn {
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--content);
  color: var(--text);
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.pricePresetBtn:hover,
.pricePresetBtn:focus {
  border-color: var(--button-hover-border);
  outline: none;
  background: var(--content);
  box-shadow: none;
}

.pricePresetBtn.active {
  background-color: var(--button-common);
  border: 1px solid var(--button-hover-border);
  color: #121212;
}

.withdrawOptionBtn {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
}

.withdrawOptionTitle {
  font-weight: 600;
}

.withdrawOptionMeta {
  font-size: 13px;
}

.subPriceCardCompact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(208, 156, 0, 0.08));
  border: 1px solid rgba(208, 156, 0, 0.28);
  color: var(--text);
}

.subPriceCardText {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.3;
}

.subPriceCardText strong {
  color: #8a6500;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.subPriceCardText span {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.subPriceCardLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(208, 156, 0, 0.32);
  color: #8a6500;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.subPriceCardLink:hover,
.subPriceCardLink:focus {
  text-decoration: none;
  border-color: rgba(208, 156, 0, 0.46);
}

@media (max-width: 600px) {
  .subPriceCardCompact {
    align-items: flex-start;
    flex-direction: column;
  }

  .subPriceCardText span {
    white-space: normal;
  }
}

.rewCardV2 {
  position: relative;
}

.rewCardV2 .pinnedRewLayout {
  right: 0;
  overflow: hidden;
  border-bottom-left-radius: 14px;
  background-color: var(--pinned-bg, var(--price)) !important;
  background-image: linear-gradient(
    150deg,
    var(--pinned-bg-soft, #5fbf63) 0%,
    var(--pinned-bg, var(--price)) 58%,
    var(--pinned-bg-deep, #388e3c) 100%
  );
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  outline: none;
  border-top: none !important;
  border-right: none !important;
  padding: 1px 8px!important;
}

.rewCardV2 .pinnedRewLayout::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 34%,
    rgba(255, 255, 255, 0) 68%
  );
  opacity: 0.55;
  pointer-events: none;
}

.rewCardV2 .pinnedRewLayout::after {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom-left-radius: 14px;
  box-shadow:
    inset 1px 0 0 var(--pinned-border, rgba(255, 255, 255, 0.12)),
    inset 0 -1px 0 var(--pinned-border, rgba(255, 255, 255, 0.12));
  pointer-events: none;
}

.rewCardV2 .pinnedRewIcon {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  color: var(--pinned-icon, rgba(255, 255, 255, 0.96));
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22));
}

.rewCardV2__body {
  width: 100%;
  min-height: 0;
  padding: 15px 20px 14px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.rewCardV2__title {
  padding: 0 42px 0 0 !important;
  margin-bottom: 7px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 17px;
}

.rewCardV2 .item-title.rewTitle.rewCardV2__title {
  padding-top: 0 !important;
}

.rewCardV2:not(.rewPinned) .rewCardV2__title {
  padding-right: 0 !important;
}

.rewCardV2__meta {
  margin-top: 0;
}

.rewCardV2__metaRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 0;
}

.rewCardV2__metaLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rewCardV2__contentPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-big);
  border: 1px solid var(--input-border);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
}

.rewCardV2__contentPill .item-icon {
  margin-right: 0;
  stroke: var(--text-secondary);
}

.rewCardV2__contentPill span {
  display: flex;
  align-items: center;
  line-height: 1;
}

.rewCardV2__obtainedCount {
  font-size: 14px;
  color: var(--text-secondary);
}

.rewCardV2__footer {
  margin-top: 0px;
  padding-top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.rewCardV2__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.15;
  min-width: 92px;
}

.rewCardV2__priceMain {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.rewCardV2__priceMain.item-price {
  padding: 0 !important;
}

.rewCardV2__priceSecondary {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.rewCardV2__status {
  font-size: 17px;
  color: var(--price);
  font-weight: 650;
  text-align: right;
  letter-spacing: -0.01em;
}

.rewCardV2__status.item-price {
  padding: 0 !important;
}

.rewPinCornerV2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 30px solid #f1ede7;
  border-left: 33px solid transparent;
}

.rewPinLabelV2 {
  position: absolute;
  top: 2px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a867f;
}

@media (max-width: 640px) {
  .rewCardV2__body {
    min-height: 0;
  }

  .rewCardV2__footer {
    margin-top: 0px;
    padding-top: 0;
  }
}

.payment-simulator {
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(8px);
}

.payment-simulator.hidden {
  display: none;
}

.payment-simulator .payment-simulator-action {
  min-width: 108px;
  margin: 0;
}

@media (max-width: 600px) {
  .payment-simulator {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
  }

  .payment-simulator .payment-simulator-action {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .rewCardV2__footer {
    margin-top: 8px;
  }
}

@media (min-width: 993px) {
  .rewCardV2__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title title"
      "meta footer";
    column-gap: 24px;
    row-gap: 8px;
    align-items: start;
  }

  .rewCardV2__title {
    grid-area: title;
    margin-bottom: 0;
  }

  .rewCardV2__meta {
    grid-area: meta;
    align-self: start;
  }

  .rewCardV2__footer {
    grid-area: footer;
    margin-top: 0;
    align-self: center;
  }
}

.subCardV2__body {
  width: 100%;
  min-height: 0;
  padding: 15px 20px 14px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.subCardV2__title {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.35;
  margin-bottom: 7px;
}

.subCardV2__desc {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.subCardV2__meta {
  margin-top: 0;
}

.subCardV2__metaRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 0;
}

.subCardV2__metaLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.subCardV2__contentPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-big);
  border: 1px solid var(--input-border);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
}

.subCardV2__contentPill .item-icon {
  margin-right: 0;
  stroke: var(--text-secondary);
}

.subCardV2__contentPill span {
  display: flex;
  align-items: center;
  line-height: 1;
}

.subCardV2__subscribers,
.subCardV2__subscribersCount {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1;
}

.subCardV2__footer {
  margin-top: 0;
  padding-top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.subCardV2__price,
.subCardV2__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.15;
  min-width: 92px;
}

.subCardV2__priceMain,
.subCardV2__statusValue {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.subCardV2__priceMain.item-price,
.subCardV2__statusValue.item-price {
  padding: 0 !important;
}

.subCardV2__priceSecondary,
.subCardV2__statusLabel {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .subCardV2__body {
    min-height: 0;
  }

  .subCardV2__footer {
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 480px) {
  .subCardV2__footer {
    margin-top: 8px;
  }
}

@media (min-width: 993px) {
  .subCardV2__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title title"
      "desc desc"
      "meta footer";
    column-gap: 24px;
    row-gap: 8px;
    align-items: start;
  }

  .subCardV2__title {
    grid-area: title;
    margin-bottom: 0;
  }

  .subCardV2__desc {
    grid-area: desc;
    margin-bottom: 0;
  }

  .subCardV2__meta {
    grid-area: meta;
    align-self: start;
  }

  .subCardV2__footer {
    grid-area: footer;
    margin-top: 0;
    align-self: center;
  }
}

.sueltosActionV2__card {
  border-radius: 12px;
}

.sueltosActionV2__body {
  width: 100%;
  min-height: 0;
  padding: 15px 16px 14px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sueltosActionV2__texts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sueltosActionV2__title {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.35;
}

.sueltosActionV2__sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.sueltosActionV2__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.sueltosFormV2__body {
  width: 100%;
  min-height: 0;
  padding: 15px 20px 16px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.sueltosFormV2 {
  background-color: color-mix(in srgb, var(--content) 92%, var(--bg-big));
  background-image:
    linear-gradient(135deg, var(--profile-bg-color, hsl(165deg 81% 35% / 4%)), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  border-color: color-mix(in srgb, var(--input-border) 82%, var(--bg-big)) !important;
}

.sueltosFormV2__fields {
  width: 100%;
}

.sueltosFormV2__intro {
  margin-top: 6px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-secondary);
  text-align: center;
  float: none !important;
}

.sueltosFormV2__title {
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 12px;
  font-weight: 550;
}

.sueltosFormV2__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.sueltosFormV2__input,
.sueltosFormV2__textarea {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  background: var(--bg-big);
  color: var(--input-color);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  margin-bottom: 0px!important;
  box-sizing: border-box;
}

.sueltosFormV2__input {
  height: 42px;
  padding: 0 13px;
}

.sueltosFormV2__textarea {
  min-height: 84px;
  padding: 12px 13px;
  resize: vertical;
  margin-bottom: 0px!important;
}

.sueltosFormV2 .sueltosFormV2__textarea.input-field.confirmText {
  margin-bottom: 0 !important;
}

.sueltosFormV2__qtyList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sueltosFormV2__qtyBtn,
.sueltosFormV2__qtyCustomWrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: 999px;
  background: var(--content);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  line-height: 1;
  box-sizing: border-box;
  outline: none;
}

.sueltosFormV2__qtyBtn {
  cursor: pointer;
}

.sueltosFormV2__qtyBtn.is-active {
  background: var(--btn-payment);
  border-color: var(--input-border);
  color: var(--text);
}

.sueltosColorPill.is-active,
.sueltosColorPill:focus-within,
.sueltosColorPill:not(.is-empty):not(button) {
  background: var(--btn-payment);
}

@media (max-width: 430px) {
  .sueltosFormV2__qtyBtn--7 {
    display: none !important;
  }
}

.sueltosFormV2__qtyCustomArea {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sueltosFormV2__qtyCustomWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-width: 52px;
  flex: 0 0 52px;
  padding: 0;
  border: 1px solid #ddd8d1;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: all .18s ease;
  overflow: hidden;
}

.sueltosFormV2__qtyCustom {
  width: 100%;
  height: 100%;
  padding: 0 12px;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 999px !important;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  line-height: 34px;
  box-shadow: none;
  outline: none;
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

.sueltosFormV2__qtyCustom:focus {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

.sueltosFormV2__qtyCustom::-webkit-outer-spin-button,
.sueltosFormV2__qtyCustom::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sueltosFormV2__qtyAdjust {
  display: none;
  align-items: center;
  gap: 6px;
}

.sueltosFormV2__qtyCustomArea.is-active-custom .sueltosFormV2__qtyAdjust {
  display: inline-flex;
}

.sueltosFormV2__qtyAdjustBtn {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sueltosFormV2__qtyAdjustBtn::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.sueltosFormV2__qtyAdjustBtn + .sueltosFormV2__qtyAdjustBtn {
  border-left: 1px solid var(--input-border);
  padding-left: 6px;
}

.sueltosFormV2__qtyAdjustBtn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  transform: translateY(-1px);
}

.sueltosFormV2__qtyAdjustBtn:hover {
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
  transform: none;
}

.sueltosFormV2__qtyAdjustBtn:focus,
.sueltosFormV2__qtyAdjustBtn:focus-visible,
.sueltosFormV2__qtyAdjustBtn:active {
  background: transparent !important;
  color: var(--text-secondary) !important;
  outline: none;
  box-shadow: none !important;
  transform: none !important;
}

.sueltosFormV2__qtyAdjustBtn + .sueltosFormV2__qtyAdjustBtn:focus,
.sueltosFormV2__qtyAdjustBtn + .sueltosFormV2__qtyAdjustBtn:focus-visible,
.sueltosFormV2__qtyAdjustBtn + .sueltosFormV2__qtyAdjustBtn:active {
  border-left-color: var(--input-border) !important;
}

.sueltosFormV2__qtyCustomWrap:focus-within {
  border-color: #ddd8d1;
  background: var(--btn-payment);
}

.sueltosFormV2__qtyCustomLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #5f5b56;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  transition: opacity .12s ease;
}

.sueltosFormV2__qtyCustomWrap:not(.is-empty) .sueltosFormV2__qtyCustomLabel,
.sueltosFormV2__qtyCustomWrap.is-empty:focus-within .sueltosFormV2__qtyCustomLabel {
  opacity: 0;
}

.sueltosFormV2__footer {
  margin-top: 14px;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  padding: 14px 20px 0 20px;
  border-top: 1px solid var(--hr-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.sueltosFormV2__priceLine {
  text-align: center;
  line-height: 1.15;
}

.sueltosFormV2__paymentSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sueltosFormV2__paymentSection .payment-amounts {
  margin-bottom: 0;
}

.sueltosFormV2__paymentSection .payment-amounts::after {
  width: 100%;
  margin-top: 10px;
}

.sueltosFormV2__priceMain {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.sueltosFormV2__priceMain.item-price {
  padding: 0 !important;
}

.sueltosFormV2__priceSecondary {
  font-size: 17px;
  color: var(--text-secondary);
  font-weight: 600;
}

.sueltosFormV2__priceSeparator {
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0 4px;
}

.sueltosFormV2__payments {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-top: 0;
  width: 100%;
}

.sueltosFormV2__payments .mtc-pay-method {
  width: 100%;
  max-width: none;
}

.sueltosFormV2__legal {
  max-width: 520px;
  margin: 4px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

@media (min-width: 993px) {
  .sueltosFormV2__intro {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .sueltosFormV2__fields {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .sueltosFormV2__paymentSection {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

.paymentBtnv2 {
  padding: 4px 12px!important;
  min-height: 40px!important;
}

@media (min-width: 480px) {
  .sueltosFormV2__payments {
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .sueltosFormV2__payments .mtc-pay-method {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    flex: 0 0 150px;
  }
}

.rewardDetailV2 {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
}

.rewardHeaderV2__title {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  font-weight: 500;
  line-height: 1.08;
}

.rewardHeaderV2__label {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
}

.rewardHeaderV2__owner {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 6px;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.05;
}

.rewardHeaderV2__nick {
  display: inline-block;
  min-width: 0;
  max-width: min(300px, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.rewardDetailV2__main {
  padding: 18px 22px 18px !important;
  margin-bottom: 0 !important;
}

.rewardDetailV2__title {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.rewardDetailV2__titleDivider {
  width: calc(100% + 44px);
  height: 1px;
  margin: 14px -22px;
  background: linear-gradient(90deg, var(--hr-color), transparent);
}

.rewardDetailV2__metaIcon,
.rewardAccessV2__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.rewardDetailV2__eyebrow {
  margin-bottom: 11px;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.rewardDetailV2__items {
  width: 100%;
  margin-bottom: 11px;
}

.rewardDetailV2__items #contentList {
  margin: 0;
  padding: 0 !important;
}

.rewardContentSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  list-style: none;
}

.rewardContentSummary__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 2px 9px 0px 5px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--profile-bg-color, var(--primary-link)) 14%, color-mix(in srgb, var(--input-border) 42%, transparent));
  background: color-mix(in srgb, var(--profile-bg-color, var(--primary-link)) 4%, var(--content-big));
  text-align: left;
}

.rewardContentSummary__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: color-mix(in srgb, var(--text) 76%, var(--text-secondary));
}

.rewardContentSummary__icon svg {
  margin-bottom: 2px;
  width: 14px;
  height: 14px;
}

.rewardContentSummary__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 10px;
  min-height: 13px;
}

.rewardDetailV2__items .bullet-list {
  margin: 0;
  list-style: none !important;
}

.rewardDetailV2__items .bullet-list:last-child {
  margin-bottom: 0;
}

.rewardDetailV2__empty {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--input-border);
  background: var(--bg-big);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.2;
}

.rewardDetailV2__empty.hidden {
  display: none !important;
}

.rewardDetailV2__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, var(--hr-color), transparent);
}

.rewardDetailV2__meta {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  justify-content: start;
  gap: 14px 52px;
  padding: 13px 22px 15px !important;
}

.rewardDetailV2__meta.hidden {
  display: none !important;
}

.rewardDetailV2__meta--single {
  grid-template-columns: max-content;
}

.rewardDetailV2__metaItem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}

.rewardDetailV2__metaItem.hidden {
  display: none !important;
}

.rewardDetailV2__metaIcon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bg-big);
}

.rewardDetailV2__metaIcon svg {
  width: 13px;
  height: 13px;
}

.rewardDetailV2__metaText {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.rewardDetailV2__metaLabel {
  display: inline;
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.rewardDetailV2__metaValue {
  display: inline;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.rewardAccessV2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px !important;
  border-radius: 16px;
  background-color: color-mix(in srgb, var(--content) 92%, var(--bg-big));
  background-image:
    linear-gradient(135deg, var(--profile-bg-color, hsl(165deg 81% 35% / 4%)), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  border-color: color-mix(in srgb, var(--input-border) 82%, var(--bg-big)) !important;
  position: relative;
  overflow: hidden;
}

.rewardAccessV2__icon {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--content);
  border: 1px solid var(--input-border);
}

.rewardAccessV2__icon svg {
  width: 14px;
  height: 14px;
}

.rewardAccessV2__text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.4;
}

.rewardAccessV2__action {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.rewardAccessV2__button {
  min-width: 170px;
  min-height: 38px;
  border-radius: 999px;
  font-weight: 600;
}

.rewardUnavailableV2 {
  margin-bottom: 24px !important;
}

.profileCannotReceiveV2 {
  margin-bottom: 34px !important;
}

.rewardPaymentV2 {
  margin-bottom: 24px;
}

.rewardPaymentV2__headingWrap {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  padding: 0 !important;
}

.rewardPaymentV2__headingLine {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hr-color));
}

.rewardPaymentV2__headingLine:last-child {
  background: linear-gradient(90deg, var(--hr-color), transparent);
}

.rewardPaymentV2__heading {
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.rewardPaymentV2__card {
  border-radius: 16px;
  background-color: color-mix(in srgb, var(--content) 92%, var(--bg-big));
  background-image:
    linear-gradient(135deg, var(--profile-bg-color, hsl(165deg 81% 35% / 4%)), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  border-color: color-mix(in srgb, var(--input-border) 82%, var(--bg-big)) !important;
}

.rewardPaymentV2 .sueltosFormV2__body {
  padding: 18px 22px 18px;
}

.rewardPaymentV2 .sueltosFormV2__footer {
  margin-top: 16px;
  margin-bottom: 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--hr-color);
}

.rewardPaymentV2 .sueltosFormV2__paymentSection {
  gap: 12px;
}

.rewardBoughtV2__sectionTitle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 14px !important;
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.rewardBoughtV2__sectionTitle::before,
.rewardBoughtV2__sectionTitle::after {
  content: "";
  width: 62px;
  height: 1px;
  background: var(--hr-color);
}

#bought .commentWrapper {
  margin-top: 12px !important;
  margin-bottom: 22px !important;
}

#bought .noteReward,
#bought .comment {
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--input-border) 86%, var(--content));
  border-radius: 16px;
  background: color-mix(in srgb, var(--content) 96%, var(--bg-big));
  overflow: hidden;
}

#bought .avatar {
  width: 30px;
  height: 30px;
  margin-top: 1px;
  margin-right: 14px;
  background: var(--bg-big);
}

#bought .nickname {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

#bought .message,
#bought .comment-content a {
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

#bought .comment-content a {
  color: var(--primary-link);
  font-weight: 600;
}

#bought .thumbWrapper {
  padding-top: 14px !important;
  margin-bottom: 22px !important;
}

#bought .thumb {
  border: 1px solid color-mix(in srgb, var(--input-border) 84%, var(--content));
  border-radius: 16px;
  overflow: hidden;
}

.rewardInlineVideoV2 {
  margin-bottom: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--input-border) 84%, var(--content));
  border-radius: 16px;
  background: color-mix(in srgb, var(--content) 96%, var(--bg-big));
}

.rewardInlineVideoV2__topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.rewardInlineVideoV2__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: 999px;
  background: var(--content);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  outline: none;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.rewardInlineVideoV2__close:hover,
.rewardInlineVideoV2__close:focus,
.rewardInlineVideoV2__close:active {
  background: var(--content);
  color: var(--text);
  border-color: color-mix(in srgb, var(--input-border) 72%, var(--text-secondary));
  box-shadow: none;
  outline: none;
}

.rewardInlineVideoV2__status {
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.rewardInlineVideoV2__status.hidden {
  display: none !important;
}

.rewardInlineVideoV2__mount:empty {
  display: none;
}

.rewardInlineVideoV2__player {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #000;
}

#rewardVideoPlayerWrap .rewardInlineVideoV2 {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#rewardVideoPlayerWrap .rewardInlineVideoV2__topbar,
#boxVideoPlayerWrap .rewardInlineVideoV2__topbar,
#subsVideoPlayerWrap .rewardInlineVideoV2__topbar {
  margin-bottom: 4px;
}

#boxVideoPlayerWrap .rewardInlineVideoV2,
#subsVideoPlayerWrap .rewardInlineVideoV2 {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#bought .itemVidFile,
#subsFilesList .itemVidFile,
#mediaList .itemVidFile {
  display: block;
}

#bought .rewardVideoThumbV2,
#subsFilesList .rewardVideoThumbV2,
#mediaList .rewardVideoThumbV2 {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--profile-bg-color, hsl(165deg 81% 35% / 12%)) 38%, transparent), transparent 64%),
    color-mix(in srgb, var(--bg-big) 82%, var(--content));
}

#bought .thumbWrapper.is-active .thumb,
#subsFilesList .thumbWrapper.is-active .thumb,
#mediaList .thumbWrapper.is-active .thumb {
  border-color: color-mix(in srgb, var(--profile-bg-color, var(--primary-link)) 55%, var(--input-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--profile-bg-color, var(--primary-link)) 24%, transparent);
}

#bought .thumbWrapper.is-active .thumb-icon,
#subsFilesList .thumbWrapper.is-active .thumb-icon,
#mediaList .thumbWrapper.is-active .thumb-icon {
  display: none;
}

#bought .thumbWrapper.is-active .thumb-playing-badge,
#subsFilesList .thumbWrapper.is-active .thumb-playing-badge,
#mediaList .thumbWrapper.is-active .thumb-playing-badge {
  display: block;
}

#bought .thumbWrapper.is-active .thumb-duration-badge,
#subsFilesList .thumbWrapper.is-active .thumb-duration-badge,
#mediaList .thumbWrapper.is-active .thumb-duration-badge {
  display: none;
}

.boxPaymentV2__months .box-sub-months-select {
  max-width: 180px;
}

.boxPaymentV2__note {
  margin-top: 4px;
}

.boxExpiryBarV2 {
  padding: 8px 0 !important;
  background:
    linear-gradient(135deg, var(--profile-bg-color, hsl(165deg 81% 35% / 5%)), transparent 70%),
    color-mix(in srgb, var(--content) 94%, var(--bg-big));
  border-bottom: 1px solid var(--hr-color);
}

.boxExpiryBarV2.hidden {
  display: none !important;
}

.boxExpiryBarV2__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.boxExpiryBarV2__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.boxExpiryBarV2__icon svg {
  width: 12px;
  height: 12px;
}

.boxEmptyStateV2 {
  max-width: 520px;
  margin: 42px auto 28px;
  padding: 26px 24px;
  border: 1px solid color-mix(in srgb, var(--input-border) 86%, var(--content));
  border-radius: 16px;
  background: color-mix(in srgb, var(--content) 96%, var(--bg-big));
  text-align: center;
}

.boxEmptyStateV2.hidden {
  display: none !important;
}

.boxEmptyStateV2 > .col.s12.md {
  display: none;
}

.boxEmptyStateV2 > svg {
  width: 38px;
  height: 38px;
  padding: 12px;
  box-sizing: content-box;
  border-radius: 999px;
  background: var(--bg-big);
  color: var(--text-secondary);
}

.boxEmptyStateV2 #withoutFilesMsg {
  float: none !important;
  max-width: 380px;
  margin: 14px auto 0;
  padding: 0 !important;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 600px) {
  .rewardHeaderV2__title {
    gap: 0;
  }

  .rewardHeaderV2__owner {
    font-size: 18px;
  }

  .rewardHeaderV2__nick {
    max-width: min(260px, 74vw);
  }

  .rewardDetailV2__main {
    padding: 16px 16px 15px !important;
  }

  .rewardDetailV2__titleDivider {
    width: calc(100% + 32px);
    margin: 12px -16px;
  }

  .rewardDetailV2__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    justify-items: start;
    align-items: start;
    gap: 12px;
    padding: 13px 16px 15px !important;
  }

  .rewardDetailV2__meta--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .rewardDetailV2__metaItem {
    display: block;
    width: 100% !important;
    text-align: left;
  }

  .rewardDetailV2__metaIcon {
    display: none;
  }

  .rewardDetailV2__metaText {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .rewardDetailV2__metaLabel {
    display: block;
  }

  .rewardDetailV2__metaValue {
    display: block;
  }

  .rewardContentSummary {
    gap: 8px;
  }

  .rewardContentSummary__item {
    gap: 5px;
    min-height: 34px;
    padding: 2px 9px 0px 5px;
    border-radius: 12px;
  }

  .rewardContentSummary__icon {
    width: 24px;
    height: 24px;
  }

  .rewardContentSummary__icon svg {
    width: 13px;
    height: 13px;
  }

  .rewardContentSummary__count {
    font-size: 13px;
  }

  .rewardAccessV2 {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px !important;
  }

  .rewardAccessV2__action,
  .rewardAccessV2__button {
    width: 100%;
  }

  .rewardPaymentV2 .sueltosFormV2__body {
    padding: 16px 16px 16px;
  }

  .rewardPaymentV2 .sueltosFormV2__footer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-top: 14px;
  }

  .rewardPaymentV2__heading {
    font-size: 16px;
  }

  .rewardBoughtV2__sectionTitle {
    gap: 10px;
    margin: 10px 0 12px !important;
    font-size: 16px;
  }

  .rewardBoughtV2__sectionTitle::before,
  .rewardBoughtV2__sectionTitle::after {
    width: 44px;
  }

  #bought .noteReward,
  #bought .comment {
    padding: 12px 13px;
  }

  .rewardInlineVideoV2 {
    padding: 12px;
  }

  .boxPaymentV2__months .box-sub-months-select {
    max-width: 100%;
  }

  .boxExpiryBarV2 {
    padding: 7px 0 !important;
  }

  .boxExpiryBarV2__inner {
    font-size: 13px;
  }

  .boxEmptyStateV2 {
    margin: 28px auto 22px;
    padding: 22px 18px;
  }
}
.user-referrals__left {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280; /* gris suave */
}

.user-referrals__left.hidden {
    display: none !important;
}

.main_user-summary .user-referrals__left {
    color: var(--text-secondary);
    gap: 5px;
}

.referralsPageV2__hero,
.referralsPageV2__empty,
.referralsPageV2__error {
  border-radius: 18px;
  border: 1px solid var(--input-border);
  background: var(--content);
  box-shadow: var(--main-card-shadow);
}

.referralsPageV2__hero {
  padding: 18px 20px 20px;
  margin-bottom: 42px;
  margin-top: 20px;
  background-color: color-mix(in srgb, var(--content) 92%, var(--bg-big));
  background-image:
    linear-gradient(135deg, var(--profile-bg-color, hsl(165deg 81% 35% / 4%)), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
}

.referralsPageV2__heroTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.referralsPageV2__heroHeader {
  flex: 1;
  min-width: 0;
  margin-bottom: 12px;
}

.referralsPageV2__heroArt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.referralsPageV2__heroImage {
  display: block;
  width: 138px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.referralsPageV2__heroTitle {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.referralsPageV2__heroText {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.45;
}


.referralsPageV2__benefit {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--profile-bg-color, #16a34a) 18%, var(--input-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--profile-bg-color, #16a34a) 8%, var(--content)), transparent 85%),
    var(--content);
}

.referralsPageV2__benefit.hidden {
  display: none !important;
}

.referralsPageV2__benefitText {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.referralsPageV2__sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 12px;
  margin-top: 26px;
}

.referralsPageV2__sectionTitle {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.referralsPageV2__count {
  color: var(--text-secondary);
  font-size: 14px;
  text-align: right;
}

.referralsPageV2__count strong {
  color: var(--text);
}

.referralsPageV2__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 18px;
  border: 1px solid var(--input-border);
  background: var(--content);
  box-shadow: var(--main-card-shadow);
  overflow: hidden;
}

.referralsPageV2__list.hidden {
  display: none !important;
}

.referralsPageV2__item {
  padding: 15px 16px;
}

.referralsPageV2__item + .referralsPageV2__item {
  border-top: 1px solid var(--hr-color);
}

.referralsPageV2__itemMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.referralsPageV2__itemIdentity {
  min-width: 0;
}

.referralsPageV2__itemNick {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.referralsPageV2__itemNickLink {
  color: inherit;
  text-decoration: none;
}

.referralsPageV2__itemNickLink:hover {
  text-decoration: underline;
}

.referralsPageV2__itemStats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}

.referralsPageV2__itemProgressWrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.referralsPageV2__itemProgress {
  color: var(--profile-bg-color, #16a34a);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.referralsPageV2__itemProgress--pending {
  color: var(--text);
}

.referralsPageV2__itemReward {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--profile-bg-color, #16a34a) 10%, var(--content));
  border: 1px solid color-mix(in srgb, var(--profile-bg-color, #16a34a) 22%, var(--input-border));
  color: var(--profile-bg-color, #16a34a);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

.referralsPageV2__empty,
.referralsPageV2__error {
  padding: 18px 20px;
}

.referralsPageV2__emptyTitle,
.referralsPageV2__errorTitle {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.referralsPageV2__emptyText,
.referralsPageV2__errorText {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.referralsPageV2__error .button-18 {
  margin-top: 12px;
}

@media (max-width: 640px) {
  .referralsPageV2__hero {
    padding: 16px 16px 8px;
  }

  .referralsPageV2__heroTop {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .referralsPageV2__heroHeader {
    margin-bottom: 0;
  }

  .referralsPageV2__heroArt {
    width: 100%;
  }

  .referralsPageV2__heroTitle {
    font-size: 18px;
  }

  .referralsPageV2__heroImage {
    width: 140px;
  }

  .referralsPageV2__sectionHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .referralsPageV2__count {
    text-align: left;
  }

  .referralsPageV2__itemMain {
    align-items: flex-start;
    flex-direction: column;
  }

  .referralsPageV2__itemStats {
    align-items: flex-start;
    text-align: left;
  }
}