/* ============================================================
   Mi cuenta y sus endpoints (bloque 5D)
   ------------------------------------------------------------
   Viste con los tokens de B3 la pantalla de cuenta de WooCommerce, que es la clásica
   (`[woocommerce_my_account]`). Aquí no se cambia ninguna estructura ni se toca ningún
   formulario: solo tipografía, color, trazo y espacio. El acceso, las contraseñas, los pedidos,
   las direcciones y sus validaciones siguen siendo del plugin.

   Todo cuelga de `.woocommerce-account`, la clase que WooCommerce pone en el <body>.

   Nunca se toca b3.css ni b3-home.css: son la copia literal del prototipo aprobado.
   ============================================================ */

/* ---------- Rejilla: menú lateral y contenido ---------- */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  align-items: start;
}

/*
 * WooCommerce coloca sus dos columnas con `float` y anchos en porcentaje (25 % / 75 %), que en
 * una rejilla dejan los bloques cruzados y estrechos. Se les quita el flotado y se les dice
 * exactamente en qué columna van.
 */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
  grid-column: 1;
  grid-row: 1;
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  grid-column: 2;
  grid-row: 1;
}

/* El acceso y el restablecimiento ocupan el ancho: no hay menú que mostrar todavía. */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: 34rem;
}

/* ---------- Menú de la cuenta ---------- */
.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--b3-line);
}

.woocommerce-MyAccount-navigation-link {
  border-bottom: 1px solid var(--b3-line);
}

.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
  text-decoration: none;
  transition: color 300ms var(--b3-ease);
}

.woocommerce-MyAccount-navigation-link a:hover {
  color: var(--b3-champagne-deep);
}

.woocommerce-MyAccount-navigation-link.is-active a {
  color: var(--b3-ink);
}

/* La página en la que se está, marcada también sin depender del color. */
.woocommerce-MyAccount-navigation-link.is-active {
  border-left: 2px solid var(--b3-champagne-deep);
}

.woocommerce-MyAccount-navigation-link.is-active a {
  padding-left: 0.75rem;
}

/* ---------- Contenido ---------- */
.woocommerce-MyAccount-content {
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-body);
  line-height: 1.7;
  color: var(--b3-ink-muted);
}

.woocommerce-MyAccount-content p {
  margin: 0 0 1rem;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  margin: 0 0 1rem;
  font-family: var(--b3-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--b3-ink);
}

.woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) {
  color: var(--b3-champagne-deep);
}

/* ---------- Tablas: pedidos y descargas ---------- */
.woocommerce-account table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  font-size: var(--b3-fs-small);
}

.woocommerce-account table.shop_table th {
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--b3-line);
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--b3-ink-muted);
}

.woocommerce-account table.shop_table td {
  padding: 1rem 0;
  border-bottom: 1px solid var(--b3-line);
  vertical-align: middle;
  color: var(--b3-ink);
}

.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-number a {
  font-family: var(--b3-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--b3-ink);
  text-decoration: none;
}

.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-number a:hover {
  color: var(--b3-champagne-deep);
}

.woocommerce-account table.shop_table .woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
}

/* ---------- Detalle del pedido ---------- */
.woocommerce-order-details__title,
.woocommerce-column__title {
  margin: 2rem 0 1rem;
  font-family: var(--b3-display);
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--b3-ink);
}

.woocommerce-order-details table.shop_table tfoot th,
.woocommerce-order-details table.shop_table tfoot td {
  border-bottom: 1px solid var(--b3-line);
}

.woocommerce-columns--addresses address {
  font-style: normal;
  line-height: 1.7;
  color: var(--b3-ink-muted);
}

/* ---------- Direcciones ---------- */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.woocommerce-Address {
  width: auto;
  float: none;
  padding: 1.5rem;
  border: 1px solid var(--b3-line);
  background: var(--b3-ivory);
}

.woocommerce-Address address {
  font-style: normal;
  line-height: 1.7;
  color: var(--b3-ink-muted);
}

.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.woocommerce-Address-title .edit {
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b3-champagne-deep);
}

/* ---------- Formularios ---------- */
.woocommerce-account form {
  margin: 0;
}

.woocommerce-account .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 1.25rem;
  padding: 0;
}

.woocommerce-account .form-row label {
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
}

.woocommerce-account :is(input[type='text'], input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea) {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--b3-line);
  border-radius: 0;
  background: var(--b3-white);
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-body);
  color: var(--b3-ink);
}

.woocommerce-account textarea:focus-visible {
  outline: 2px solid var(--b3-focus);
  outline-offset: 3px;
}

.woocommerce-account .required {
  color: #a4181b; /* 5,9:1 sobre blanco */
  text-decoration: none;
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--b3-ink-muted);
}

.woocommerce-account .woocommerce-form__input-checkbox {
  width: auto;
  min-height: 0;
}

.woocommerce-account em,
.woocommerce-account .woocommerce-form-row span em {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--b3-fs-small);
  font-style: normal;
  color: var(--b3-ink-muted);
}

/* ---------- Botones ---------- */
.woocommerce-account :is(.button, .woocommerce-Button, button[type='submit']) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.375rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--b3-ink);
  border-radius: 0;
  background: var(--b3-ink);
  color: var(--b3-white);
  font-family: var(--b3-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 450ms var(--b3-ease), border-color 450ms var(--b3-ease), color 450ms var(--b3-ease);
}

.woocommerce-account :is(.button, .woocommerce-Button, button[type='submit']):hover {
  background: var(--b3-champagne-deep);
  border-color: var(--b3-champagne-deep);
}

/* El botón «View» de la lista de pedidos es secundario. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  background: transparent;
  border-color: var(--b3-champagne-deep);
  color: var(--b3-champagne-deep);
  font-size: var(--b3-fs-label);
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover {
  background: var(--b3-champagne-deep);
  color: var(--b3-white);
}

/* ---------- Avisos ---------- */
.woocommerce-account :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice) {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--b3-line);
  border-left-width: 3px;
  border-radius: 0;
  background: var(--b3-ivory);
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-body);
  color: var(--b3-ink);
  list-style: none;
}

.woocommerce-account .woocommerce-message {
  border-left-color: var(--b3-champagne-deep);
}

.woocommerce-account .woocommerce-error {
  border-left-color: #a4181b;
}

.woocommerce-account .woocommerce-error li {
  margin: 0;
}

/* ---------- Paginación del historial ---------- */
.woocommerce-pagination ul,
.woocommerce-Pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.woocommerce-pagination li {
  border: 0;
}

.woocommerce-pagination :is(a, span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--b3-line);
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-small);
  color: var(--b3-ink);
  text-decoration: none;
}

.woocommerce-pagination .current {
  border-color: var(--b3-champagne-deep);
  background: var(--b3-champagne-deep);
  color: var(--b3-white);
}

/* ---------- Anchos pequeños ---------- */
@media (max-width: 767px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce-account table.shop_table.shop_table_responsive tr {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--b3-line);
  }

  .woocommerce-account table.shop_table.shop_table_responsive td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border: 0;
    text-align: right;
  }

  .woocommerce-account table.shop_table.shop_table_responsive td::before {
    content: attr(data-title);
    font-size: var(--b3-fs-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--b3-ink-muted);
  }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .woocommerce-account :is(.button, .woocommerce-Button, button[type='submit']),
  .woocommerce-MyAccount-navigation-link a {
    transition: none;
  }
}