/* 
 * Estilos públicos y de administración para NF-Onboarding,
 * extraídos de bloques <style> embebidos en nf-onboarding.php.
 */

.nfq{
        font-family:"Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
        color:#333;
      }
      .nfq .wrap{
        max-width:760px;
        margin:2rem auto;
        padding:0 1rem;
        width:100%;
      }
      .nfq .card{
        background:#fff;
        border-radius:14px;
padding:1.25rem 1.25rem 1rem;
      }
      .nfq .q-head{
        font-weight:700;
        font-size:1.2rem;
        margin:.25rem 0 .75rem;
      }
      .nfq .q-head .q-optional{
        font-weight:500;
        font-size:.75rem;
        opacity:.7;
        margin-right:.35rem;
      }
      .nfq .q-helper{
        font-size:.75rem;
        opacity:.75;
        margin:-.25rem 0 .85rem;
      }
      .nfq .options{
        display:grid;
        gap:.65rem;
      }
      .nfq .opt{
        display:flex;
        align-items:center;
        gap:.65rem;
        padding:.75rem 1rem;
        border:2px solid #e7edf2;
        border-radius:10px;
        cursor:pointer;
        transition:.2s;
      }
      .nfq .opt:hover{
        border-color:#c2d6e3;
        background:#f9fbfd;
      }
      .nfq .opt input{
        accent-color:#EA9912;
      }
      .nfq .field-wrap{
        margin:.75rem 0 0;
      }
      .nfq .field-wrap input,
      .nfq .field-wrap textarea{
        width:100%;
        border-radius:10px;
        border:2px solid #e7edf2;
        padding:.7rem .9rem;
        font:inherit;
        box-sizing:border-box;
      }
      .nfq .field-wrap input:focus,
      .nfq .field-wrap textarea:focus{
        outline:none;
        border-color:#c2d6e3;
}
      .nfq .progress{
        display:flex;
        align-items:center;
        gap:.5rem;
        margin:.75rem 0 0;
        color:#888;
        font-size:.9rem;
      }
      .nfq .bar{
        flex:1;
        height:6px;
        background:#eee;
        border-radius:999px;
        overflow:hidden;
      }
      .nfq .bar>i{
        display:block;
        height:100%;
        background:#EA9912;
        width:0;
      }
      .nfq .finish{
        display:grid;
        place-items:center;
        padding:2rem 1rem;
        text-align:center;
      }
      .nfq .spinner{
        width:32px;
        height:32px;
        border-radius:50%;
        border:3px solid #ddd;
        border-top-color:#EA9912;
        animation:spin 1s linear infinite;
        margin:1rem auto 1.5rem;
      }
      @keyframes spin{to{transform:rotate(360deg)}}

      .nfq .btn{
        --btn-bg:#EA9912;
        --btn-bg-hover:#D98A10;
        --btn-bg-active:#C6790E;
        --btn-shadow:rgba(0,0,0,.18);

        display:inline-block;
        background:var(--btn-bg);
        border:none;
        color:#fff;
        padding:.9rem 1.6rem;
        border-radius:12px;
        font-weight:700;
        font-size:1.05rem;
        line-height:1;
        letter-spacing:.2px;
        cursor:pointer;
transition:transform .06s ease, background-color .15s ease, box-shadow .15s ease, filter .2s;
        text-transform:none;
        text-rendering:optimizeLegibility;
      }
      .nfq .btn:hover{
        background:var(--btn-bg-hover);
}
      .nfq .btn:active{
        background:var(--btn-bg-active);
        transform:translateY(1px);
}

      .nfq .actions{
        
        display:flex;
        justify-content:flex-end;
        gap: 1rem;
      }

      .nf-onb-hidden-form{
        display:none;
      }

      .nf-onb-notice{
        max-width:760px;
        margin:1.5rem auto 0;
        padding:.85rem 1.2rem;
        border-radius:999px;
        font-size:.95rem;
        border:1px solid #F2D7A2;
        background:linear-gradient(90deg,#FFF9EA,#FFFFFF);
display:flex;
        align-items:center;
        gap:.75rem;
        color:#593600;
      }
      .nf-onb-notice-icon{
        width:26px;
        height:26px;
        border-radius:999px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:14px;
        font-weight:700;
        background:#F5A623;
        color:#FFFFFF;
        flex-shrink:0;
      }
      .nf-onb-notice-content{
        display:flex;
        flex-direction:column;
      }
      .nf-onb-notice-content strong{
        font-weight:600;
        margin-bottom:1px;
      }
      .nf-onb-notice-success{
        border-color:#F5A623;
      }
      .nf-onb-notice-info{
        border-color:#2F80ED;
      }
      .nf-onb-notice-warning{
        border-color:#EA9912;
      }
    
      .nf-onb-latest-columns{
        display:grid;
        gap:1.5rem;
        
        align-items:flex-start;
      }
      .nf-onb-latest-column{
        min-width:0;
        background:#F9FAFB;
        border-radius:16px;
        padding:1rem 1.2rem;
        border:1px solid #E5E7EB;
}
      .nf-onb-latest-subtitle{
        margin:0 0 .55rem;
        font-size:.9rem;
        font-weight:600;
        color:#111827;
      }
      .nf-onb-latest-column .nf-onb-latest-list{
        margin:.45rem 0 0;
      }
      @media (max-width: 1024px){
        .nf-onb-latest-columns{
          grid-template-columns:repeat(2,minmax(0,1fr));
        }
      }
      @media (max-width: 640px){
        .nf-onb-latest-columns{
          grid-template-columns:1fr;
        }
      }



      .nf-onb-roadmap-welcome{
        margin:0 0 1.6rem;
      }
      .nf-onb-roadmap-welcome-title{
        margin:0 0 .4rem;
        font-size:1.15rem !important;
        font-weight:700;
      }
      .nf-onb-roadmap-welcome-text{
        margin:0;
        font-size:16px !important;
        color:#374151;
        line-height:1.6;
      }

      @media (max-width: 900px){
        .nf-onb-dashboard{
          padding-left:.35rem;
          padding-right:.35rem;
        }
        .nf-onb-layout{
          gap:.4rem;
        }
        .nf-onb-card{
          padding:1.25rem 1rem;
        }
      }

.nf-onb-notice{
        margin:1.5rem auto 0;
        padding:.85rem 1.4rem;
        border-radius:999px;
        font-size:.95rem;
        border:1px solid #F2D7A2;
        background:linear-gradient(90deg,#FFF9EA,#FFFFFF);
display:flex;
        align-items:center;
        gap:.75rem;
        color:#593600;
      }
      .nf-onb-notice-updated{
        
      }
      .nf-onb-notice-icon{
        width:26px;
        height:26px;
        border-radius:999px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:14px;
        font-weight:700;
        background:#F5A623;
        color:#FFFFFF;
        flex-shrink:0;
      }
      .nf-onb-notice-content{
        display:flex;
        flex-direction:column;
      }
      .nf-onb-notice-content strong{
        font-weight:700;
      }
      .nf-onb-notice-content span{
        font-size:.9rem;
      }
      .nf-onb-dashboard{
        margin:3rem auto 4rem;
        padding:0 .5rem 3rem;
        font-family:"Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
      }
      .nf-onb-hero{
        text-align:left;
        margin-bottom:2rem;
      }
      .nf-onb-hero-kicker{
        font-size:.95rem;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.08em;
        color:#EA9912;
        margin-bottom:.25rem;
      }
      .nf-onb-hero h2{
        font-size:2rem;
        line-height:1.2;
        margin:0 0 .35rem;
        color:#242424;
      }
      .nf-onb-hero p{
        margin:0;
        color:#555;
        max-width:620px;
      }

      .nf-onb-layout{
        display:grid;
        gap:.6rem;
      }

      .nf-onb-card{
        background:#ffffff;
        border-radius:18px;
padding:1.5rem 1.75rem;
      }

      .nf-onb-card-profile{
        margin-bottom:26px;
      }

      .nf-onb-card-header{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        margin-bottom:0rem;
        gap:1rem;
        flex-wrap:wrap;
      }

      .nf-onb-card-header-main{
        display:flex;
        align-items:center;
        gap:.9rem;
      }
      
.nf-onb-clone-message-trigger{
  cursor:pointer;
  margin-left:auto;
}

.nf-onb-avatar img{
  width:64px !important;
  height:64px !important;
  border-radius:50% !important;
  object-fit:cover;
  padding:3px;
  border:2px solid #F2D7A2;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
  background:#FFF9EA;
}
      .nf-onb-card-title-wrap{
        display:flex;
        flex-direction:column;
      }
      .nf-onb-card-subtitle{
        font-size:.85rem;
        color:#777;
        
      }
      .nf-onb-card-title{
        margin:0;
        font-size:1.15rem !important;
        font-weight:700;
        color:#242424;
      }
      .nf-onb-tag{
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        padding:.3rem .75rem;
        border-radius:999px;
        font-size:.8rem;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.08em;
        background:#F4F4F4;
        color:#555;
      }
      .nf-onb-tag-dot{
        width:8px;
        height:8px;
        border-radius:50%;
        background:#EA9912;
      }
      .nf-onb-tag-dot-ia-new{
        background:#EF4444;
        box-shadow:0 0 0 0 rgba(239,68,68,.55);
        animation:nf-onb-dot-pulse 1.4s ease-out infinite;
      }
      @keyframes nf-onb-dot-pulse{
        0%{
          transform:scale(1);
          box-shadow:0 0 0 0 rgba(239,68,68,.55);
          opacity:1;
        }
        50%{
          transform:scale(1.6);
          box-shadow:0 0 0 6px rgba(239,68,68,.0);
          opacity:.6;
        }
        100%{
          transform:scale(1);
          box-shadow:0 0 0 0 rgba(239,68,68,.0);
          opacity:1;
        }
      }
.nf-onb-tag-badge{
  display:inline-flex;
  align-items:center;
  padding:.1rem .5rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.nf-onb-tag-badge-new{
  background:#F59E0B;
  color:#111827;
}


      .nf-onb-profile-summary{
        list-style:none;
        padding:0;
        margin:0;
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
        gap:.4rem .75rem;
        font-size:.95rem;
      }
      .nf-onb-profile-summary li strong{
        font-weight:600;
        color:#242424;
      }

      
      .nf-onb-profile-mainline{
        
      }

      .nf-onb-profile-tags{
        display:flex;
        flex-wrap:wrap;
        gap:.55rem;
      }

      .nf-onb-profile-tag{
        flex:1 1 140px;
        min-width:140px;
        background:#F9FAFB;
        border-radius:999px;
        padding:.45rem .9rem;
        display:flex;
        align-items:center;
        gap:.35rem;
        font-size:.85rem;
        color:#4B5563;
      }

      .nf-onb-profile-tag-icon{
        font-size:.9rem;
        line-height:1;
      }

      .nf-onb-profile-tag-text{
        line-height:1.2;
        color:#6B7280;
        font-weight:500;
      }

      .nf-onb-macro-strip{
        
        display:flex;
        flex-wrap:wrap;
        gap:.55rem;
      }

      .nf-onb-macro-card{
        flex:1 1 140px;
        min-width:140px;
        background:#F9FAFB;
        border-radius:999px;
        padding:.45rem .9rem;
        display:flex;
        align-items:center;
        justify-content:space-between;
        font-size:.85rem;
      }

      .nf-onb-macro-left{
        display:flex;
        align-items:center;
        gap:.35rem;
      }

      .nf-onb-macro-icon{
        font-size:.9rem;
        line-height:1;
      }

      .nf-onb-macro-label{
        color:#6B7280;
        font-weight:500;
      }

      .nf-onb-macro-value{
        font-weight:600;
        color:#111827;
        display:block;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
      }

      .nf-onb-profile-extra{
        margin:.5rem 0 0;
        font-size:.83rem;
        color:#6B7280;
      }

      @media (max-width:768px){
        .nf-onb-macro-strip{
          
          gap:.7rem;
        }

        .nf-onb-macro-card{
          flex:1 1 100%;
          min-width:100%;
          background:#F9FAFB;
          border-radius:14px;
          padding:.55rem .75rem;
border:1px solid #E5E7EB;
        }

        .nf-onb-macro-left{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:.4rem;
        }

        .nf-onb-macro-icon{
          display:flex;
          align-items:center;
          justify-content:center;
          width:30px;
          height:30px;
          border-radius:999px;
          background:#EEF2FF;
          font-size:.95rem;
          flex-shrink:0;
        }

        .nf-onb-macro-label{
          font-size:.75rem;
        }

        .nf-onb-macro-value{
          font-size:.85rem;
        }
      }

      @media (min-width:480px) and (max-width:768px){
        .nf-onb-macro-card{
          flex:1 1 calc(50% - .5rem);
          min-width:calc(50% - .5rem);
        }
      }

.nf-onb-reset-form{
        margin:0;
      }

      
      
      .nf-onb-dashboard .nf-onb-reset-form .button{
        display:inline-flex !important;
        align-items:center !important;
        gap:.45rem !important;
        background:#f4f4f4 !important;
        color:#333333 !important;
        border-radius:12px !important;
        padding:.45rem 1.1rem !important;
        border:1px solid #e0e0e0 !important;
        font-size:.85rem !important;
        font-weight:600 !important;
        text-transform:uppercase !important;
        letter-spacing:.02em !important;
        cursor:pointer !important;
}
      .nf-onb-dashboard .nf-onb-reset-form .button:hover{
        background:#e9e9e9 !important;
        color:#333333 !important;
        border-color:#d5d5d5 !important;
      }



      .nf-onb-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:1.5rem;
      }

      .nf-onb-card-section h3{
        margin:0 0 .75rem;
        font-size:1.05rem;
        font-weight:700;
        color:#242424;
      }

      .nf-onb-item{
        margin-bottom:.75rem;
      }

      .nf-onb-dashboard .button{
        background:#EA9912;
        border-radius:12px;
        border:none;
        color:#ffffff;
        font-weight:700;
        padding:.55rem 1.3rem;
        font-size:.9rem;
        text-transform:none;
}
      .nf-onb-dashboard .button:hover{
        background:#D98A10;
      }



      
      .nf-onb-actions-row{
        
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:.75rem;
      }

      @media (max-width: 768px){
        .nf-onb-actions-row{
          justify-content:center;
        }
        .nf-onb-actions-row .nf-onb-history-button,
        .nf-onb-actions-row .nf-onb-reset-button{
          margin-left:0;
        }
      }
.nf-onb-history-button{
        
        display:inline-flex;
        align-items:center;
        gap:.45rem;
        background:#f4f4f4;
        color:#333333;
        border-radius:12px;
        padding:.45rem 1.1rem;
        border:1px solid #e0e0e0;
        font-size:.85rem;
        font-weight:600;
        cursor:pointer;
        text-decoration:none;
      }
      .nf-onb-history-button:hover{
        background:#e9e9e9;
      }
      .nf-onb-history-button-icon{
        width:18px;
        height:18px;
        border-radius:999px;
        background:#EA9912;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:.7rem;
        color:#ffffff;
      }

      .nf-onb-reset-button-icon{
        width:18px;
        height:18px;
        border-radius:999px;
        background:#ffffff;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:.7rem;
        color:#EA9912;
        border:1px solid #EA9912;
      }

      .nf-onb-modal-backdrop{
        position:fixed;
        inset:0;
        background:rgba(15,23,42,.45);
        display:none;
        align-items:center;
        justify-content:center;
        z-index:9999;
        padding:1.25rem;
      }
      .nf-onb-modal-backdrop.nf-onb-modal-open{
        display:flex;
      }
      .nf-onb-modal{
        background:#ffffff;
        border-radius:16px;
max-width:640px;
        width:100%;
        max-height:80vh;
        padding:1.75rem 1.75rem 1.5rem;
        position:relative;
        overflow:auto;
      }
      .nf-onb-modal-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        margin-bottom:0rem;
      }
      .nf-onb-modal-title{
        margin:0;
        font-size:1.25rem;
        font-weight:700;
        color:#111827;
      }
      .nf-onb-modal-close{
        border:none;
        background:transparent;
        cursor:pointer;
        font-size:1.15rem !important;
        line-height:1;
        color:#6b7280;
      }
      .nf-onb-modal-close:hover{
        color:#111827;
      }
      .nf-onb-modal-body{
        font-size:.95rem;
        color:#374151;
      }
      .nf-onb-history-list{
        list-style:none;
        padding:0;
        margin:0;
        display:flex;
        flex-direction:column;
        gap:.9rem;
      }
      .nf-onb-history-item{
        padding:.85rem 1rem;
        border-radius:12px;
        background:#F9FAFB;
        border:1px solid #E5E7EB;
      }
      .nf-onb-history-item-current{
        border-color:#EA9912;
}
      .nf-onb-history-date{
        font-size:.8rem;
        text-transform:uppercase;
        letter-spacing:.06em;
        color:#6B7280;
        margin:0 0 .35rem;
      }
      .nf-onb-history-meta{
        margin:0;
        padding:0;
        list-style:none;
        display:flex;
        flex-wrap:wrap;
        gap:.5rem 1.25rem;
        font-size:.9rem;
      }
      .nf-onb-history-meta li strong{
        font-weight:600;
        color:#111827;
      }
      .nf-onb-history-evolution{
        
        font-size:.8rem;
        color:#4B5563;
      }
      .nf-onb-history-evolution-label{
        margin:0;
      }
      .nf-onb-history-evolution-text{
        margin:.15rem 0 0;
      }
      .nf-onb-history-empty{
        font-size:.9rem;
        color:#6B7280;
      }

      @media (max-width:768px){
        .nf-onb-modal{
          max-height:85vh;
          padding:1.35rem 1.2rem 1.2rem;
        }
      }

      .nf-onb-course-list,
      .nf-onb-toolkit-list,
      .nf-onb-cert-list{
        list-style:none;
        padding:0;
        margin:0;
        display:flex;
        flex-direction:column;
        gap:.85rem;
      }
      .nf-onb-course-list li,
      .nf-onb-toolkit-list li,
      .nf-onb-cert-list li{
        padding:0;
        border:none;
      }
      .nf-onb-item{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        padding:.85rem 1rem;
        border-radius:14px;
        background:#F9FAFB;
        border:1px solid rgba(0,0,0,.04);
}
      .nf-onb-item-text{
        flex:1;
        min-width:0;
      }
      .nf-onb-item strong{
        font-size:.95rem;
        font-weight:600;
        color:#242424;
      }
      .nf-onb-card-certificates{
        
      }
      .nf-onb-card-certificates .nf-onb-card-header{
        margin-bottom:0rem;
      }
      .nf-onb-cert-summary{
        margin:0 0 1rem;
        font-size:.9rem;
        color:#4B5563;
      }
      .nf-onb-cert-empty{
        margin:0;
        font-size:.9rem;
        color:#6B7280;
      }
      /* Fix: remove unwanted margin-bottom from certificate subtitle */
      .nf-onb-card-certificates p.nf-onb-card-subtitle{
        margin-bottom:0 !important;
      }

      .nf-onb-cert-grid{
        display:flex;
        flex-wrap:wrap;
        gap:1rem;
        justify-content:flex-start;
        
      }
      .nf-onb-cert-card{
        background:#F9FAFB;
        border-radius:14px;
        padding:1rem 1.1rem;
border:1px solid rgba(0,0,0,.04);
        display:flex;
        flex-direction:column;
        gap:.4rem;
        flex:1 1 260px;
        max-width:320px;
        min-width:0;
      }
      .nf-onb-cert-title{
        margin:0;
        font-size:.95rem;
        font-weight:600;
        color:#111827;
      }
      .nf-onb-cert-meta{
        display:flex;
        flex-wrap:wrap;
        gap:.5rem;
        font-size:.8rem;
        color:#6B7280;
      }
      .nf-onb-cert-score{
        font-weight:600;
      }
      .nf-onb-cert-button{
        align-self:flex-end;
        
      }
      .nf-onb-routine-main strong{
        font-size:.9rem;
      }

      /* Estilos específicos para la sección de rutina recomendada dentro de la tarjeta. */
      .nf-onb-routine-alt-title{
        font-size:.9rem;
        margin:.25rem 0 .35rem;
      }
      .nf-onb-routine-list{
        margin:.5rem 0 0;
      }
      .nf-onb-routine-list .nf-onb-item-text strong{
        font-size:.9rem;
      }
      .nf-onb-course-list li.nf-onb-routine-main-item{
        position:relative;
        border-left:4px solid transparent !important;
        padding-left:0 !important;
      }

      .nf-onb-routine-top-tag{
        display:inline-block;
        margin-left:.45rem;
        background:rgba(234,153,18,0.12);
        color:#EA9912;
        padding:.15rem .45rem;
        border-radius:12px;
        font-size:.65rem;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.03em;
      }

      @media (max-width:768px){
        .nf-onb-card{
          padding:1.25rem 1.25rem;
        }
        .nf-onb-item{
          flex-direction:column;
          align-items:flex-start;
        }
      }
    

/* Estilos de la barra de fidelidad (copiados del plugin de fidelidad) */
/* --- Resumen BAR (horizontal, discreto) --- */

.chf-resumen-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 20px;
    max-width: 860px;
    margin: 0 0 26px 0;
    border: 1px solid #e3e3e3;
}

.chf-resumen-bar-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chf-resumen-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #8a8a8a;
}

.chf-resumen-mainline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #242424;
}

.chf-resumen-label {
    font-weight: 600;
}

.chf-resumen-months {
    font-size: 13px;
    color: #555555;
}

.chf-resumen-bar-right {
    flex-shrink: 0;
}

.chf-resumen-link {
    font-size: 13px;
    color: #EA9912;
    font-weight: 600;
    text-decoration: none;
}

.chf-resumen-link:hover {
    text-decoration: underline;
}

/* Mobile: bar en dos filas */

@media (max-width: 768px) {
    .chf-resumen-bar {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 14px;
    }
}

.chf-resumen-pill {
    border-radius: 14px !important;
}


.chf-resumen-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chf-resumen-titleline {
    
}

.chf-resumen-title {
    font-size: 15px;
    font-weight: 600;
    color: #242424;
}

.chf-resumen-bar-right {
    flex-shrink: 0;
    padding-left: 18px;
    border-left: 1px solid #e3e3e3;
}

@media (max-width: 768px) {
    .chf-resumen-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .chf-resumen-bar-right {
        border-left: none;
        padding-left: 0;
        padding-top: 8px;
    }
}

/* Ajustes tipográficos para el resumen */

.chf-resumen-mainline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #242424;
}

.chf-resumen-subline {
    
    font-size: 13px;
    color: #666666;
}

/* CTA derecha más protagonista */

.chf-resumen-bar-right {
    flex-shrink: 0;
    padding-left: 20px;
    border-left: 1px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.chf-resumen-link-main {
    font-size: 13px;
    color: #EA9912;
    font-weight: 600;
    text-decoration: none;
}

.chf-resumen-link-main:hover {
    text-decoration: underline;
}

.chf-resumen-link-sub {
    font-size: 12px;
    color: #777777;
    max-width: 260px;
    text-align: right;
}

@media (max-width: 768px) {
    .chf-resumen-bar-right {
        border-left: none;
        padding-left: 0;
        padding-top: 6px;
        align-items: flex-start;
    }
    .chf-resumen-link-sub {
        text-align: left;
    }
}

/* Footer version */
.chf-resumen-bar {
    max-width: 860px;
    padding: 18px 22px 10px;
}

.chf-resumen-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chf-resumen-footer {
    
    padding-top: 12px;
    border-top: 1px solid #e3e3e3;
    text-align: center;
}

.chf-resumen-footer-link {
    font-size: 14px;
    font-weight: 600;
    color: #EA9912;
    text-decoration: none;
}

.chf-resumen-footer-link:hover {
    text-decoration: underline;
}

/* Layout resumen con CTA en el pie */

.chf-resumen-bar {
    max-width: 860px;
    padding: 14px 20px 10px;
    border-radius: 12px;
    border: 1px solid #e3e3e3;
background: #ffffff;
}

.chf-resumen-top {
    margin-bottom: 8px;
}

.chf-resumen-footer {
    
    padding-top: 8px;
    border-top: 1px solid #e3e3e3;
    display: flex;
    justify-content: flex-end;
}

.chf-resumen-link-main {
    font-size: 13px;
    color: #EA9912;
    font-weight: 600;
    text-decoration: none;
}

.chf-resumen-link-main:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    
    .chf-resumen-footer {
        justify-content: flex-start;
    }
}

/* === Barra resumen con 3 columnas y separadores verticales === */

.chf-resumen-bar {
    max-width: 920px;

    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid #e3e3e3;
background: #ffffff;
}

.chf-resumen-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #9b9b9b;
    margin-bottom: 6px;
}

.chf-resumen-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.chf-resumen-col {
    padding: 0 10px;
}

.chf-resumen-col-main {
    flex: 1.1;
}

.chf-resumen-col-progress {
    flex: 1.1;
}

.chf-resumen-col-cta {
    flex: 0.9;
    text-align: right;
}

/* Separadores verticales finos entre columnas */
.chf-resumen-col + .chf-resumen-col {
    border-left: 1px solid #e5e5e5;
}

/* Línea principal y secundaria */

.chf-resumen-mainline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #242424;
}

.chf-resumen-subline {
    font-size: 13px;
    color: #666666;
}

/* CTA */

.chf-resumen-link-main {
    font-size: 13px;
    color: #EA9912;
    font-weight: 600;
    text-decoration: none;
}

.chf-resumen-link-main:hover {
    text-decoration: underline;
}

/* Pill/badge más elegante */

.chf-resumen-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
}

/* Mini badge genérico también más elegante */

.chf-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #242424;
    font-size: 12px;
    border: 1px solid #e0e0e0;
}

/* Responsive */

@media (max-width: 768px) {
    .chf-resumen-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .chf-resumen-col {
        padding: 4px 0;
        border-left: none;
        border-top: 1px solid #f0f0f0;
        width: 100%;
    }
    .chf-resumen-col:first-of-type {
        border-top: none;
    }
    .chf-resumen-col-cta {
        text-align: left;
    }
}

/* ===== Mejoras estéticas de la barra ===== */



.chf-resumen-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #9c9c9c;
    margin-bottom: 12px;
}

.chf-resumen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.chf-resumen-col {
    padding: 0 14px;
}

.chf-col-left { flex: 1.1; }
.chf-col-middle { flex: 1.2; }
.chf-col-right { flex: 0.8; text-align: right; }

/* Líneas verticales ultra finas */
.chf-resumen-col + .chf-resumen-col {
    border-left: 1px solid #e4e4e4;
}

/* Línea principal */
.chf-resumen-mainline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #242424;
    font-weight: 500;
}

/* Subline */
.chf-resumen-subline {
    font-size: 14px;
    color: #555;
    line-height: 1.45;
    padding-left: 6px;
}

/* Badge elegante */
.chf-resumen-pill {
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #242424;
}

/* CTA */
.chf-resumen-link-main {
    font-size: 14px;
    font-weight: 600;
    color: #EA9912;
    text-decoration: none;
    transition: 0.2s ease;
}

.chf-resumen-link-main:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 768px) {
    .chf-resumen-row {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .chf-resumen-col {
        padding: 10px 0 !important;
        border-left: none !important;
        border-top: 1px solid #f0f0f0;
        width: 100%;
    }

    .chf-resumen-col:first-of-type {
        border-top: none;
    }

    .chf-col-right { text-align: left; }
}


/* Ajuste NF: que la barra de fidelidad ocupe todo el ancho del layout */
.chf-resumen-bar{
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}


/* Estilos del modal de beneficios del Club (copiados del plugin original) */
.chf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.chf-modal-overlay.chf-modal-open {
    display: flex;
}

.chf-modal {
    background: #ffffff;
    border-radius: 18px;
    max-width: 460px;
    width: 92%;
    padding: 22px 22px 20px;
position: relative;
    color: #242424;
    font-size: 14px;
}

.chf-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #b3b3b3;
}

.chf-modal-close:hover {
    color: #777777;
}

.chf-modal-header {
    margin-bottom: 12px;
    text-align: left;
}

.chf-modal-header h3 {
    font-size: 18px;
    margin: 0 0 4px;
    font-weight: 700;
}

.chf-modal-subtitle {
    margin: 0;
    font-size: 13px;
    color: #666666;
}

.chf-modal-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f4f4f4;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #777777;
    margin-bottom: 6px;
}

.chf-modal-tag-next {
    background: #fff4dd;
    color: #c87b07;
}

.chf-modal-current {
    margin-bottom: 14px;
}

.chf-modal-current-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chf-modal-current-name {
    font-weight: 700;
    font-size: 15px;
}

.chf-modal-current-months {
    font-size: 13px;
    color: #666666;
}

.chf-modal-next {
    margin-bottom: 16px;
}

.chf-modal-next-text {
    margin: 0;
    font-size: 13px;
    color: #555555;
}

.chf-modal-levels {
    
}

.chf-modal-levels-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #999999;
    margin: 0 0 8px;
}

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

.chf-modal-level {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f1f1f1;
}

.chf-modal-level:last-child {
    border-bottom: none;
}

.chf-modal-level-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chf-modal-level-name {
    font-size: 14px;
    font-weight: 500;
}

.chf-modal-level-min {
    font-size: 12px;
    color: #888888;
}

.chf-modal-level-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Badges de nivel premium (compartidos por resumen y modal) */
.chf-level-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    min-height: 30px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.2;
    overflow: hidden;
}

/* Estado base: por si falta el mapeo de nivel */
.chf-level-badge-default {
    background: linear-gradient(135deg, #f4f4f4, #e0e0e0);
    color: #222222;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

/* Novato */
.chf-level-badge-novato {
    background: linear-gradient(135deg, #fff3cf, #f3d9a0);
    color: #5a3b16;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

/* Intermedio */
.chf-level-badge-intermedio {
    background: linear-gradient(135deg, #ffe9b8, #f2c874);
    color: #4b2b0f;
    border: 1px solid rgba(255, 255, 255, 0.92);
}

/* Avanzado */
.chf-level-badge-avanzado {
    background: linear-gradient(135deg, #ffe3aa, #f4c361 45%, #e6aa34 85%);
    color: #43240c;
    border: 1px solid rgba(255, 255, 255, 0.92);
}

/* Élite */
.chf-level-badge-elite {
    background: linear-gradient(135deg, #ffe9b0, #f6c451 45%, #e2a428 80%);
    color: #42210b;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

/* Leyenda */
.chf-level-badge-leyenda {
    background: linear-gradient(135deg, #fce9a5, #fff4d6 45%, #e5d1a3 100%);
    color: #3a2710;
    border: 1px solid #f0c96a;
}

/* Brillo sutil animado para Élite y Leyenda */
.chf-level-badge-elite::after,
.chf-level-badge-leyenda::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 40%,
        transparent 80%
    );
    opacity: 0;
    transform: translateX(-120%);
    pointer-events: none;
}

.chf-level-badge-elite:hover::after,
.chf-level-badge-leyenda:hover::after {
    animation: chfBadgeSheen 2.2s linear forwards;
}

/* Animación de brillo */
@keyframes chfBadgeSheen {
    0% {
        opacity: 0;
        transform: translateX(-120%);
    }
    25% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translateX(140%);
    }
}

.chf-modal-level.is-current .chf-modal-level-name {
    font-weight: 600;
}

.chf-modal-footer {
    
    text-align: right;
}

.chf-modal-account-link {
    font-size: 13px;
    color: #EA9912;
    font-weight: 600;
    text-decoration: none;
}

.chf-modal-account-link:hover {
    text-decoration: underline;
}

/* Modal responsive */
@media (max-width: 480px) {
    .chf-modal {
        padding: 18px 16px 16px;
        border-radius: 16px;
    }
    .chf-modal-header {
        text-align: left;
    }
    .chf-modal-level {
        padding: 6px 0;
    }
}


/* === Beneficios actuales / siguiente nivel en modal === */
.chf-modal-benefits-wrapper {
    
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chf-modal-benefits-block {
    background: #fafafa;
    border-radius: 10px;
    padding: 8px 10px;
}

.chf-modal-benefits-next {
    background: #fff7e7;
}

.chf-modal-benefits-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
}

.chf-modal-benefits-note {
    margin: 0 0 4px;
    font-size: 12px;
    color: #777777;
}

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

.chf-modal-benefits-item {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    color: #555555;
    margin: 2px 0;
}

.chf-modal-benefits-item::before {
    content: '•';
    position: absolute;
    left: 2px;
    top: 0;
    color: #EA9912;
}

/* Hover color de la X de cierre */
.chf-modal-close:hover,
.chf-modal-close:focus {
    color: #242424 !important;
    outline: none;
}

/* Responsive tweaks */
@media (max-width: 480px) {
    .chf-modal-benefits-block {
        padding: 8px 8px;
    }
}


/* === Fix azul en botón de cierre del modal === */
.chf-modal-close {
    background: transparent !important;
border: none !important;
    color: #b3b3b3;
}

.chf-modal-close:hover,
.chf-modal-close:focus {
    background: transparent !important;
border: none !important;
    color: #242424 !important;
    outline: none;
}


/* === Versión compacta del modal de beneficios === */

.chf-modal-benefits-current {
    
    margin-bottom: 10px;
}

.chf-modal-benefits-block {
    background: #fafafa;
    border-radius: 10px;
    padding: 8px 10px;
}

.chf-modal-benefits-current {
    background: #f7f7f7;
}

.chf-modal-next-compact {
    
    margin-bottom: 8px;
    background: #fff7e7;
    border-radius: 10px;
    padding: 8px 10px;
}

.chf-modal-benefits-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
}

.chf-modal-benefits-note {
    margin: 0 0 4px;
    font-size: 12px;
    color: #777777;
}

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

.chf-modal-benefits-item {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    color: #555555;
    margin: 1px 0;
}

.chf-modal-benefits-item::before {
    content: '•';
    position: absolute;
    left: 2px;
    top: 0;
    color: #EA9912;
}

.chf-modal-benefits-more {
    margin: 4px 0 0;
    font-size: 12px;
    color: #777777;
}

/* Acordeón de niveles */

.chf-modal-levels {
    
}

.chf-modal-levels-toggle {
    width: 100%;
    border: none;
    background: #f4f4f4;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: #555555;
    margin-bottom: 4px;
}

.chf-modal-levels-icon {
    font-size: 16px;
    line-height: 1;
}

.chf-modal-levels-content {
    display: none;
}

.chf-levels-open .chf-modal-levels-content {
    display: block;
}

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

.chf-modal-level {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f1f1f1;
}

.chf-modal-level:last-child {
    border-bottom: none;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .chf-modal-benefits-block,
    .chf-modal-next-compact {
        padding: 8px 8px;
    }
}


/* === Compactar altura de tarjetas de beneficios === */
.chf-modal-benefits-block,
.chf-modal-next-compact {
    padding: 6px 8px !important;
    border-radius: 6px !important;
}

.chf-modal-benefits-title {
    font-size: 12px !important;
    margin-bottom: 2px !important;
}

.chf-modal-benefits-note {
    font-size: 11px !important;
    margin-bottom: 2px !important;
}

.chf-modal-benefits-item {
    font-size: 12px !important;
    margin: 0 0 1px !important;
}

.chf-modal-benefits-more {
    font-size: 11px !important;
    
}

/* Compacta un poco el bloque "Próximo nivel" */
.chf-modal-next-compact .chf-modal-next-text {
    font-size: 12px !important;
    margin-bottom: 2px !important;
}

/* Mobile: aún más compacto en pantallas pequeñas */
@media (max-width: 480px) {
    .chf-modal-benefits-block,
    .chf-modal-next-compact {
        padding: 5px 7px !important;
    }
}


/* === Chip compacto de nivel actual en el encabezado del modal === */
.chf-modal-header {
    margin-bottom: 10px;
}

.chf-modal-level-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f4f4f4;
    font-size: 12px;
    color: #555555;
    
}


/* === Badge de nivel actual en encabezado === */
.chf-modal-level-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f4f4f4;
    
}

.chf-modal-level-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #999999;
}

.chf-modal-level-badge {
    background: #EA9912;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.chf-modal-level-sub {
    font-size: 11px;
    color: #777777;
}

/* Compactar aún más la lista de "Todos los niveles del Club" */
.chf-modal-level {
    padding: 4px 0 !important;
}

.chf-modal-level-name {
    font-size: 12px !important;
}

.chf-modal-level-min {
    font-size: 11px !important;
    color: #777777 !important;
}

.chf-modal-level-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
}

.chf-modal-levels-toggle {
    font-size: 11px !important;
    padding: 5px 10px !important;
}


/* === Condensar aún más la sección de niveles === */
.chf-modal-levels {
    
}

.chf-modal-levels-content {
    max-height: 140px;
    overflow-y: auto;
    
}

.chf-modal-level {
    padding: 3px 0 !important;
}

.chf-modal-level-name {
    font-size: 11.5px !important;
}

.chf-modal-level-min {
    font-size: 10.5px !important;
}

.chf-modal-level-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
}

@media (max-width: 480px) {
    .chf-modal-levels-content {
        max-height: 120px;
    }
}


/* === Centrado en móvil para la barra de resumen del Club === */
@media (max-width: 768px) {
    .chf-resumen-bar {
        text-align: center;
    }

    .chf-resumen-row {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .chf-resumen-col {
        width: 100%;
        justify-content: center;
    }

    .chf-resumen-mainline,
    .chf-resumen-subline,
    .chf-resumen-subline-center {
        justify-content: center;
        text-align: center;
    }

    .chf-resumen-col.chf-col-right {
        text-align: center;
    }

    .chf-resumen-link-main {
        display: inline-block;
        
    }
}


/* === Ajuste extra: centrar realmente la barra en móvil === */
@media (max-width: 768px) {
    .chf-resumen-bar {
        align-items: center !important;
    }

    .chf-resumen-row {
    }

    .chf-resumen-col {
        text-align: center;
    }

    .chf-resumen-mainline {
        justify-content: center;
    }
}


/* Bloque de cupón dentro del modal: discreto y compacto */
.chf-modal-coupon {
    
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    font-size: 12px;
    color: #555555;
}

.chf-modal-tag-coupon {
    display: inline-flex;
    align-items: center;
    margin: 0 6px 0 0;
    margin-bottom: 0px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #FFF4E0; /* versión suave de #EA9912 */
    color: #8a5a0a;
    font-size: 8px;
    font-weight: 600;
}

.chf-modal-coupon-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}

.chf-modal-coupon-code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

.chf-modal-coupon-product {
    font-size: 10px;
    color: #777777;
}

.chf-modal-coupon-days {
    font-size: 10px;
    color: #777777;
}

.chf-modal-coupon-expired {
    font-size: 11px;
    color: #c0392b;
    font-weight: 600;
}


/* Cupón dentro del bloque de beneficios: compacto y discreto */
.chf-modal-coupon {
    
    padding: 6px 8px;
    border-radius: 8px;
    background: #fafafa;
    border: 1px dashed #e5e5e5;
    font-size: 12px;
    color: #555555;
}

.chf-modal-coupon-inline {
    /* reservado por si lo reutilizamos en otros contextos */
}

.chf-modal-tag-coupon {
    display: inline-block;
    margin-bottom: 0px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #FFF4E0; /* versión suave de #EA9912 */
    color: #8a5a0a;
    font-size: 8px;
    font-weight: 600;
}

.chf-modal-coupon-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}

.chf-modal-coupon-code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

.chf-modal-coupon-product {
    font-size: 10px;
    color: #777777;
}


/* Toggle beneficios del próximo nivel */
.chf-modal-next {
    
}

.chf-modal-next-toggle {
    width: 100%;
    border: none;
    background: #EA9912;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: #ffffff;
    margin-bottom: 4px;
}

.chf-modal-next-label {
    font-weight: 600;
}

.chf-modal-next-icon {
    font-size: 16px;
    line-height: 1;
}

.chf-modal-next-content {
    display: none;
}

.chf-next-open .chf-modal-next-content {
    display: block;
}


/* Fix hover colors overriding theme */
.chf-modal-next-toggle,
.chf-modal-next-toggle:hover {
    font-size: 11px !important;
}

.chf-modal-next-toggle:hover {
    background-color: #C57F0F !important;
}

.chf-modal-levels-toggle:hover {
    background-color: #5A5A5A !important; /* 15% darker gray */
}


/* Ajuste NF: que la barra de fidelidad ocupe todo el ancho del layout */
.chf-resumen-bar{
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}


/* Barra de progreso horizontal del Club (copiada del plugin de fidelidad) */
.chf-progress-container {
    width: 100%;
    max-width: 260px;
    height: 4px;
    background: #e5e5e5;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.chf-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #EA9912, #f5c15a);
    transform-origin: left center;
    transition: width 0.5s ease-out;
}


      .nf-onb-latest-card{
        margin: 0 0 26px 0;
      }
      .nf-onb-latest-card .nf-onb-latest-eyebrow{
        font-size:.78rem;
        text-transform:uppercase;
        letter-spacing:.14em;
        font-weight:600;
        color:#9CA3AF;
        margin:0 0 .15rem;
      }
      .nf-onb-latest-card .nf-onb-latest-title{
        margin:0 0 .75rem;
        font-size:1.15rem !important;
        font-weight:700;
        color:#111827;
      }
      .nf-onb-latest-list{
        margin:.4rem 0 0;
        padding:0;
        list-style:none;
        display:flex;
        flex-direction:column;
        gap:.35rem;
      }
      .nf-onb-latest-item a{
        font-size:.95rem;
        font-weight:500;
        color:#111827;
        text-decoration:none;
        line-height:1.35;
      }
      .nf-onb-latest-item a:hover{
        text-decoration:underline;
      }
      .nf-onb-latest-empty{
        margin:.4rem 0 0;
        font-size:.85rem;
        color:#6B7280;
      }


      /* Hoja de ruta: bloque principal más separado y destacado
         cuando el dashboard se usa en la página "hoja-ruta". */
      .nf-onb-roadmap-block{
        background:#F9FAFB;
        border-radius:26px;
        padding:2.2rem 2.2rem 2.6rem;
border:1px solid #E5E7EB;
        margin-bottom:26px;

        
        position:relative;
      }

      .nf-onb-roadmap-block::before{
        content:'Hoja de ruta';
        position:absolute;
        top:-14px;
        left:2.5rem;
        background:#111827;
        color:#FFFFFF;
        padding:.2rem .9rem;
        border-radius:999px;
        font-size:.75rem;
        font-weight:600;
        letter-spacing:.08em;
        text-transform:uppercase;
}

      @media (max-width:768px){
        .nf-onb-roadmap-block{
          padding:1.6rem 1.4rem 2.2rem;
          border-radius:22px;
          
          margin-bottom: 1.625rem;
        }
        .nf-onb-roadmap-block::before{
          left:1.6rem;
        }
      }


      /* Tarjeta de justificación global de la hoja de ruta */
      .nf-onb-roadmap-justification{
        width:100%;
        margin:1.8rem 0 1.6rem;
        padding:1.6rem 2rem 1.9rem;
        border-radius:20px;
        border:1px solid #E5E7EB;
        background:#FFFFFF;
      }
      .nf-onb-roadmap-justification .nf-onb-card-header{
        margin-bottom:0rem;
      }
      .nf-onb-brain-just-body{
        font-size:.95rem;
        line-height:1.6;
        color:#374151;
      }
      .nf-onb-justification-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:.75rem;
      }
      .nf-onb-justification-toggle{
        border:none;
        background:transparent;
        padding:.2rem .4rem;
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        font-size:1.2rem;
        font-weight:600;
        color:#F59E0B;
        cursor:pointer;
      }
.nf-onb-justification-toggle:hover{ background:transparent !important; color:#242424 !important; }

      .nf-onb-justification-toggle-icon{
        font-size:1.2rem;
        transition:transform .2s ease;
      }
      .nf-onb-justification-toggle.is-open .nf-onb-justification-toggle-icon{
        transform:rotate(0deg);
      }
      .nf-onb-justification-body{
        
        transition:max-height .25s ease, margin-top .25s ease;
      }
      .nf-onb-justification-body.is-accordion{
        overflow:hidden;
        max-height:0;
      }
      .nf-onb-justification-body.is-accordion.is-open{
        max-height:600px;
        
      }

      .nf-onb-brain-just-text{
        margin:0 0 .9rem;
      }
      .nf-onb-brain-just-goals-title{
        font-size:.92rem;
        font-weight:600;
        color:#111827;
        margin:0 0 .4rem;
      }
      .nf-onb-brain-just-goals{
        list-style:disc;
        padding-left:1.3rem;
        margin:0;
        display:flex;
        flex-direction:column;
        gap:.25rem;
      }
      .nf-onb-brain-just-goals li{
        margin:0;
      }

      

.nf-onb-insight-card{
        width:100%;
        margin:0 0 .9rem;
        padding:.55rem 1.1rem .75rem;
        border-radius:12px;
        border:1px solid #E5E7EB;
        background:#FFFFFF;
      }
      .nf-onb-insight-title{
        margin:0 0 .3rem;
        font-size:1.2rem;
        font-weight:600;
        color:#111827;
      }
      .nf-onb-insight-metrics{
        display:flex;
        flex-wrap:wrap;
        gap:.9rem;
        padding:0;
        margin:0 0 .25rem;
        list-style:none;
      }
      .nf-onb-insight-metric-label{ font-size:.77rem;
        text-transform:uppercase;
        letter-spacing:.06em;
        color:#6B7280;
        margin:0 0 .08rem;
      }
      .nf-onb-insight-metric-value{ font-size:1.15rem !important;
        font-weight:600;
        color:#111827;
      }
      .nf-onb-insight-metric-pill{
        display:inline-block;
        padding:.2rem .7rem;
        border-radius:999px;
        border:1px solid #E5E7EB;
        background:#F9FAFB;
      }
      .nf-onb-insight-summary { margin: 20px 0 10px 0; }
      .nf-onb-insight-accordion{
        position:relative;
      }
      .nf-onb-insight-header{
        display:flex;
        justify-content:flex-start;
        align-items:center;
        gap:.75rem;
        margin:0 0 .45rem;
      }
      .nf-onb-insight-toggle-wrap{ margin:.5rem 0 .2rem; text-align:left; }
      .nf-onb-insight-toggle{
        border:1px solid #F59E0B;
        background:rgba(245,158,11,.08);
        padding:.4rem 1rem;
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        font-size:.8rem;
        font-weight:600;
        color:#92400E;
        cursor:pointer;
        border-radius:999px;
        box-shadow:0 1px 2px rgba(15,23,42,.08);
      }
      .nf-onb-insight-toggle:hover{ background:rgba(245,158,11,.15); color:inherit; }
      .nf-onb-insight-toggle-icon{
        font-size:.8rem;
        transition:transform .2s ease;
      }
      .nf-onb-insight-toggle.is-open .nf-onb-insight-toggle-icon:last-child{
        transform:rotate(180deg);
      }
      .nf-onb-insight-body{
        
        max-height:0;
        overflow:hidden;
        transition:max-height .25s ease;
      }
      .nf-onb-insight-body.is-open{
        max-height:600px;
      }

      
      .nf-onb-marcos-ia-accordion{  margin-bottom:2rem !important; }
      .nf-onb-marcos-ia-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:.75rem;
      }
      .nf-onb-marcos-ia-toggle{
        border:none;
        background:transparent;
        padding:.2rem .4rem;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:1.2rem;
        font-weight:600;
        color:#F59E0B;
        cursor:pointer;
      }
      .nf-onb-marcos-ia-toggle-icon{
        font-size:1.2rem;
        transition:transform .2s ease;
      }
      .nf-onb-marcos-ia-toggle.is-open .nf-onb-marcos-ia-toggle-icon{
        transform:rotate(0deg);
      }
      .nf-onb-marcos-ia-body{
        
        max-height:0;
        overflow:hidden;
        transition:max-height .25s ease, margin-top .25s ease;
      }
      .nf-onb-marcos-ia-body.is-open{
        max-height:600px;
        
      }
.nf-onb-marcos-ia-list{
        margin:.2rem 0 0;
        padding-left:1.1rem;
      }
      .nf-onb-marcos-ia-item{
        margin:0 0 .2rem;
        font-size:.82rem;
      }

      @media (max-width:768px){
        .nf-onb-insight-card{
          padding:.5rem .9rem .7rem;
          border-radius:11px;
        }
        .nf-onb-insight-metrics{
          flex-direction:column;
          gap:.5rem;
        }
      }

      /* Modal mensaje clon digital (Marcos-IA) */
      .nf-onb-marcos-ia-modal-overlay{
        position:fixed;
        inset:0;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(15,23,42,.42);
        z-index:9999;
        padding:1.25rem;
        opacity:0;
        pointer-events:none;
        transition:opacity .22s ease;
      }
      .nf-onb-marcos-ia-modal-overlay.is-visible{
        opacity:1;
        pointer-events:auto;
      }
      .nf-onb-marcos-ia-modal{
        position:relative;
        background:#ffffff;
        border-radius:20px;
        max-width:620px;
        width:100%;
        box-shadow:0 14px 35px rgba(15,23,42,.16);
        transform:translateY(10px) scale(.96);
        opacity:0;
        transition:opacity .22s ease, transform .22s ease;
        max-height:90vh;
        display:flex;
        flex-direction:column;
        padding:1.35rem 1.3rem 1.25rem;
      }
      .nf-onb-marcos-ia-modal.is-open{
        opacity:1;
        transform:translateY(0) scale(1);
      }

.nf-onb-marcos-ia-modal-badge{
  display:inline-flex;
  align-items:center;
  padding:.15rem .6rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:#FEF3C7;
  color:#92400E;
  margin-bottom:.5rem;
}

      .nf-onb-marcos-ia-modal-header h3{
        font-size:1.02rem;
        margin:0 0 .6rem;
      }
      .nf-onb-marcos-ia-modal-body{
        font-size:.86rem;
        line-height:1.55;
        color:#111827;
      }
      .nf-onb-clone-warning{
        display:flex;
        align-items:flex-start;
        gap:.6rem;
        margin-bottom:.7rem;
        padding:.65rem .85rem;
        border-radius:10px;
        background:#FFFBEB;
        border:1px solid rgba(245,158,11,.28);
        color:#92400E;
        font-size:.83rem;
      }
      .nf-onb-clone-warning-icon{
        
        font-size:1rem;
        line-height:1;
      }
      .nf-onb-clone-warning-text{
        margin:0;
      }
      .nf-onb-marcos-ia-modal-footer {
    
    padding-top: 0rem;
}
      .nf-onb-marcos-ia-modal-hint{
        font-size:.78rem;
        color:#6B7280;
        margin:0;
        display:none;
      }
      .nf-onb-marcos-ia-note{
        display:flex;
        align-items:flex-start;
        gap:.4rem;
        
        padding:.5rem .65rem;
        border-radius:10px;
        background:#F9FAFB;
        font-size:.78rem;
        color:#6B7280;
      }
      .nf-onb-marcos-ia-note-icon{
        
        font-size:.9rem;
      }
      .nf-onb-marcos-ia-note-text{
        margin:0;
        display:block;
      }
      .nf-onb-marcos-ia-modal-checkbox{
        display:flex;
        align-items:flex-start;
        gap:.35rem;
        font-size:.78rem;
        color:#4B5563;
      }
      .nf-onb-marcos-ia-modal-checkbox input{
        
      }
.nf-onb-marcos-ia-modal-reactivate{
  display:none;
  
  padding-top:.5rem;
  
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  font-size:.8rem;
  color:#4B5563;
}
.nf-onb-marcos-ia-modal-reactivate-text{
  margin:0;
}
.nf-onb-marcos-ia-modal-secondary{
  border-radius:999px;
  border:1px solid #D1D5DB;
  padding:.4rem 1.1rem;
  font-size:.8rem;
  font-weight:500;
  background:#F3F4F6;
  color:#111827;
  cursor:pointer;
  white-space:normal;
}


      
.nf-onb-marcos-ia-bottom-note{
  font-size:.68rem;
  color:#9CA3AF;
  margin:0;
  
  text-align:left;
}
.nf-onb-marcos-ia-modal-primary{
        display:inline-flex;
        justify-content:center;
        align-items:center;
        align-self:stretch;
        width:100%;
        border:none;
        border-radius:999px;
        padding:.55rem 1.2rem;
        font-size:.9rem;
        font-weight:600;
        cursor:pointer;
        background:#F59E0B;
        color:#ffffff;
        box-shadow:none !important;
        text-shadow:none !important;
        filter:none !important;
      }
      .nf-onb-marcos-ia-modal-primary:hover,
      .nf-onb-marcos-ia-modal-primary:focus,
      .nf-onb-marcos-ia-modal-primary:active{
        box-shadow:none !important;
        text-shadow:none !important;
        filter:none !important;
      }
      .nf-onb-marcos-ia-modal-close{
er:none;
        background:transparent;
        font-size:1.3rem;
        cursor:pointer;
        line-height:1;
        color:#9CA3AF;
      }
      body.nf-onb-modal-open{
        overflow:hidden;
      }

      @media (max-width:768px){
        .nf-onb-roadmap-justification{
          
          padding:1.3rem 1.2rem 1.5rem;
          border-radius:16px;
        }
      }


/* Marcos IA modal – visual improvements */
.nf-onb-marcos-ia-modal{
  position:relative;
  background:#ffffff;
  border-radius:20px;
  max-width:640px;
  width:100%;
  box-shadow:0 22px 50px rgba(15,23,42,.18);
  transform:translateY(12px) scale(.97);
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  padding:1.2rem 1.4rem 1.1rem;
  overflow-y:auto;


}

.nf-onb-marcos-ia-modal.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
}

.nf-onb-marcos-ia-modal-header{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-bottom:1rem;
}

.nf-onb-marcos-ia-modal-header h3{
  font-size:1.03rem;
  margin:0 0 .3rem;
  font-weight:650;
  color:#0f172a;
}

.nf-onb-marcos-ia-modal-body{
  font-size:.87rem;
  line-height:1.6;
  color:#111827;
}

.nf-onb-clone-warning{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  margin-bottom:.6rem;
  padding:.55rem .85rem;
  border-radius:14px;
  background:#fffbeb;
  border:1px solid rgba(245,158,11,.45);
  color:#92400e;
  font-size:.84rem;
}

.nf-onb-clone-warning-icon{
  
  font-size:1.25rem;
  line-height:1;
}

.nf-onb-clone-warning-text{
  margin:0;
  line-height:1.6;
}

.nf-onb-marcos-ia-modal-footer{
  
  padding-top:1rem;
  border-top:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.nf-onb-marcos-ia-modal-checkbox{
  display:flex;
  align-items:flex-start;
  gap:.4rem;
  font-size:.78rem;
  color:#4b5563;
}

.nf-onb-marcos-ia-modal-checkbox input{
  
  width:1rem;
  height:1rem;
  accent-color:#f59e0b;
}

.nf-onb-marcos-ia-modal-primary{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  align-self:stretch;
  width:100%;
  border:none;
  border-radius:999px;
  padding:.68rem 1.3rem;
  font-size:.93rem;
  font-weight:600;
  cursor:pointer;
  background:#f59e0b;
  color:#ffffff;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  transition:background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nf-onb-marcos-ia-modal-primary:hover,
.nf-onb-marcos-ia-modal-primary:focus,
.nf-onb-marcos-ia-modal-primary:active{
  background:#f59e0b;
  color:#ffffff;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}


.nf-onb-marcos-ia-modal-primary:hover{
  background:#fbbf24;
  box-shadow:0 16px 32px rgba(245,158,11,.45);
  transform:translateY(-1px);
}

.nf-onb-marcos-ia-modal-primary:active{
  transform:translateY(0);
  box-shadow:none;
}

.nf-onb-marcos-ia-bottom-note{
  font-size:.75rem;
  color:#9ca3af;
  
}

.nf-onb-marcos-ia-modal-close{
  position:absolute;
  top:1rem;
  right:1.1rem;
  font-size:1.2rem;
  cursor:pointer;
  line-height:1;
  color:#9ca3af;
}
.nf-onb-marcos-ia-modal-close:hover{
  color:#242424;
}


@media (max-width:640px){
  .nf-onb-marcos-ia-modal{
    padding:1.5rem 1.1rem 1.3rem;
    border-radius:18px;
  }

  .nf-onb-marcos-ia-modal-header h3{
    font-size:1.02rem;
  }
}



/* Added classes */
.nf-onb-macro-strip {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}
.nf-onb-actions-row {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}


/* Tooltip visual para valores truncados en NF-Onboarding */
.nf-onb-tooltip{
  position:absolute;
  z-index:9999;
  background:#111827;
  color:#ffffff;
  padding:.35rem .6rem;
  border-radius:.5rem;
  font-size:.75rem;
  line-height:1.35;
  max-width:260px;
  box-shadow:0 10px 25px rgba(15,23,42,0.18);
  pointer-events:none;
  transform:translate(-50%, -100%);
  opacity:0;
  display:none;
  transition:opacity .15s ease-out, transform .15s ease-out;
  white-space:normal;
}
.nf-onb-has-tooltip{
  cursor:help;
}



/* Página de niveles del Club (vista completa) */
.chf-levels-page {
  margin-top: 2rem;
}
.chf-levels-grid {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .chf-levels-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.chf-modal-benefits-level.is-current-level {
  border: 1px solid #F2D7A2;
  box-shadow: 0 0 0 1px rgba(242, 215, 162, 0.35);
}
.chf-modal-level-chip-inline {
  display: inline-flex;
  align-items: center;
  margin-left: .75rem;
}


/* Ajuste específico: badge de nivel en la barra de resumen de niveles */
.chf-resumen-bar .chf-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  height: 32px;
  line-height: 1.2;
  border-radius: 999px;
  box-sizing: border-box;
}



/* ============================
 * Vista de niveles - diseño tipo app móvil minimalista
 * ============================ */

.nf-onb-levels-app {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  color: #111827;
  padding: 24px 16px 48px;
  background: #f5f5f7;
}

.nf-onb-levels-shell {
  max-width: 960px;
  margin: 0 auto;
}

.nf-onb-levels-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}

.nf-onb-levels-header-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nf-onb-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6b7280;
  margin: 0;
}

.nf-onb-title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0;
  color: #050816;
}


.nf-onb-current-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #0f172a;
  color: #f9fafb;
  width: fit-content;
  line-height: 1;
}

.nf-onb-current-chip-label,
.nf-onb-current-chip-name {
  display: block;
  margin: 0;
  line-height: 1.1;
}


.nf-onb-current-chip-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.8;
}

.nf-onb-current-chip-name {
  font-size: 13.6px;
  font-weight: 600;
}

.nf-onb-levels-header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nf-onb-stat-card {
  flex: 1 1 120px;
  min-width: 0;
  padding: 12px 14.4px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nf-onb-stat-card-secondary {
  background: linear-gradient(135deg, #f5f5f7, #ffffff);
}

.nf-onb-stat-label {
  font-size: 11.2px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: #6b7280;
}

.nf-onb-stat-value {
  font-size: 17.6px;
  font-weight: 650;
  color: #111827;
}

.nf-onb-stat-caption {
  font-size: 12.8px;
  color: #4b5563;
}

.nf-onb-levels-list {
  display: flex;
  flex-direction: column;
  gap: 14.4px;
  margin-top: 12px;
}

/* Tarjeta de nivel */

.nf-onb-level-card {
  position: relative;
  border-radius: 20.8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
  padding: 17.6px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.nf-onb-level-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 160ms ease-out;
}

.nf-onb-level-card--current::before {
  border-color: rgba(56, 189, 248, 0.7);
  opacity: 1;
}

.nf-onb-level-card--completed::before {
  border-color: rgba(34, 197, 94, 0.6);
  opacity: 1;
}

.nf-onb-level-card--locked {
  opacity: 0.85;
}

.nf-onb-level-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.nf-onb-level-card-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nf-onb-level-name {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
  color: #020617;
}

.nf-onb-level-range {
  font-size: 12.8px;
  color: #6b7280;
  margin: 0;
}

.nf-onb-level-state-pill {
  flex-shrink: 0;
  padding: 4px 11.2px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: #4b5563;
  background: #f9fafb;
}

.nf-onb-level-card--current .nf-onb-level-state-pill {
  border-color: rgba(56, 189, 248, 0.8);
  background: #ecfeff;
  color: #0e7490;
}

.nf-onb-level-card--completed .nf-onb-level-state-pill {
  border-color: rgba(34, 197, 94, 0.85);
  background: #ecfdf3;
  color: #15803d;
}

/* Progreso */

.nf-onb-level-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nf-onb-level-progress-track {
  flex: 1 1 auto;
  height: 7.2px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.nf-onb-level-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #6366f1);
  transform-origin: left center;
}

.nf-onb-level-progress-value {
  font-size: 12.8px;
  font-variant-numeric: tabular-nums;
  color: #4b5563;
}

/* Beneficios */

.nf-onb-level-benefits {
  margin: 3.2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nf-onb-level-benefit-item {
  font-size: 12.8px;
  color: #374151;
  display: flex;
  align-items: flex-start;
  gap: 6.4px;
}

.nf-onb-level-benefit-item::before {
  content: "•";
  font-size: 12.8px;
  margin-top: 0.8px;
  color: #9ca3af;
}

/* Responsivo */


/* Scoped reset para evitar conflictos con el tema en el bloque de niveles */
.nf-onb-levels-app,
.nf-onb-levels-app * {
  box-sizing: border-box;
}

.nf-onb-levels-app {
  font-size: 16px;
  line-height: 1.4;
}

.nf-onb-levels-app p,
.nf-onb-levels-app ul,
.nf-onb-levels-app li {
  margin-top: 0;
  margin-bottom: 5.6px;
  line-height: 1.4;
}

.nf-onb-current-chip,
.nf-onb-current-chip-label,
.nf-onb-current-chip-value {
  line-height: 1;
}

@media (min-width: 768px) {
  .nf-onb-levels-app {
    padding: 32px 24px 52px;
  }

  .nf-onb-title {
    font-size: 27.2px;
  }

  .nf-onb-levels-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .nf-onb-levels-header-main {
    max-width: 60%;
  }

  .nf-onb-level-card {
    padding: 19.2px 20px;
  }
}




/* Overrides para asegurar que los chips/badges no se deformen con estilos del tema */
.nf-onb-levels-app .nf-onb-current-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #0f172a;
  color: #f9fafb;
  width: auto;
  height: auto;
  max-width: 100%;
  line-height: 1;
  box-sizing: border-box;
  aspect-ratio: auto;
}

.nf-onb-levels-app .nf-onb-level-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: #4b5563;
  background: #f9fafb;
  width: auto;
  height: auto;
  max-width: 100%;
  line-height: 1;
  box-sizing: border-box;
  aspect-ratio: auto;
}

/* Reset total de estilos heredados del tema para chips dentro de la vista de niveles */
.nf-onb-levels-app .nf-onb-current-chip,
.nf-onb-levels-app .nf-onb-level-state-pill {
  all: unset;
}

/* Reconstrucción controlada de los chips después del reset */
.nf-onb-levels-app .nf-onb-current-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #0f172a;
  color: #f9fafb;
  width: auto;
  height: auto;
  max-width: 100%;
  line-height: 1;
  box-sizing: border-box;
}

.nf-onb-levels-app .nf-onb-current-chip-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.8;
}

.nf-onb-levels-app .nf-onb-current-chip-name {
  font-size: 13.6px;
  font-weight: 600;
}

.nf-onb-levels-app .nf-onb-current-chip-value {
  font-size: 12.8px;
}

/* Pill de estado por nivel */
.nf-onb-levels-app .nf-onb-level-state-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: #4b5563;
  background: #f9fafb;
  width: auto;
  height: auto;
  max-width: 100%;
  line-height: 1;
  box-sizing: border-box;
}

/* Estados específicos */
.nf-onb-levels-app .nf-onb-level-card--current .nf-onb-level-state-pill {
  border-color: #0ea5e9;
  background: #e0f2fe;
  color: #0369a1;
}

.nf-onb-levels-app .nf-onb-level-card--completed .nf-onb-level-state-pill {
  border-color: #22c55e;
  background: #dcfce7;
  color: #15803d;
}

.nf-onb-levels-app .nf-onb-level-card--locked .nf-onb-level-state-pill {
  border-color: rgba(148, 163, 184, 0.9);
  background: #f9fafb;
  color: #6b7280;
}

/* ===== PREMIUM APP DESIGN V2 ===== */

.nf-onb-levels-v2 {
  background:#F5F5F7;
  padding:24px;
  max-width:960px;
  margin:0 auto;
  font-family:'Fira Sans', sans-serif;
}

.nfv2-hero { margin-bottom:24px; }
.nfv2-kicker {
  color:#EA9912;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.08em;
  margin:0;
}
.nfv2-title {
  font-size:30px;
  margin:4px 0 0;
  color:#242424;
  font-weight:700;
}

/* Stats */
.nfv2-stats {
  display:flex;
  gap:12px;
  margin-bottom:24px;
}
.nfv2-stat-card {
  flex:1;
  background:#FFFFFF;
  border:1px solid #F2D7A2;
  border-radius:16px;
  padding:16px;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.nfv2-emoji { font-size:20px; display:block; margin-bottom:6px; }
.nfv2-stat-label { font-size:12px; color:#EA9912; margin:0; }
.nfv2-stat-value { font-size:20px; font-weight:700; color:#242424; margin:0; }

/* Levels */
.nfv2-levels { display:flex; flex-direction:column; gap:18px; }

.nfv2-card {
  background:#FFFFFF;
  border-radius:18px;
  padding:20px;
  border:1px solid #F2D7A2;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.nfv2-card-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.nfv2-level-name { margin:0; font-size:18px; font-weight:700; color:#242424; }
.nfv2-level-range { margin:0; font-size:14px; color:#555; }

.nfv2-pill {
  background:#FFF9EA;
  border:1px solid #F2D7A2;
  padding:6px 12px;
  border-radius:16px;
  font-size:12px;
}

/* Progress */
.nfv2-progress {
  margin-top:16px;
  background:#F2D7A2;
  height:8px;
  border-radius:10px;
}
.nfv2-progress-bar {
  width:60%;
  height:100%;
  background:linear-gradient(90deg,#EA9912,#F2D7A2);
  border-radius:10px;
}

/* Benefits */
.nfv2-benefits {
  margin-top:16px;
  padding-left:0;
  list-style:none;
}
.nfv2-benefits li {
  font-size:14px;
  margin-bottom:6px;
  color:#242424;
}