/* =========================================================
   MY ACCOUNT – NUTRIBIÓTICA
   Estructura:
   0) Utilidades / contenedor
   1) Layout general (2 columnas)
   2) Sidebar (navegación)
   3) Tabs de estados (píldoras con scroll)
   4) Cards de pedidos
   5) Bloques “cards” (dashboard rápido)
   6) Drawer móvil (off-canvas)
   7) Libreta de direcciones (cards)
   9) Media queries (ordenadas de mayor → menor)
   ========================================================= */

/* =============== 0) UTILIDADES / CONTENEDOR =============== */
.nutri-account { max-width: 1100px; margin: 0 auto; }
.na-header { margin-bottom: 14px; }
.na-title { font-size: 28px; margin: 0 0 4px; letter-spacing: .2px; }
.na-subtitle .muted { opacity: .7; }

/* =============== 1) LAYOUT GENERAL (2 COLUMNAS) =============== */
.cuenta-layout{
  --gap: 24px;
  --sidebar-w: 280px;
  display: grid;
  grid-template-columns: minmax(0, var(--sidebar-w)) 1fr;
  align-items: start;
  gap: var(--gap);
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.cuenta-col--nav{ position: sticky; top: 24px; height: fit-content; }
.cuenta-col--content{ min-width: 0; }

/* =============== 2) SIDEBAR (NAVEGACIÓN) =============== */
.cuenta-sidebar {
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  max-width: 260px;
  font-family: system-ui, sans-serif;
}
.cuenta-sidebar__header { margin-bottom: 16px; }
.cuenta-sidebar__title { color: #555; font-size: 20px; font-weight: 700; margin: 0; }
.cuenta-sidebar__user { font-size: 14px; color: #555; margin-top: 4px; }
.cuenta-sidebar__user .email { opacity: .7; }

.cuenta-sidebar__toggle{
  display:none; width:100%; margin-top:8px;
  border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; font-weight:600; cursor:pointer;
}

/* lista de navegación (desktop y mobile comparten estilos base) */
.cuenta-sidebar__menu{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}

.cuenta-item a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; padding: 10px 12px;
  border-radius: 12px; color: #222;
  transition: background .2s, color .2s;
}
.cuenta-item .icon {
  display: grid; place-items: center;
  font-size: 18px; width: 32px; height: 32px;
  border-radius: 10px; background: #f3f4f6; color: #0061ff;
}
.cuenta-item.activo, .cuenta-item:hover { background: #eef3ff; color: #0061ff; }
.cuenta-item.activo .icon { background: #0061ff; color: #fff; }

/* separación antes de “Salir” */
.cuenta-item:nth-last-child(2){
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 10px; padding-bottom: 10px;
}

/* =============== 3) TABS DE ESTADOS (PÍLDORAS CON SCROLL) =============== */
.na-tabs{
  display:block; margin: 16px 0 12px;
  overflow-x:auto; -webkit-overflow-scrolling: touch;
  white-space: nowrap; padding-bottom:6px;
  scrollbar-width: none; scroll-snap-type:x mandatory;
}
.na-panels strong, .na-panels p {
	color: black;
}
.na-tabs::-webkit-scrollbar{ display:none; }
.na-tabs::before, .na-tabs::after{
  content:""; position:absolute; top:0; bottom:0; width:16px; pointer-events:none;
}
.na-tabs::before{ left:0;  background: linear-gradient(90deg, rgba(0,0,0,.08), transparent); }
.na-tabs::after { right:0; background: linear-gradient(270deg, rgba(0,0,0,.08), transparent); }

.na-tab{
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; margin-right:8px; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.08); background:#f7f7f9; color:#111;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  transition:.18s ease; font-weight:600; scroll-snap-align:start;
}
.na-tab.is-active{ background:#e9eefc; border-color:#cfd8ff; color:#0b57d0; }
.na-panel { display:block; }
.na-panel:not(.is-active) { display:none; }

/* =============== 4) CARDS DE PEDIDOS =============== */
.nutri-order-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px; background:#fff;
  padding:14px; margin-bottom:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.noc-head{
  display:flex; flex-wrap:wrap; gap:8px;
  align-items:center; justify-content:space-between; margin-bottom:10px;
}
.noc-head__title{ font-size:16px; }
.noc-head__title .muted{ opacity:.7; font-weight:500; margin-left:6px; }
.noc-head__action{ text-decoration:none; font-weight:600; white-space:nowrap; }

.noc-meta{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px; padding:10px 0;
  border-top:1px dashed rgba(0,0,0,.12);
  border-bottom:1px dashed rgba(0,0,0,.12);
  margin-bottom:10px;
}
.noc-meta .k { color:#666; margin-right:6px; }

.status { font-weight:700; }
.status--processing { color:#0a7; }
.status--on-hold   { color:#a70; }
.status--pending   { color:#777; }
.status--completed { color:#2a6; }
.status--failed    { color:#c33; }
.status--cancelled { color:#999; }

.noc-items{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.noc-item{ display:flex; gap:10px; align-items:flex-start; }
.noc-thumb img{ width:64px; height:64px; object-fit:cover; border-radius:10px; }
.noc-item__title{ font-weight:600; line-height:1.2; margin-bottom:4px; }
.noc-item__meta{ font-size:.9rem; opacity:.85; display:flex; flex-wrap:wrap; gap:8px; }
.woocommerce .nutri-empty { color:black; opacity:.7; padding:10px; }

/* =============== 5) BLOQUES “CARDS” (DASHBOARD RÁPIDO) =============== */
.myaccount-nav--cards { margin: 24px 0; }
.myaccount-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; list-style:none; padding:0; margin:0; }
.myaccount-card{ border:1px solid rgba(125,125,125,.22); border-radius:16px; background:rgba(255,255,255,.04); transition:.2s ease; }
.myaccount-card.is-current{ outline:2px solid rgba(58,182,166,.65); }
.myaccount-card__link{ display:flex; gap:10px; align-items:center; padding:14px 16px; text-decoration:none; color:inherit; }
.myaccount-card:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.myaccount-card__icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:rgba(58,182,166,.12); }
.myaccount-card__label{ font-weight:600; }
.myaccount-dashboard h2{ margin-bottom:14px; }
.myaccount-quickgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0 24px; }
.quickcard{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:14px; text-decoration:none; border:1px solid rgba(125,125,125,.22); background:rgba(255,255,255,.04); transition:.2s ease; color:inherit; }
.quickcard:hover{ transform: translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.qicon{ width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:rgba(58,182,166,.12); }

/* =============== 6) DRAWER MÓVIL (OFF-CANVAS) =============== */
/* === Parche anti-floats legacy de Woo en My Account === */
.cuenta-layout .woocommerce-MyAccount-content,
.cuenta-layout .woocommerce-MyAccount-navigation{
  float: none !important;
  width: auto !important;
  clear: none !important;
  display: block !important;
}

/* Asegura nuestro grid padre (por si algún CSS externo lo pisa) */
.cuenta-layout{
  display: grid !important;
}

/* ====== Address cards (encabezado de la página / 2 columnas) ====== */
/* Woo a veces marca el contenedor como .woocommerce-Addresses o como .addresses-grid */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content .addresses-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  align-items: start;
}

/* Card de cada bloque (facturación / envío) */
.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-Addresses,.addresses-grid) .woocommerce-Address{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:#fff;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.woocommerce-Addresses .woocommerce-Address {
	border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
}
.woocommerce .woocommerce-Addresses .woocommerce-Address-title a {
	text-decoration: none;
    font-weight: 600;
    border: 1px solid #cfd8ff;
    background: #e9eefc;
    color: #0b57d0;
    padding: 8px 12px;
    border-radius: 10px;
    transition: .18s ease;
}
.address_book {
	border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
    margin-top: 20px;
}
.woocommerce div.wc-address-book-add-new-address a, .wc-address-book-address a {
	text-decoration: none;
    font-weight: 600;
    border: 1px solid #cfd8ff;
    background: #e9eefc;
    color: #0b57d0;
    padding: 8px 12px;
    border-radius: 10px;
    transition: .18s ease;
    margin-bottom: 12px;
}
.woocommerce .address_book header {
	border-bottom: 0px;
}

/* Cabecera + botón editar */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title :is(h2,h3){
  font-size:22px; margin:0;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit{
  text-decoration:none; font-weight:600;
  border:1px solid #cfd8ff; background:#e9eefc; color:#0b57d0;
  padding:8px 12px; border-radius:10px; transition:.18s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit:hover{
  filter:brightness(0.97);
}

/* Texto de dirección */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address{
  margin:0; line-height:1.5; color:#222;
}

/* Ocultar botón de facturación (solo el de la tarjeta superior) */
.woocommerce-account .woocommerce-MyAccount-content
  :is(.woocommerce-Addresses,.addresses-grid)
  .woocommerce-Address--billing .woocommerce-Address-title a.edit{
  display:none !important;
}

/* Responsive */
@media (max-width:900px){
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
  .woocommerce-account .woocommerce-MyAccount-content .addresses-grid{
    grid-template-columns: 1fr;
  }
}




/* =========================================================
   9) MEDIA QUERIES (mayor → menor)
   ========================================================= */

/* ≥1025px (ESCRITORIO): lista visible, toggle oculto */
@media (min-width:1025px){
  .cuenta-drawer{ display:none !important; }
  .cuenta-sidebar__menu--desktop{ display:block !important; }
  .noc-meta{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ≤1024px (TABLET/MÓVIL): layout 1 col, drawer activo y tabs compactas */
@media (max-width:1024px){
  .cuenta-layout{ grid-template-columns: 1fr; gap: 16px; padding: 16px 12px 40px; }
  .cuenta-col--nav{ position: static; }
  .cuenta-sidebar{ max-width: 100%; }
  .cuenta-sidebar__toggle{ display:block; }

  /* Oculta lista de desktop y usa la del drawer */
  .cuenta-sidebar__menu--desktop{ display:none !important; }
  .cuenta-sidebar__menu--mobile{ display:block; }

  /* Drawer */
  .cuenta-drawer{ position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
  .cuenta-drawer::before{ content:""; position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .25s ease; }
  .cuenta-drawer__panel{
    position: absolute; left: 0; top: 0; height: 100%;
    width: min(75vw, 340px); background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    transform: translateX(-100%); transition: transform .28s ease;
    display: flex; flex-direction: column; padding: 14px 14px 18px;
    border-top-right-radius: 12px; border-bottom-right-radius: 12px;
  }
  .cuenta-drawer__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .cuenta-drawer__title{ font-size: 18px; margin: 0; }
  .cuenta-drawer__close{ appearance:none; border:0; background:#f3f4f6; border-radius:10px; width:36px; height:36px; cursor:pointer; font-size:18px; line-height:36px; }
  .cuenta-drawer .cuenta-sidebar__menu{ overflow:auto; max-height:100%; }
  .cuenta-drawer.is-open{ pointer-events: auto; }
  .cuenta-drawer.is-open::before{ opacity: 1; }
  .cuenta-drawer.is-open .cuenta-drawer__panel{ transform: translateX(0); }

  /* Tabs y cards compactas */
  .na-tab{ padding: 8px 12px; border-radius: 10px; }
  .nutri-order-card{ padding: 14px; }
  .noc-items{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Address grid 1 col en móvil */
  .woocommerce-account .woocommerce-MyAccount-content .addresses-grid{
    grid-template-columns: 1fr;
  }
}

/* ≤800px: grid de items del pedido */
@media (max-width:800px){
  .noc-items{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ≤768px: cards del dashboard */
@media (max-width:768px){
  .myaccount-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ≤640px: tipografías y títulos */
@media (max-width:640px){
  .na-title{ font-size: 22px; }
  .cuenta-sidebar__title{ font-size: 18px; }
  .noc-items{ grid-template-columns: 1fr; }
}

/* ≤480px: meta del pedido a una columna */
@media (max-width:480px){
  .noc-meta{ grid-template-columns: 1fr; }
}

/* ≤420px: fallback */
@media (max-width:420px){
  .noc-items{ grid-template-columns: 1fr; }
}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce){
  .na-tab, .nutri-order-card { transition: none !important; }
}