.elementor-kit-66{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-75eb54a:#3C1413;--e-global-color-95ad035:#D41213;--e-global-color-7256c18:#CFA55B;--e-global-color-795aa86:#171D34;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-66 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================
   ZYRAX — My Account (WooCommerce + Elementor)
   Pegar en: Elementor → Site Settings → Custom CSS
   o en Apariencia → Personalizar → CSS adicional
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  --zx-navy:#13284b;
  --zx-navy-dark:#0a1730;
  --zx-black:#0b1628;
  --zx-gray:#f4f5f7;
  --zx-gray-2:#e6e8ec;
  --zx-text:#1a1a1a;
  --zx-muted:#6b7280;
  --zx-radius:16px;
  --zx-shadow:0 8px 30px rgba(11,22,40,.08);
}

/* ---------- Tipografía global de la página ---------- */
.woocommerce-account,
.woocommerce-account *{
  font-family:'Montserrat',sans-serif;
}
.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-account h3,
.woocommerce-account h4,
.woocommerce-account legend{
  font-family:'Playfair Display',serif !important;
  letter-spacing:.2px;
  color:var(--zx-black);
}

/* ---------- Contenedor general ---------- */
.woocommerce-account .woocommerce{
  max-width:1200px;
  margin:40px auto;
  padding:0 24px;
}

/* ============================================
   HERO DE BIENVENIDA
   Se arma con un widget Heading/HTML de Elementor
   con clase personalizada .zyrax-hero
   ============================================ */
.zyrax-hero{
  position:relative;
  background:linear-gradient(135deg,var(--zx-black) 0%, #13284b 55%, #1e3a6b 140%);
  color:#fff;
  border-radius:24px;
  padding:44px 48px;
  overflow:hidden;
  box-shadow:var(--zx-shadow);
  margin-bottom:36px;
}
.zyrax-hero::before{
  content:"";position:absolute;right:-80px;top:-80px;width:360px;height:360px;
  background:radial-gradient(circle,#2d5aa0 0%,transparent 65%);
  opacity:.55;filter:blur(10px);
}
.zyrax-hero h1{
  font-size:52px;color:#fff !important;margin:8px 0 10px;font-weight:700;line-height:1.1;
}
.zyrax-hero h1 span{color:#6b9bd8;font-style:italic}
.zyrax-hero .zx-kicker{
  font-family:'Montserrat',sans-serif;
  font-size:14px;letter-spacing:3px;text-transform:uppercase;
  color:#9ab8e6;font-weight:500;
}
.zyrax-hero p{color:#d1d3d8;max-width:560px;font-size:15px;line-height:1.6}

/* ============================================
   NAVEGACIÓN (tabs como pills)
   .woocommerce-MyAccount-navigation = <ul> lateral
   Lo convertimos en barra horizontal tipo pills.
   ============================================ */
.woocommerce-account .woocommerce-MyAccount-navigation{
  width:100% !important;
  float:none !important;
  margin-bottom:24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  display:flex;gap:10px;flex-wrap:wrap;
  list-style:none;padding:0;margin:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li{
  margin:0;padding:0;border:none;background:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--zx-gray-2);
  padding:14px 22px;border-radius:999px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;
  color:var(--zx-text);text-decoration:none;
  transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.03);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
  border-color:var(--zx-navy);color:var(--zx-navy);transform:translateY(-2px);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{
  background:var(--zx-black);color:#fff;border-color:var(--zx-black);
}

/* Ocultar tabs que NO queremos: dashboard y downloads */
.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard,
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads{
  display:none !important;
}
/* Logout lo sacamos del menú (lo ponemos como botón en el hero) */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout{
  display:none !important;
}

/* ---------- Botón Cerrar Sesión (dentro del hero) ---------- */
.zyrax-logout{
  position:absolute;top:40px;right:48px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  background:#ffffff12;color:#fff !important;
  border:1px solid #ffffff30;
  padding:12px 22px;border-radius:999px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;
  text-decoration:none;backdrop-filter:blur(8px);transition:.25s;
}
.zyrax-logout:hover{
  background:var(--zx-navy);border-color:var(--zx-navy);transform:translateY(-2px);
}

/* ============================================
   CONTENIDO PRINCIPAL (cards)
   .woocommerce-MyAccount-content = contenedor derecho
   ============================================ */
.woocommerce-account .woocommerce-MyAccount-content{
  width:100% !important;
  float:none !important;
  background:#fff;
  border-radius:var(--zx-radius);
  padding:32px;
  box-shadow:var(--zx-shadow);
  border:1px solid var(--zx-gray-2);
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3{
  font-size:22px;margin:0 0 18px;
  display:flex;align-items:center;gap:10px;
}
.woocommerce-account .woocommerce-MyAccount-content h2::before,
.woocommerce-account .woocommerce-MyAccount-content h3::before{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--zx-navy);
}

/* ============================================
   TABLA DE PEDIDOS (Orders)
   ============================================ */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table{
  border:none !important;border-collapse:separate;border-spacing:0 10px;
}
.woocommerce-account .woocommerce-orders-table thead{display:none}
.woocommerce-account .woocommerce-orders-table tbody tr{
  background:var(--zx-gray);border-radius:12px;
  transition:.25s;
}
.woocommerce-account .woocommerce-orders-table tbody tr:hover{
  background:#fff;
  box-shadow:0 6px 20px rgba(19,40,75,.1);
  transform:translateX(4px);
}
.woocommerce-account .woocommerce-orders-table tbody td{
  border:none !important;padding:18px 16px !important;
  font-size:14px;vertical-align:middle;
}
.woocommerce-account .woocommerce-orders-table tbody td:first-child{border-radius:12px 0 0 12px}
.woocommerce-account .woocommerce-orders-table tbody td:last-child{border-radius:0 12px 12px 0}
.woocommerce-account .woocommerce-orders-table__cell-order-number a{
  color:var(--zx-black);font-weight:700;text-decoration:none;
}
.woocommerce-account .woocommerce-orders-table__cell-order-total{
  font-weight:800;color:var(--zx-black);
}

/* Badges de estado */
.woocommerce-account .woocommerce-orders-table__cell-order-status{
  display:inline-block;padding:6px 14px;border-radius:999px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  background:#dbeafe;color:#1e40af;
}
.woocommerce-account tr.order-completed .woocommerce-orders-table__cell-order-status{
  background:#d1fadf;color:#027a48;
}
.woocommerce-account tr.order-processing .woocommerce-orders-table__cell-order-status{
  background:#fef3c7;color:#92400e;
}

/* Botones de acción (View, Pay, Cancel) */
.woocommerce-account .woocommerce-button,
.woocommerce-account .button{
  background:var(--zx-navy) !important;color:#fff !important;
  border:none !important;padding:10px 20px !important;
  border-radius:999px !important;
  font-family:'Montserrat',sans-serif !important;
  font-weight:600 !important;font-size:13px !important;
  text-transform:uppercase;letter-spacing:.5px;
  box-shadow:0 4px 14px rgba(19,40,75,.25);
  transition:.25s;
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .button:hover{
  background:var(--zx-navy-dark) !important;transform:translateY(-2px);
}

/* ============================================
   DIRECCIONES (Addresses) — FIX 2 columnas
   ============================================ */
.woocommerce-account .u-columns,
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .addresses{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:20px !important;
  float:none !important;
  width:100% !important;
  margin:20px 0 0 !important;
}
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after{
  display:none !important;
  content:none !important;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col-1,
.woocommerce-account .col-2{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  padding:0 !important;
  margin:0 !important;
}
.woocommerce-account .woocommerce-Address{
  width:100% !important;
  float:none !important;
  margin:0 !important;
  height:100%;
  padding:22px;
  border-radius:12px;
  border:2px dashed var(--zx-gray-2);
  background:#fff;
  transition:.25s;
}
.woocommerce-account .woocommerce-Address:hover{
  border-color:var(--zx-navy);
  border-style:solid;
  background:#f5f8ff;
}
.woocommerce-account .woocommerce-Address-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.woocommerce-account .woocommerce-Address-title h3{
  margin:0 !important;
  font-size:13px !important;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--zx-muted) !important;
  font-family:'Montserrat',sans-serif !important;
  font-weight:700 !important;
}
.woocommerce-account .woocommerce-Address-title h3::before{
  display:none !important;
}
.woocommerce-account .woocommerce-Address-title .edit{
  background:var(--zx-black);
  color:#fff !important;
  font-size:11px;
  padding:6px 14px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}
.woocommerce-account address{
  font-style:normal;
  font-size:14px;
  line-height:1.7;
  color:var(--zx-text);
  margin:0;
}
@media(max-width:700px){
  .woocommerce-account .u-columns,
  .woocommerce-account .woocommerce-Addresses,
  .woocommerce-account .addresses{
    grid-template-columns:1fr !important;
  }
}
/* ============================================
   DETALLES DE CUENTA (Account Details form)
   ============================================ */
.woocommerce-account .woocommerce-EditAccountForm fieldset{
  border:1px solid var(--zx-gray-2);border-radius:12px;
  padding:22px;margin-top:24px;
}
.woocommerce-account .woocommerce-EditAccountForm legend{
  font-size:16px;padding:0 12px;
}
.woocommerce-account .form-row label{
  display:block;font-family:'Montserrat',sans-serif;
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--zx-muted);margin-bottom:6px;
}
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row input[type="text"],
.woocommerce-account .form-row input[type="email"],
.woocommerce-account .form-row input[type="password"],
.woocommerce-account .form-row input[type="tel"]{
  width:100%;padding:13px 16px;
  border:1px solid var(--zx-gray-2) !important;
  border-radius:10px;font-size:14px;
  font-family:'Montserrat',sans-serif;
  background:var(--zx-gray);transition:.2s;
}
.woocommerce-account .form-row input.input-text:focus{
  outline:none;border-color:var(--zx-navy) !important;
  background:#fff;
  box-shadow:0 0 0 3px rgba(19,40,75,.12);
}

/* Botón guardar */
.woocommerce-account button[type="submit"],
.woocommerce-account .woocommerce-Button{
  background:var(--zx-navy) !important;color:#fff !important;
  border:none !important;padding:16px 36px !important;
  border-radius:999px !important;
  font-family:'Montserrat',sans-serif !important;
  font-weight:700 !important;font-size:14px !important;
  text-transform:uppercase;letter-spacing:1px;
  box-shadow:0 6px 20px rgba(19,40,75,.35);
  cursor:pointer;transition:.25s;margin-top:12px;
}
.woocommerce-account button[type="submit"]:hover{
  background:var(--zx-navy-dark) !important;transform:translateY(-2px);
}

/* ============================================
   MENSAJES / NOTICES de Woo
   ============================================ */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error{
  border-radius:12px !important;
  border-left:4px solid var(--zx-navy) !important;
  background:#f5f8ff !important;
  font-family:'Montserrat',sans-serif;
  padding:16px 22px !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:768px){
  .zyrax-hero{padding:32px 24px}
  .zyrax-hero h1{font-size:34px}
  .zyrax-logout{top:24px;right:24px;padding:8px 16px;font-size:12px}
  .woocommerce-account .woocommerce-MyAccount-content{padding:22px}
}/* End custom CSS */