/* ============================================================
   ROCAVERDE · MI CUENTA
   Alinea /mi-cuenta/ (login, registro, escritorio, pedidos,
   direcciones, detalles de cuenta) al lenguaje del rediseño.
   Usa los tokens globales de tokens.css (--rv-*), igual que
   cart-checkout.css, porque esta vista no lleva el wrapper .rv-page.
   ============================================================ */

/* ---- Título de página (serif) ---- */
.woocommerce-account .entry-title,
.woocommerce-account h1.entry-title {
  font-family: var(--rv-font-serif);
  font-weight: 600;
  color: var(--rv-ink);
}
.woocommerce-account .woocommerce {
  font-family: var(--rv-font-ui);
  color: var(--rv-ink-2);
}

/* ---- Layout general: nav lateral + contenido en tarjeta ---- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: 240px;
  margin: 0 28px 0 0;
}
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  overflow: visible;
}
.woocommerce-account .woocommerce {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}
@media (max-width: 780px) {
  .woocommerce-account .woocommerce { display: block; }
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; margin: 0 0 20px; }
}

/* ---- Nav lateral (Escritorio / Pedidos / Descargas / Direcciones / ...) ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 6px;
  background: #fff;
  border: 1px solid var(--rv-border-3);
  border-radius: var(--rv-radius-card);
  box-shadow: 0 8px 22px rgba(27,58,45,.05);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border: none; margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px; font-weight: 600;
  color: var(--rv-ink-2);
  text-decoration: none;
  transition: .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--rv-cream);
  color: var(--rv-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--rv-green-700);
  color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--rv-terracota);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: rgba(194,94,58,.08);
}

/* ---- Tarjeta de contenido (escritorio, pedidos, direcciones, formularios) ---- */
.woocommerce-account .woocommerce-MyAccount-content > p,
.woocommerce-account .woocommerce-MyAccount-content > form,
.woocommerce-account .woocommerce-MyAccount-content > table,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
  background: #fff;
  border: 1px solid var(--rv-border-3);
  border-radius: var(--rv-radius-card);
  padding: 26px 28px;
  box-shadow: 0 8px 22px rgba(27,58,45,.05);
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--rv-green-700); font-weight: 600; text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover { color: var(--rv-ink); }

/* ---- Login / Registro (2 columnas) ----
   OJO: en el HTML de WooCommerce el <h2> ("Acceder"/"Registrarse") es
   HERMANO del <form>, no está dentro (ambos hijos de .u-column1/.u-column2).
   La tarjeta (borde/fondo/padding) va en la COLUMNA para envolver ambos;
   si se pone solo en el <form>, el <h2> queda afuera, sin estilo, y en
   móvil (columnas apiladas) se ve como texto suelto flotando entre tarjetas. */
.woocommerce-account .u-columns.col2-set { display: flex; gap: 28px; flex-wrap: wrap; align-items: stretch; }
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
  flex: 1 1 320px;
  background: #fff;
  border: 1px solid var(--rv-border-3);
  border-radius: var(--rv-radius-card);
  padding: 30px 28px;
  box-shadow: 0 8px 22px rgba(27,58,45,.05);
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: none; border: none; padding: 0; box-shadow: none; height: auto;
}
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
  font-family: var(--rv-font-serif);
  color: var(--rv-green-700);
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 18px;
}

/* ---- Campos: inputs, labels ---- */
.woocommerce-account form .form-row label { font-size: 13px; font-weight: 600; color: var(--rv-ink-2); }
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row input[type="password"],
.woocommerce-account form .form-row input[type="email"],
.woocommerce-account form .form-row input[type="text"],
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row select {
  border: 1px solid var(--rv-border-3) !important;
  border-radius: var(--rv-radius-input, 12px) !important;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--rv-font-ui);
  color: var(--rv-ink);
  background: #fff;
  box-shadow: none;
  line-height: 1.35;
  width: 100%;
}
.woocommerce-account form .form-row input:focus,
.woocommerce-account form .form-row textarea:focus,
.woocommerce-account form .form-row select:focus {
  border-color: var(--rv-green-500) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(46,107,79,.12);
}
.woocommerce-account .required, .woocommerce-account abbr.required { color: var(--rv-terracota); border: none; text-decoration: none; }
.woocommerce-account input[type="checkbox"] { accent-color: var(--rv-green-700); }

/* ---- Botones ámbar (coherentes con toda la tienda) ---- */
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button:not(.show-password-input),
.woocommerce-account input.button {
  background: var(--rv-amber) !important;
  color: var(--rv-ink) !important;
  border: none !important;
  border-radius: var(--rv-radius-pill, 999px) !important;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 13px;
  padding: 13px 26px !important;
  transition: .15s;
}
.woocommerce-account .woocommerce-form-login .button:hover,
.woocommerce-account .woocommerce-form-register .button:hover,
.woocommerce-account button.button:not(.show-password-input):hover,
.woocommerce-account input.button:hover {
  background: var(--rv-amber-hover) !important;
}
/* El botón "Mostrar contraseña" es el ícono de ojo nativo de WooCommerce,
   no un botón del diseño — se deja con su estilo original (transparente). */
.woocommerce-account .show-password-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 10px !important;
  text-transform: none;
  box-shadow: none !important;
}
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .lost_password a { color: var(--rv-green-700); font-size: 13px; }

/* ---- Tabla de pedidos ---- */
.woocommerce-account table.woocommerce-orders-table {
  border: none; border-collapse: separate; border-spacing: 0 8px; width: 100%;
}
.woocommerce-account table.woocommerce-orders-table thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--rv-muted); font-weight: 700; border: none; padding: 0 14px 6px;
}
.woocommerce-account table.woocommerce-orders-table tbody tr {
  background: var(--rv-bg);
}
.woocommerce-account table.woocommerce-orders-table tbody td {
  border: none; padding: 14px; font-size: 14px; color: var(--rv-ink);
}
.woocommerce-account table.woocommerce-orders-table tbody td:first-child { border-radius: 12px 0 0 12px; }
.woocommerce-account table.woocommerce-orders-table tbody td:last-child { border-radius: 0 12px 12px 0; }
.woocommerce-account .woocommerce-orders-table__cell-order-status {
  font-weight: 600;
}

/* ---- Direcciones ---- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses { display: flex; gap: 20px; flex-wrap: wrap; padding: 0; background: none; border: none; box-shadow: none; }
.woocommerce-account .woocommerce-Address {
  flex: 1 1 280px;
  background: #fff;
  border: 1px solid var(--rv-border-3);
  border-radius: var(--rv-radius-card);
  padding: 22px 24px;
}
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { font-family: var(--rv-font-serif); color: var(--rv-green-700); font-size: 19px; margin: 0; }
.woocommerce-account .woocommerce-Address-title a { font-size: 12.5px; }
.woocommerce-account address { font-style: normal; line-height: 1.7; color: var(--rv-ink-2); }

/* ---- Detalle de un pedido (single order) ---- */
.woocommerce-account .woocommerce-order-details h2,
.woocommerce-account .woocommerce-customer-details h2 {
  font-family: var(--rv-font-serif); color: var(--rv-green-700); font-size: 21px; margin-top: 0;
}
.woocommerce-account table.shop_table { border: none; width: 100%; }
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td { border: none; border-bottom: 1px solid var(--rv-border); padding: 10px 6px; font-size: 14px; }
.woocommerce-account table.shop_table tfoot th,
.woocommerce-account table.shop_table tfoot td { font-weight: 700; }

/* ---- Avisos (confirmar email, etc.) ---- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  border-top-color: var(--rv-green-500) !important;
  background: var(--rv-cream);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13.5px;
}
.woocommerce-account .woocommerce-error { border-top-color: var(--rv-terracota) !important; }

@media (max-width: 480px) {
  .woocommerce-account .u-column1,
  .woocommerce-account .u-column2,
  .woocommerce-account .woocommerce-MyAccount-content > p,
  .woocommerce-account .woocommerce-MyAccount-content > form,
  .woocommerce-account .woocommerce-Address { padding: 20px; }
}