/* ==========================================================================
   WooCommerce — Mi cuenta (body.woocommerce-account)
   Login/registro (sin sesión) y panel del cliente (logged-in), sobre las
   plantillas nativas. Los formularios, tablas y avisos de cada apartado no se
   tocan: solo el layout de Divi y la navegación de la cuenta.

   Scope: WooCommerce agrega `woocommerce-account` al body en la página Mi cuenta
   y en todos sus endpoints (pedidos, direcciones, contraseña perdida…), así que
   nada de esto llega al resto del sitio.

   #main-content en los selectores: Divi estiliza listas con `#left-area ul`
   (1-0-1) y el layout con `.et_pb_gutter.et_pb_gutters2 #left-area` (1-2-0).
   ========================================================================== */

/* ---------- Layout de Divi ----------
   La página usa la plantilla por defecto con barra lateral derecha: Divi deja
   #left-area al 79.125 % con float y padding-right, y dibuja una línea gris
   vertical con `#main-content .container:before`. Se anula todo eso y el
   contenedor pasa a 100 % con el gutter del sitio (en mobile Divi lo dejaba al 80 %). */
body.byc.woocommerce-account #main-content .container {
  width: 100%;
  max-width: calc(1080px + 2 * var(--gutter));
  padding-inline: var(--gutter);
}

body.byc.woocommerce-account #main-content .container::before {
  display: none;
}

body.byc.woocommerce-account #main-content #left-area {
  width: 100%;
  float: none;
  padding-right: 0;
  padding-left: 0;
}

/* La barra lateral de widgets (si hubiera) no aplica en Mi cuenta */
body.byc.woocommerce-account #main-content #sidebar {
  display: none;
}

/* Título de la página ("Mi cuenta", "Pedidos"…) con línea inferior */
body.byc.woocommerce-account #main-content .entry-title.main_title {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}

/* ---------- Login / registro (sin sesión) ----------
   Los dos formularios centrados, en dos columnas iguales. */
body.byc.woocommerce-account:not(.logged-in) #main-content #left-area > article {
  max-width: 960px;
  margin-inline: auto;
}

body.byc.woocommerce-account #main-content #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

/* Clearfix de Woo (display:table): en grid serían celdas vacías */
body.byc.woocommerce-account #main-content #customer_login::before,
body.byc.woocommerce-account #main-content #customer_login::after {
  display: none;
}

body.byc.woocommerce-account #main-content #customer_login > .u-column1,
body.byc.woocommerce-account #main-content #customer_login > .u-column2 {
  width: auto;
  float: none;
}

/* Contraseña perdida / restablecer: mismo ancho que una columna del login */
body.byc.woocommerce-account #main-content form.lost_reset_password {
  max-width: 460px;
}

/* ---------- Panel del cliente (con sesión) ---------- */
body.byc.woocommerce-account.logged-in #main-content .entry-content > .woocommerce {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}

body.byc.woocommerce-account.logged-in #main-content .entry-content > .woocommerce::before,
body.byc.woocommerce-account.logged-in #main-content .entry-content > .woocommerce::after {
  display: none;
}

/* Woo: navegación float 30 % / contenido float 68 % */
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation,
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-content {
  width: auto;
  float: none;
}

/* Lo que no sea navegación ni contenido (avisos sueltos…) va en la columna de contenido */
body.byc.woocommerce-account.logged-in #main-content .entry-content > .woocommerce > :not(.woocommerce-MyAccount-navigation) {
  grid-column: 2;
}

/* ---------- Navegación de la cuenta ----------
   Desktop: columna lateral tipo panel, con icono por ítem, ítem activo con fondo
   crema y barra negra, "Salir" separado al final.
   Iconos con máscaras SVG (mismo trazo que byc_icon()), pintados con currentColor. */
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation {
  position: sticky;
  top: calc(var(--header-height-compact) + 24px);
  border: 1px solid var(--color-line);
}

body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.4;
}

/* Icono por defecto en la lista (se hereda): así el de cada ítem, más abajo, lo
   reemplaza sin pelear por especificidad. */
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation ul {
  --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation li + li {
  border-top: 1px solid var(--color-line);
}

body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 12px 20px 12px 17px;
  border-left: 3px solid transparent;
  color: var(--color-graphite);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation a::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--account-icon) center / contain no-repeat;
  mask: var(--account-icon) center / contain no-repeat;
}

body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation a:hover {
  background: var(--color-media);
  color: var(--color-ink);
}

body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation .is-active a,
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation a[aria-current="page"] {
  border-left-color: var(--color-ink);
  background: var(--color-cream);
  color: var(--color-ink);
  font-weight: 600;
}

/* Salir: separado del resto y en tono de acción destructiva al pasar el mouse */
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  border-top-color: var(--color-line-strong);
}

body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* Iconos por endpoint (los que no están llevan la flecha por defecto) */
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--dashboard {
  --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7'/%3E%3Crect x='13.5' y='3.5' width='7' height='7'/%3E%3Crect x='3.5' y='13.5' width='7' height='7'/%3E%3Crect x='13.5' y='13.5' width='7' height='7'/%3E%3C/svg%3E");
}
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--orders {
  --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 7.5L12 3 3.5 7.5v9L12 21l8.5-4.5z'/%3E%3Cpath d='M3.5 7.5L12 12l8.5-4.5M12 12v9'/%3E%3C/svg%3E");
}
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--downloads {
  --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11M7.5 10l4.5 4.5 4.5-4.5M4 19.5h16'/%3E%3C/svg%3E");
}
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--edit-address {
  --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-11.5a7 7 0 0114 0C19 15 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--payment-methods {
  --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13'/%3E%3Cpath d='M3 10h18M7 14.5h3'/%3E%3C/svg%3E");
}
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--edit-account {
  --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c.8-3.8 3.8-6 7.5-6s6.7 2.2 7.5 6'/%3E%3C/svg%3E");
}
body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--customer-logout {
  --account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4H4.5v16h5M15.5 8l4 4-4 4M19.5 12H9'/%3E%3C/svg%3E");
}

/* ---------- Responsive ---------- */

/* Tablet y mobile: una columna; la navegación pasa a pestañas horizontales con
   scroll (sin JS), el activo subrayado. */
@container site (max-width: 1023px) {
  body.byc.woocommerce-account.logged-in #main-content .entry-content > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  body.byc.woocommerce-account.logged-in #main-content .entry-content > .woocommerce > :not(.woocommerce-MyAccount-navigation) {
    grid-column: 1;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation {
    position: static;
    border: 0;
    border-bottom: 1px solid var(--color-line);
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation li {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation li + li,
  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    border-top: 0;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-left: auto;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation a {
    gap: 8px;
    min-height: 48px;
    padding: 12px 14px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation a::before {
    width: 18px;
    height: 18px;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation a:hover {
    background: transparent;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation .is-active a,
  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation a[aria-current="page"] {
    border-bottom-color: var(--color-ink);
    background: transparent;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: transparent;
  }
}

@container site (max-width: 767px) {
  body.byc.woocommerce-account #main-content .container {
    padding-inline: 20px;
  }

  body.byc.woocommerce-account #main-content .entry-title.main_title {
    margin-bottom: 28px;
    padding-bottom: 16px;
  }

  body.byc.woocommerce-account #main-content #customer_login {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Las pestañas llegan hasta el borde de la pantalla para que se note el scroll */
  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation {
    margin-inline: -20px;
  }

  body.byc.woocommerce-account #main-content .woocommerce-MyAccount-navigation ul {
    padding-inline: 6px;
  }
}