/* ============================================================================
   PATA AMARILLA — my-account.css
   Estiliza el contenido nativo de WooCommerce en /mi-cuenta/ (login,
   registro, panel, pedidos, datos de cuenta) con el mismo lenguaje
   negro/ambar del resto del sitio. El HTML lo genera WooCommerce via
   [woocommerce_my_account]; aca solo se sobreescribe su apariencia.
   ============================================================================ */

.pa-account-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 24px 100px;
}

/* Titulos que WooCommerce inyecta ("Iniciar sesion", "Registro", etc.) */
.pa-account-wrap h2 {
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-card-title-lg);
  font-weight: 900;
  color: var(--pa-negro);
  margin: 0 0 20px;
}

/* ── Mensajes de WooCommerce (errores, avisos, exito) ───────────── */
.pa-account-wrap .woocommerce-error,
.pa-account-wrap .woocommerce-message,
.pa-account-wrap .woocommerce-info {
  list-style: none;
  margin: 0 0 28px;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: var(--pa-font-body-sm);
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.pa-account-wrap .woocommerce-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.pa-account-wrap .woocommerce-message,
.pa-account-wrap .woocommerce-info {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.pa-account-wrap .woocommerce-message::before,
.pa-account-wrap .woocommerce-info::before,
.pa-account-wrap .woocommerce-error::before {
  content: none !important;
  display: none !important;
}
.pa-account-wrap .woocommerce-message .button,
.pa-account-wrap .woocommerce-info .button {
  margin-left: auto;
  background: var(--pa-negro);
  color: var(--pa-amarillo);
  padding: 8px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--pa-font-meta);
}

/* ── Login + Registro (visitante no logueado) ─────────────────
   WooCommerce trae su propio sistema viejo de columnas basado en
   "float" (.col2-set .col-1 { float:left } etc.), con la misma
   especificidad (2 clases) que una regla plana nuestra tendria — por
   eso competian. La solucion correcta es que nuestro selector describa
   la cadena real del DOM (padre + hijo), lo que le da mas especificidad
   de forma natural y gana sin necesitar !important. */
.pa-account-wrap .u-columns.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
/* Clave del arreglo: WooCommerce agrega ::before/::after invisibles
   para su "clearfix" de float. Al convertir el contenedor en grid, esos
   dos elementos generados TAMBIEN cuentan como celdas de la grilla (4
   items en vez de 2), corriendo las tarjetas reales a una posicion
   equivocada. Hay que eliminarlos para que la grilla solo vea las 2
   tarjetas reales. */
.pa-account-wrap .u-columns.col2-set::before,
.pa-account-wrap .u-columns.col2-set::after {
  content: none;
  display: none;
}
.pa-account-wrap .u-columns.col2-set .u-column1,
.pa-account-wrap .u-columns.col2-set .u-column2 {
  float: none;
  width: auto;
  margin: 0;
  background: var(--pa-blanco);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.pa-account-wrap .u-columns.col2-set .u-column2 {
  background: var(--pa-negro);
  border-color: var(--pa-negro);
}
.pa-account-wrap .u-column2 h2 { color: var(--pa-blanco); }
.pa-account-wrap .u-column2 label { color: rgba(255,255,255,.75); }

/* Campos de formulario (login, registro, datos de cuenta, direcciones) */
.pa-account-wrap .form-row { margin: 0 0 16px; }
.pa-account-wrap label {
  display: block;
  font-size: var(--pa-font-body-sm);
  font-weight: 700;
  letter-spacing: .02em;
  color: #4b5563;
  margin-bottom: 6px;
}
.pa-account-wrap label .required { color: #dc2626; text-decoration: none; }
.pa-account-wrap input.input-text,
.pa-account-wrap input[type="text"],
.pa-account-wrap input[type="email"],
.pa-account-wrap input[type="password"],
.pa-account-wrap input[type="tel"],
.pa-account-wrap select,
.pa-account-wrap textarea {
  width: 100%;
  padding: 11px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: var(--pa-font-body-sm);
  font-family: var(--pa-font-cuerpo);
  background: var(--pa-blanco);
  color: var(--pa-negro);
  box-sizing: border-box;
  transition: border-color .2s ease;
}
.pa-account-wrap .u-column2 input.input-text,
.pa-account-wrap .u-column2 select {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
  color: var(--pa-blanco);
}
.pa-account-wrap input:focus,
.pa-account-wrap select:focus,
.pa-account-wrap textarea:focus {
  outline: none;
  border-color: var(--pa-amarillo);
}

/* ── Boton "mostrar/ocultar contrasena" ─────────────────────
   Es real, lo agrega el propio WooCommerce (woocommerce.min.js envuelve
   el input en <span class="password-input"> y le mete un <button
   class="show-password-input"> vacio al lado). No trae icono propio;
   se lo damos aca con un SVG de ojo en ambar, igual en las dos tarjetas.
   ────────────────────────────────────────────────────────────────── */
.pa-account-wrap .password-input {
  position: relative;
  display: block;
}
.pa-account-wrap .password-input input {
  padding-right: 44px;
}
.pa-account-wrap .show-password-input {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.pa-account-wrap .show-password-input::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  margin: 6px auto;
  background-color: var(--pa-amarillo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pa-account-wrap .show-password-input.display-password::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a21.7 21.7 0 0 1-2.34 3.44M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E") center / contain no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a21.6 21.6 0 0 1 5.06-6.06M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a21.7 21.7 0 0 1-2.34 3.44M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Checkbox "Recuerdame" */
.pa-account-wrap .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pa-font-body-sm);
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
}
.pa-account-wrap .woocommerce-form__input-checkbox { width: 16px; height: 16px; accent-color: var(--pa-amarillo); }
.pa-account-wrap .woocommerce-form-login__rememberme { display: flex; align-items: center; margin-bottom: 16px; }

/* Botones de todos los formularios (login, registro, cuenta, direcciones).
   Se incluye ".woocommerce" en la cadena de selectores porque el CSS
   nativo de WooCommerce apunta a ".woocommerce .button" (ancestro real
   del DOM) con esa misma especificidad — igualarla con la cadena real
   evita tener que forzar con !important. */
.pa-account-wrap .woocommerce button:not(.show-password-input),
.pa-account-wrap .woocommerce input[type="submit"],
.pa-account-wrap .woocommerce .woocommerce-Button,
.pa-account-wrap .woocommerce .button:not(.show-password-input) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pa-negro);
  color: var(--pa-amarillo);
  border: none;
  padding: 13px 28px;
  border-radius: 8px;
  font-size: var(--pa-font-button);
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pa-account-wrap .woocommerce button:not(.show-password-input):hover,
.pa-account-wrap .woocommerce input[type="submit"]:hover,
.pa-account-wrap .woocommerce .woocommerce-Button:hover,
.pa-account-wrap .woocommerce .button:not(.show-password-input):hover {
  background: #1a1a1a;
  color: var(--pa-amarillo);
  opacity: 1;
}
.pa-account-wrap .u-column2 button,
.pa-account-wrap .u-column2 input[type="submit"] {
  background: var(--pa-amarillo);
  color: var(--pa-negro);
}
.pa-account-wrap .u-column2 button:hover,
.pa-account-wrap .u-column2 input[type="submit"]:hover {
  background: var(--pa-blanco);
  color: var(--pa-negro);
}

.pa-account-wrap .woocommerce-LostPassword {
  margin-top: 16px;
  font-size: var(--pa-font-body-sm);
}
.pa-account-phone-hint {
  display: block;
  font-size: var(--pa-font-meta);
  color: #9ca3af;
  margin-top: 6px;
  font-weight: 400;
}
.pa-account-wrap .woocommerce-LostPassword a {
  color: #6b7280;
  text-decoration: underline;
}
.pa-account-wrap .u-column2 .woocommerce-price-suffix,
.pa-account-wrap .u-column2 p {
  color: rgba(255,255,255,.6);
  font-size: var(--pa-font-body-sm);
}

/* ── Panel logueado: navegacion lateral + contenido ────────────── */
.pa-account-wrap.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
}
.woocommerce-MyAccount-navigation {
  background: var(--pa-negro);
  border-radius: 16px;
  padding: 10px;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  color: rgba(255,255,255,.7);
  font-size: var(--pa-font-body-sm);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
  color: var(--pa-amarillo);
  background: rgba(255,255,255,.06);
}
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--pa-amarillo);
  color: var(--pa-negro);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #f87171;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: rgba(248,113,113,.12);
}

.woocommerce-MyAccount-content {
  background: var(--pa-blanco);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px;
  font-size: var(--pa-font-body-sm);
  line-height: 1.7;
  color: #374151;
}
.woocommerce-MyAccount-content a { color: var(--pa-negro); font-weight: 700; text-decoration: underline; }
.woocommerce-MyAccount-content mark { background: none; color: var(--pa-negro); font-weight: 800; }

/* ── Tabla de pedidos ───────────────────────────────────────── */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pa-font-body-sm);
}
.woocommerce-orders-table thead th {
  text-align: left;
  font-size: var(--pa-font-micro);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 0 12px 12px;
  border-bottom: 2px solid #f3f4f6;
}
.woocommerce-orders-table tbody td {
  padding: 16px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: var(--pa-negro);
}
.woocommerce-orders-table .button {
  padding: 8px 16px;
  font-size: var(--pa-font-micro);
}
.order-status { font-weight: 700; }

/* Direcciones de facturacion/envio */
.woocommerce-Address {
  background: #f9fafb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.woocommerce-Address-title h3 {
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-card-title);
  margin: 0;
}
.woocommerce-Address-title .edit {
  font-size: var(--pa-font-meta);
  font-weight: 700;
  color: var(--pa-negro);
}
.u-columns.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ── Movil ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pa-account-wrap { padding: 40px 18px 64px; }
  .pa-account-wrap .u-columns.col2-set { grid-template-columns: 1fr; gap: 20px; }
  .pa-account-wrap .u-columns.col2-set .u-column1,
  .pa-account-wrap .u-columns.col2-set .u-column2 { padding: 24px 20px; }
  .pa-account-wrap.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 20px; }
  .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .woocommerce-MyAccount-navigation li { flex: 1 1 auto; }
  .woocommerce-MyAccount-navigation li a { text-align: center; padding: 10px 8px; font-size: var(--pa-font-meta); }
  .woocommerce-MyAccount-content { padding: 22px 18px; }
  .u-columns.woocommerce-Addresses { grid-template-columns: 1fr; }
  .woocommerce-orders-table,
  .woocommerce-orders-table thead,
  .woocommerce-orders-table tbody,
  .woocommerce-orders-table tr,
  .woocommerce-orders-table td { display: block; width: 100%; }
  .woocommerce-orders-table thead { display: none; }
  .woocommerce-orders-table tr { margin-bottom: 16px; border: 1px solid #f3f4f6; border-radius: 12px; padding: 12px; }
  .woocommerce-orders-table td { border-bottom: none; padding: 6px 4px; }
  .woocommerce-orders-table td::before {
    content: attr(data-title) ": ";
    font-weight: 800;
    color: #9ca3af;
    margin-right: 6px;
  }
}

/* ── Pestana "Mi Suscripcion" ─────────────────────────────── */
.pa-sub-empty {
  text-align: center;
  padding: 20px 10px;
}
.pa-sub-empty h3 {
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-card-title-lg);
  font-weight: 900;
  color: var(--pa-negro);
  margin: 0 0 12px;
}
.pa-sub-empty p {
  font-size: var(--pa-font-body-sm);
  color: #6b7280;
  max-width: 460px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.pa-sub-empty p a { color: var(--pa-negro); font-weight: 700; }
.pa-sub-cta {
  display: inline-flex;
  background: var(--pa-negro);
  color: var(--pa-amarillo);
  font-weight: 800;
  font-size: var(--pa-font-button);
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none;
}
.pa-sub-cta:hover { background: var(--pa-amarillo); color: var(--pa-negro); }

.pa-sub-card {
  background: var(--pa-amarillo);
  background-image: radial-gradient(rgba(0,0,0,.06) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  border-radius: 16px;
  padding: 28px 26px;
}
.pa-sub-plan {
  display: block;
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-card-title-lg);
  font-weight: 900;
  color: var(--pa-negro);
  margin-bottom: 12px;
}
.pa-sub-status {
  display: inline-flex;
  font-size: var(--pa-font-meta);
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid;
  margin-bottom: 16px;
}
.pa-sub-updated {
  font-size: var(--pa-font-meta);
  color: rgba(17,17,17,.6);
  margin: 0 0 18px;
}
.pa-sub-note {
  font-size: var(--pa-font-body-sm);
  color: rgba(17,17,17,.75);
  line-height: 1.6;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.1);
}
.pa-sub-note a { color: var(--pa-negro); font-weight: 800; text-decoration: underline; }