/* account-woo.css — el área «Mi cuenta» de WooCommerce con la línea de la casa.
   Son pantallas de terceros (pedidos, direcciones, métodos de pago, suscripciones) que salían con el
   estilo por defecto: lista de viñetas a un lado y tablas desnudas al otro. Aquí se les da la misma
   estética que a la pantalla de Suscripción (subscription.css): tarjetas blancas, bordes #E9EEF5,
   azul #2563EB y tipografías Montserrat/Inter. */

.woocommerce-account .hp-page,
.woocommerce-account .page-content{ max-width:1180px; margin:0 auto; }

/* Dos columnas: menú a la izquierda, contenido a la derecha.
   Las posiciones se dan por ÁREAS NOMBRADAS, no por el orden de los hijos: WooCommerce y sus
   extensiones meten elementos sueltos dentro de este contenedor (el envoltorio de avisos, y aquí
   también el enlace de vuelta), y con la colocación automática cada uno se comía una celda y
   descolocaba el menú a la segunda columna. Así cada pieza cae donde debe salga donde salga. */
.woocommerce-account .woocommerce{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  grid-template-areas:
    "avisos avisos"
    "menu   contenido"
    "volver contenido";
  gap:14px 28px;
  align-items:start;
  align-content:start;
}
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper   { grid-area:avisos; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{ grid-area:menu; }
.woocommerce-account .woocommerce > .ctop-woo-volver               { grid-area:volver; }
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-area:contenido; }

/* WooCommerce maqueta esta pantalla con floats en su propio CSS:
     .woocommerce-account .woocommerce-MyAccount-navigation { float:left; width:30%; }
     .woocommerce-account .woocommerce-MyAccount-content    { float:right; width:68%; }
   El `float` lo ignora un contenedor grid, pero el ANCHO no: ese 30% se aplicaba sobre la columna de
   250px y dejaba el menú en unos 75px, con los textos partidos y saliéndose de la tarjeta. Las
   columnas ya las define el grid, así que aquí los anchos se devuelven a `auto`. */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content{
  float:none; width:auto; min-width:0; box-sizing:border-box;
}

/* ---------- Navegación lateral ---------- */
.woocommerce-MyAccount-navigation{
  background:#fff; border:1px solid #E9EEF5; border-radius:16px; padding:10px; position:sticky; top:100px;
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation li{ margin:0; }
.woocommerce-MyAccount-navigation li a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px;
  font:600 14.5px/1.35 Inter,sans-serif; color:#334155; text-decoration:none;
  transition:background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li a:hover{ background:#F1F5F9; color:#0F172A; }
.woocommerce-MyAccount-navigation li.is-active a{ background:#EFF6FF; color:#2563EB; }

/* Iconos por sección. FA5 («Font Awesome 5 Free», weight 900): los nombres de FA6 no renderizan. */
.woocommerce-MyAccount-navigation li a::before{
  font-family:"Font Awesome 5 Free"; font-weight:900; font-size:14px; width:18px; text-align:center;
  color:#94A3B8; flex:0 0 auto;
}
.woocommerce-MyAccount-navigation li.is-active a::before{ color:#2563EB; }
.woocommerce-MyAccount-navigation-link--dashboard a::before        { content:"\f0e4"; }
.woocommerce-MyAccount-navigation-link--orders a::before           { content:"\f291"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before     { content:"\f3c5"; }
.woocommerce-MyAccount-navigation-link--payment-methods a::before  { content:"\f09d"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before     { content:"\f013"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before  { content:"\f2f5"; }
/* El gestor de suscripciones nombra sus endpoints con guion BAJO (`wps_subscriptions`), no con
   guion medio como los de WooCommerce: sin esto sus dos entradas se quedaban sin icono. */
.woocommerce-MyAccount-navigation-link--wps_subscriptions a::before,
.woocommerce-MyAccount-navigation-link--subscriptions a::before    { content:"\f021"; }
.woocommerce-MyAccount-navigation-link--wps_memberships a::before,
.woocommerce-MyAccount-navigation-link--memberships a::before      { content:"\f2bb"; }
.woocommerce-MyAccount-navigation-link--customer-logout a{ color:#B91C1C; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before{ color:#B91C1C; }

/* Vuelta al área de anunciante (lo pinta
includes/billing/account-woo.php). */
.ctop-woo-volver{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-radius:10px; border:1px dashed #CBD5E1; background:#fff;
  font:600 13.5px Inter,sans-serif; color:#2563EB; text-decoration:none;
}
.ctop-woo-volver:hover{ background:#F8FAFC; border-color:#94A3B8; }

/* ---------- Contenido ---------- */
.woocommerce-MyAccount-content{
  background:#fff; border:1px solid #E9EEF5; border-radius:16px; padding:26px 28px; min-width:0;
}
.woocommerce-MyAccount-content p{ font:500 14.5px/1.65 Inter,sans-serif; color:#334155; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend{
  margin:0 0 14px; font:800 17px/1.3 Montserrat,sans-serif; color:#0F172A;
}

/* ---------- Tablas ---------- */
.woocommerce-MyAccount-content table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid #E9EEF5; border-radius:14px; overflow:hidden; margin-bottom:20px;
}
.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td{
  padding:14px 16px; text-align:left; border-bottom:1px solid #F1F5F9;
  font:500 14.5px Inter,sans-serif; color:#0F172A; vertical-align:middle;
}
.woocommerce-MyAccount-content table th{
  background:#F8FAFC; font:700 12px Inter,sans-serif; color:#64748B;
  letter-spacing:.04em; text-transform:uppercase;
}
.woocommerce-MyAccount-content table tr:last-child td{ border-bottom:0; }

/* ---------- Botones ---------- */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:11px 22px; border-radius:999px; border:1px solid #2563EB;
  background:#2563EB; color:#fff !important; text-decoration:none;
  font:700 14px Inter,sans-serif; line-height:1.2; transition:background .15s, border-color .15s;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover{
  background:#1D4ED8; border-color:#1D4ED8; color:#fff !important;
}
/* Acciones destructivas de las tablas (Borrar una tarjeta, cancelar): rojas y secundarias. */
.woocommerce-MyAccount-content .button.delete,
.woocommerce-MyAccount-content a.delete{
  background:#fff; color:#B91C1C !important; border-color:#FECACA;
}
.woocommerce-MyAccount-content .button.delete:hover,
.woocommerce-MyAccount-content a.delete:hover{ background:#FEF2F2; border-color:#FCA5A5; }

/* ---------- Formularios ---------- */
.woocommerce-MyAccount-content .form-row{ margin-bottom:16px; }
.woocommerce-MyAccount-content label{
  display:block; margin-bottom:6px; font:600 13.5px Inter,sans-serif; color:#334155;
}
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea{
  width:100%; padding:11px 14px; border:1px solid #D8E0EC; border-radius:10px;
  font:500 14.5px Inter,sans-serif; color:#0F172A; background:#fff;
}
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus{
  outline:none; border-color:#2563EB; box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* ---------- Avisos ---------- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error{
  border-radius:12px; padding:14px 18px; margin-bottom:20px; border:1px solid;
  font:600 14.5px/1.5 Inter,sans-serif; list-style:none;
}
.woocommerce-account .woocommerce-message{ background:#F0FDF4; border-color:#BBF7D0; color:#14532D; }
.woocommerce-account .woocommerce-info   { background:#EFF6FF; border-color:#BFDBFE; color:#1E3A8A; }
.woocommerce-account .woocommerce-error  { background:#FEF2F2; border-color:#FECACA; color:#7F1D1D; }

/* ---------- Móvil ---------- */
@media (max-width:900px){
  .woocommerce-account .woocommerce{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"avisos" "menu" "contenido" "volver";   /* la vuelta, al final del todo */
    gap:16px;
  }
  .woocommerce-MyAccount-navigation{ position:static; }
  .woocommerce-MyAccount-navigation ul{ display:flex; flex-wrap:wrap; gap:6px; }
  .woocommerce-MyAccount-navigation li a{ padding:9px 13px; font-size:13.5px; }
  .woocommerce-MyAccount-content{ padding:20px 18px; }
  /* Las tablas se apilan: sin esto obligan a hacer scroll horizontal. */
  .woocommerce-MyAccount-content table,
  .woocommerce-MyAccount-content table tbody,
  .woocommerce-MyAccount-content table tr,
  .woocommerce-MyAccount-content table td{ display:block; width:100%; }
  .woocommerce-MyAccount-content table thead{ display:none; }
  .woocommerce-MyAccount-content table tr{ border-bottom:1px solid #F1F5F9; padding:6px 0; }
  .woocommerce-MyAccount-content table tr:last-child{ border-bottom:0; }
  .woocommerce-MyAccount-content table td{ border-bottom:0; padding:7px 14px; }
  .woocommerce-MyAccount-content table td::before{
    content:attr(data-title); display:block; margin-bottom:3px;
    font:700 11.5px Inter,sans-serif; color:#64748B; text-transform:uppercase; letter-spacing:.04em;
  }
}