/* MI CUENTA CHFC — ESTILO OSCURO V0106 */

html,
body{
  background:#080a0f !important;
  color:#f5f5f3 !important;
}

.app-shell--account{
  background:
    radial-gradient(circle at 90% 0, rgba(255,107,0,.10), transparent 22rem),
    linear-gradient(180deg,#0b0e18 0%,#080a0f 100%) !important;
}

.app-topbar{
  background:rgba(10,12,18,.96) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.brand-title{
  color:#f7f6f2 !important;
}

.brand-subtitle{
  color:#8f94a3 !important;
}

.brand-kicker{
  color:#ff6b00 !important;
}

.icon-button{
  background:#11141c !important;
  border:1px solid #2a2d35 !important;
  color:#ff6b00 !important;
}

.account-login-card,
.account-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent),
    #0d1017 !important;

  border:1px solid #2a2d35 !important;
  border-radius:22px !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.account-login-card{
  border-left:4px solid #ff6b00 !important;
}

.section-heading h2,
.account-card h2{
  color:#f7f6f2 !important;
}

.form-intro,
.account-updated{
  color:#969baa !important;
}

label{
  color:#f2f1ee !important;
}

input,
select,
textarea{
  background:#090c12 !important;
  border:1px solid #31343c !important;
  color:#f7f6f2 !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#ff6b00 !important;
  box-shadow:0 0 0 3px rgba(255,107,0,.12) !important;
}

button,
.btn-primary{
  background:#ff6b00 !important;
  color:#08090b !important;
  border:none !important;
}

.btn-secondary{
  background:#11141c !important;
  color:#f3f2ef !important;
  border:1px solid #30333b !important;
}

.tabbar{
  background:rgba(8,10,15,.96) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

.tabbar a{
  color:#7f8491 !important;
}

.tabbar a[aria-current="page"],
.tabbar a.active{
  color:#ff6b00 !important;
}

@media(max-width:900px){

  .account-login-card,
  .account-card{
    border-radius:20px !important;
  }

}

/* =====================================================
   V0107 — MI CUENTA MOBILE · AJUSTE FINO
   ===================================================== */

.account-login-form{
  width:100% !important;
}

/* Los tres campos exactamente iguales */
.account-login-form input,
.account-login-form select,
.account-login-form textarea{
  display:block !important;
  width:100% !important;
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  margin:0 !important;
  padding:0 15px !important;

  border:1px solid #31343c !important;
  border-radius:12px !important;

  background:#090c12 !important;
  color:#f7f6f2 !important;

  font:inherit !important;
  font-size:16px !important;
  line-height:54px !important;

  appearance:none !important;
  -webkit-appearance:none !important;
  box-sizing:border-box !important;
}

/* Botón principal */
.account-login-form button[type="submit"],
.account-login-card .btn-primary{
  width:100% !important;
  min-height:54px !important;
  border-radius:12px !important;
  font-size:16px !important;
  font-weight:800 !important;
  background:#ff6b00 !important;
  color:#08090b !important;
}

/* Labels */
.account-login-form label{
  display:block !important;
  margin:0 0 8px !important;
  color:#f2f1ee !important;
  font-size:14px !important;
  font-weight:750 !important;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media(max-width:900px){

  .account-main{
    padding:
      18px
      14px
      calc(92px + env(safe-area-inset-bottom))
      !important;
  }

  .account-login-card{
    width:100% !important;
    margin:0 auto !important;
    padding:22px 18px 24px !important;

    border:1px solid #2a2d35 !important;
    border-left:4px solid #ff6b00 !important;
    border-radius:20px !important;

    background:
      radial-gradient(
        circle at 100% 0,
        rgba(255,107,0,.055),
        transparent 16rem
      ),
      #0d1017 !important;
  }

  .account-login-card .section-heading h2{
    margin:0 !important;
    font-size:25px !important;
    line-height:1.15 !important;
    letter-spacing:-.025em !important;
  }

  .account-login-card .form-intro{
    margin:12px 0 22px !important;
    font-size:14px !important;
    line-height:1.5 !important;
  }

  .account-login-form{
    display:grid !important;
    gap:16px !important;
  }

  .account-login-form input,
  .account-login-form select,
  .account-login-form textarea{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
    line-height:52px !important;
    border-radius:10px !important;
  }

  .account-login-form button[type="submit"],
  .account-login-card .btn-primary{
    min-height:54px !important;
    margin-top:4px !important;
    border-radius:12px !important;
  }

  /* Barra inferior tipo app */
  .tabbar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:100 !important;

    min-height:66px !important;
    padding-bottom:env(safe-area-inset-bottom) !important;

    background:rgba(8,10,15,.97) !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    -webkit-backdrop-filter:blur(16px) !important;backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
  }

  .tabbar a{
    min-width:0 !important;
    color:#7f8491 !important;
  }

  .tabbar a[aria-current="page"],
  .tabbar a.active{
    color:#ff6b00 !important;
  }

}


/* =====================================================
   V0108 — FIX OTP OCULTO + TABBAR MOBILE
   ===================================================== */

/* Fundamental:
   no permitir que display:grid anule el atributo hidden */
.account-login-form[hidden],
#otp-socio[hidden]{
  display:none !important;
}

/* Solo mostramos el formulario cuando realmente está activo */
.account-login-form:not([hidden]){
  display:grid !important;
}

/* =====================================================
   TABBAR MOBILE — SIEMPRE DENTRO DEL VIEWPORT
   ===================================================== */

@media(max-width:900px){

  .account-main{
    padding-bottom:
      calc(90px + env(safe-area-inset-bottom))
      !important;
  }

  .tabbar{
    position:fixed !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    margin:0 !important;
    transform:none !important;

    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;

    box-sizing:border-box !important;

    padding:
      8px
      4px
      calc(7px + env(safe-area-inset-bottom))
      !important;

    background:#080a0f !important;
    border-top:1px solid rgba(255,255,255,.08) !important;

    z-index:999 !important;
  }

  .tabbar a{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 !important;
    padding:5px 2px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:4px !important;

    text-align:center !important;
    overflow:hidden !important;
  }

  .tabbar a span{
    width:100% !important;
    min-width:0 !important;

    font-size:10px !important;
    line-height:1.1 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

}


/* =====================================================
   V0109 — MI CUENTA · DESKTOP / WEB
   No modifica mobile
   ===================================================== */

@media(min-width:901px){

  html,
  body{
    min-height:100%;
  }

  body{
    padding-bottom:0 !important;
  }

  .app-shell--account{
    min-height:100vh !important;
  }

  /* =========================
     HEADER
     ========================= */

  .app-topbar{
    min-height:96px !important;
    padding:0 38px !important;
  }

  .app-topbar > *{
    max-width:1280px;
  }

  .brand{
    gap:16px !important;
  }

  .brand-logo{
    width:64px !important;
    height:64px !important;
    object-fit:contain !important;
  }

  .brand-kicker{
    font-size:11px !important;
    letter-spacing:.18em !important;
  }

  .brand-title{
    font-size:24px !important;
    line-height:1.05 !important;
  }

  .brand-subtitle{
    margin-top:3px !important;
    font-size:13px !important;
  }

  .icon-button{
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
  }

  /* =========================
     CONTENIDO PRINCIPAL
     ========================= */

  .account-main{
    width:min(100% - 48px, 1280px) !important;
    margin:0 auto !important;
    padding:56px 0 80px !important;
  }

  /* =========================
     LOGIN
     ========================= */

  .account-login-card{
    width:min(100%, 760px) !important;
    margin:0 auto !important;

    padding:42px 46px 46px !important;

    border-radius:26px !important;
    border-left:5px solid #ff6b00 !important;

    background:
      radial-gradient(
        circle at 100% 0,
        rgba(255,107,0,.07),
        transparent 20rem
      ),
      linear-gradient(
        145deg,
        rgba(255,255,255,.018),
        transparent 45%
      ),
      #0d1017 !important;

    box-shadow:
      0 26px 70px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.025)
      !important;
  }

  .account-login-card .section-heading h2{
    margin:0 !important;
    font-size:36px !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
  }

  .account-login-card .form-intro{
    max-width:600px !important;
    margin:16px 0 30px !important;

    font-size:16px !important;
    line-height:1.6 !important;
  }

  .account-login-form{
    gap:20px !important;
  }

  .account-login-form label{
    margin-bottom:9px !important;
    font-size:15px !important;
  }

  .account-login-form input,
  .account-login-form select,
  .account-login-form textarea{
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;

    padding:0 17px !important;

    border-radius:12px !important;

    font-size:16px !important;
    line-height:56px !important;
  }

  .account-login-form button[type="submit"],
  .account-login-card .btn-primary{
    min-height:58px !important;
    margin-top:4px !important;

    border-radius:13px !important;

    font-size:17px !important;
    font-weight:850 !important;

    cursor:pointer !important;

    transition:
      transform .18s ease,
      background .18s ease,
      box-shadow .18s ease
      !important;
  }

  .account-login-form button[type="submit"]:hover,
  .account-login-card .btn-primary:hover{
    background:#ffa326 !important;
    transform:translateY(-1px) !important;
    box-shadow:0 12px 26px rgba(255,107,0,.18) !important;
  }

  .btn-secondary{
    min-height:54px !important;
    border-radius:12px !important;
    cursor:pointer !important;
  }

  /* =========================
     ÁREA LOGUEADA
     ========================= */

  .account-summary{
    max-width:1180px !important;
    margin:0 auto 24px !important;
  }

  .account-grid{
    max-width:1180px !important;
    margin:0 auto !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:22px !important;
  }

  .account-card{
    padding:28px !important;
    border-radius:22px !important;
  }

  .account-card--wide{
    grid-column:1 / -1 !important;
  }

  .account-card h2{
    font-size:24px !important;
  }

  .account-logout{
    display:flex !important;
    width:max-content !important;
    min-width:190px !important;
    margin:32px auto 0 !important;
  }

  /* =========================
     NAVEGACIÓN DESKTOP
     ========================= */

  .tabbar{
    position:static !important;

    width:min(100% - 48px, 760px) !important;
    min-height:auto !important;

    margin:0 auto 42px !important;
    padding:8px !important;

    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;

    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:18px !important;

    background:#0d1017 !important;

    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .tabbar a{
    min-height:58px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:5px !important;
    padding:8px 6px !important;

    border-radius:12px !important;

    transition:
      color .18s ease,
      background .18s ease
      !important;
  }

  .tabbar a:hover{
    color:#ff6b00 !important;
    background:rgba(255,107,0,.06) !important;
  }

  .tabbar a[aria-current="page"],
  .tabbar a.active{
    background:rgba(255,107,0,.08) !important;
    color:#ff6b00 !important;
  }

  .tabbar a span{
    font-size:11px !important;
    white-space:nowrap !important;
  }

}

/* Mantener correctamente oculto el segundo paso */
.account-login-form[hidden],
#otp-socio[hidden]{
  display:none !important;
}


/* =====================================================
   V0110 — FONDO DESKTOP MI CUENTA
   ===================================================== */

@media(min-width:901px){

  html{
    min-height:100%;
    background:#080a0f !important;
  }

  body{
    min-height:100vh !important;
    margin:0 !important;

    background:
      radial-gradient(
        circle at 88% 8%,
        rgba(255,107,0,.09),
        transparent 34rem
      ),
      radial-gradient(
        circle at 15% 45%,
        rgba(40,48,72,.12),
        transparent 38rem
      ),
      linear-gradient(
        180deg,
        #0a0c12 0%,
        #080a0f 55%,
        #07090d 100%
      ) !important;
  }

  /* Eliminar el efecto de "página dentro de una caja" */
  .app-shell,
  .app-shell--account{
    width:100% !important;
    max-width:none !important;
    min-height:100vh !important;

    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;
    background:transparent !important;
  }

  /* Header integrado con el fondo */
  .app-topbar{
    width:100% !important;
    max-width:none !important;

    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;

    border-radius:0 !important;

    background:
      rgba(8,10,15,.82) !important;

    -webkit-backdrop-filter:blur(14px) !important;backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
  }

  /* Quitar el gran rectángulo que rodea al login */
  .account-main{
    background:transparent !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    min-height:calc(100vh - 190px) !important;
  }

  /* La única caja principal será el login */
  .account-login-card{
    position:relative !important;

    background:
      radial-gradient(
        circle at 100% 0,
        rgba(255,107,0,.07),
        transparent 20rem
      ),
      linear-gradient(
        145deg,
        rgba(255,255,255,.018),
        transparent 50%
      ),
      #0d1017 !important;

    box-shadow:
      0 28px 80px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.025)
      !important;
  }

}


/* =====================================================
   V0111 — FONDO DESKTOP IGUAL AL MOBILE
   ===================================================== */

@media(min-width:901px){

  html{
    background:#080a0f !important;
  }

  body{
    min-height:100vh !important;
    background:
      radial-gradient(
        circle at 90% 0,
        rgba(255,107,0,.10),
        transparent 22rem
      ),
      linear-gradient(
        180deg,
        #0b0e18 0%,
        #080a0f 100%
      ) !important;
  }

  .app-shell,
  .app-shell--account{
    min-height:100vh !important;

    background:
      radial-gradient(
        circle at 90% 0,
        rgba(255,107,0,.10),
        transparent 22rem
      ),
      linear-gradient(
        180deg,
        #0b0e18 0%,
        #080a0f 100%
      ) !important;
  }

  .account-main{
    background:transparent !important;
  }

}