/* ============================================================
   MI CUENTA (WooCommerce) - login, registro, panel de pedidos,
   direcciones, datos de la cuenta. Se carga solo en is_account_page()
   (ver inc/enqueue.php). Solo estilo visual: la funcionalidad (formularios,
   pedidos, sesion) sigue siendo 100% de WooCommerce, sin tocar PHP.
   ============================================================ */

/* Capa "transaccional" clara - mismos valores exactos que ya usa
   checkout.css para Carrito/Checkout (":root[data-theme='light']" de
   base.css). Antes esta pagina tomaba su tema claro/oscuro indirectamente
   de brand.css (que hasta el 2026-08-06 tambien cubria esta pagina "por
   error" dentro del grupo de "toda la tienda") - al sacar Cuenta de ese
   grupo (el cliente aclaro que Cuenta debe ser SIEMPRE clara, igual que
   Carrito/Checkout, nunca la paleta oscura de catalogo), hace falta esta
   misma variante clara aqui tambien, de lo contrario esta pagina se
   quedaba con el oscuro por defecto de base.css. */
  body.woocommerce-account{
    --bg:#ffffff;
    --bg-raised:#ffffff;
    --bg-raised-2:#eceff0;
    --ink:#1b160e;
    --ink-muted:#5d5340;
    --line:rgba(23,20,13,0.14);
    /* Pedido del cliente 2026-08-23: "más profesional... así como
       estamos trabajando" - mismo criterio ya aplicado a Carrito/Envio/
       Checkout (nada de dorado/naranja en la parte de compra/cuenta).
       Se redefinen los 3 tonos de "--gold*" SOLO para esta pagina - todo
       lo que ya los usa mas abajo en este archivo (links activos,
       encabezados de tabla, botones, etc.) cambia junto, sin tocar el
       valor global (usado en Home/Categoria, que no se toca). */
    --gold:#1b160e;
    --gold-bright:#3a3a3a;
    --gold-dim:#8b8370;
  }
  /* Fondo real - mismo patron ya usado en Carrito/Checkout: la variable
     "--bg" sola no alcanzaba a pintar el fondo real (algo mas lo
     pisaba), asi que se fuerza tambien la propiedad "background"
     directamente. */
  body.woocommerce-account,
  body.woocommerce-account #content,
  body.woocommerce-account .container,
  body.woocommerce-account .site-content{background:#ffffff !important;}

/* Precios (tabla de pedidos, detalle de pedido) - mismo bug de Woodmart
   ya encontrado varias veces (color global amarillo/dorado para
   ".woocommerce-Price-amount") - se fuerza aqui tambien de una vez, en
   vez de esperar a que se reporte. */
  body.woocommerce-account .woocommerce-Price-amount,
  body.woocommerce-account .amount{color:var(--ink) !important;}

/* Contenedor general */
  .woocommerce-account .woocommerce{
    max-width:1080px;margin:0 auto;padding:64px 28px 90px;
  }
  .woocommerce-account h1.entry-title,
  .woocommerce-account .page-title{
    font-family:'Anton';font-size:clamp(32px,4vw,44px);color:var(--ink);
    text-align:center;padding:56px 0 0;margin:0;
  }

/* Login / Registro (Woodmart envuelve esto en .wd-registration-page) */
  .wd-registration-page{background:none;}
  .wd-grid-f-col{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:var(--bg-raised);}
  .wd-col{padding:44px 40px;}
  .wd-col.col-login{border-right:1px solid var(--line);}
  .wd-login-title{
    font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--gold);margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--line);
  }

/* Formularios WooCommerce (login, registro, direcciones, datos de cuenta) */
  .woocommerce-form-row,.woocommerce form .form-row{margin-bottom:18px;}
  .woocommerce form label{
    display:block;font-family:'Oswald';font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-muted);margin-bottom:8px;
  }
  .woocommerce form label .required{color:var(--gold);text-decoration:none;}
  .woocommerce form .input-text,
  .woocommerce form input[type="text"],
  .woocommerce form input[type="email"],
  .woocommerce form input[type="password"],
  .woocommerce form input[type="tel"],
  .woocommerce form select,
  .woocommerce form textarea{
    width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
    padding:13px 16px;font-family:'Barlow';font-size:14.5px;transition:border-color .15s;
  }
  .woocommerce form .input-text:focus,
  .woocommerce form input:focus,
  .woocommerce form select:focus,
  .woocommerce form textarea:focus{outline:none;border-color:var(--gold-dim);}
  .woocommerce form .select2-container .select2-selection--single{
    background:var(--bg);border:1px solid var(--line);height:46px;display:flex;align-items:center;padding:0 16px;
  }
  .woocommerce form .select2-container .select2-selection__rendered{color:var(--ink);}
  /* Woodmart trae un "::-webkit-input-placeholder{color:var(--wd-form-placeholder-color)}"
     global pensado para fondo blanco, sin competencia hasta ahora - se
     sobreescribe aqui para que el texto de ayuda de los campos (email,
     contrasena, etc.) se lea sobre el fondo oscuro. */
  .woocommerce form input::placeholder,
  .woocommerce form textarea::placeholder{color:var(--ink-muted) !important;opacity:1 !important;}
  .woocommerce form input::-webkit-input-placeholder,
  .woocommerce form textarea::-webkit-input-placeholder{color:var(--ink-muted) !important;opacity:1 !important;}
  .woocommerce form input::-moz-placeholder,
  .woocommerce form textarea::-moz-placeholder{color:var(--ink-muted) !important;opacity:1 !important;}
  .woocommerce form input:-ms-input-placeholder,
  .woocommerce form textarea:-ms-input-placeholder{color:var(--ink-muted) !important;}
  .password-input{position:relative;display:block;}
  /* Confirmado en vivo el 2026-08-23: Woodmart trae su propio
     ".show-password-input{top:0}" que le ganaba a nuestro "top:50%" - el
     ojito quedaba flotando arriba del campo en vez de centrado adentro. */
  .show-password-input{position:absolute;right:14px;top:50% !important;transform:translateY(-50%);}
  .woocommerce-form__label-for-checkbox{color:var(--ink-muted);font-size:13px;display:flex;align-items:center;gap:8px;text-transform:none;}
  .woocommerce-LostPassword{display:block;color:var(--ink-muted);font-size:13px;margin-bottom:14px;}
  .woocommerce-LostPassword:hover{color:var(--gold);}

/* Botones (login, registro, guardar direccion, guardar cuenta...) -
   confirmado en vivo el 2026-08-23: el texto quedaba con un color oscuro
   fijo ("#1b1305") pensado para un fondo dorado CLARO - al redefinir
   "--gold" mas arriba a un tono oscuro (parte del cambio a negro/gris
   pedido el mismo dia), el boton quedo con texto oscuro sobre fondo
   oscuro, practicamente invisible ("Guardar cambios", el boton de
   "no hay pedidos todavia", etc.). Texto blanco fijo en su lugar. */
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce a.button,
  .woocommerce #respond input#submit{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--ink);color:#ffffff;border:1px solid var(--ink);border-radius:4px;
    font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
    padding:14px 28px;cursor:pointer;transition:background .15s,color .15s;
  }
  .woocommerce button.button:hover,
  .woocommerce input.button:hover,
  .woocommerce a.button:hover{background:transparent;color:var(--ink);}

/* Panel logueado: navegacion + contenido - pedido del cliente el
   2026-08-06: lista vertical tipo sidebar (un item debajo del otro),
   en vez de la grilla que envolvia en filas desparejas. WooCommerce
   imprime ".woocommerce-MyAccount-navigation" y ".woocommerce-MyAccount-content"
   como hermanos directos dentro de ".woocommerce-account .woocommerce"
   (estructura estandar de WooCommerce, sin cambios de plantilla de este
   tema) - eso permite armar el layout de sidebar+contenido en pantallas
   grandes con puro CSS (flexbox en el padre comun), sin tocar PHP. En
   celular se queda como una sola columna apilada (nav arriba, contenido
   abajo), no un sidebar angosto sin espacio para el texto. */
  @media (min-width:701px){
    .woocommerce-account .woocommerce{display:flex;align-items:flex-start;gap:32px;}
    .woocommerce-MyAccount-navigation{flex:0 0 220px;}
    .woocommerce-MyAccount-content{flex:1;min-width:0;}
  }
  .woocommerce-MyAccount-navigation{margin-bottom:40px;}
  .woocommerce-MyAccount-navigation ul{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);}
  .woocommerce-MyAccount-navigation li{border-right:none;border-bottom:1px solid var(--line);}
  .woocommerce-MyAccount-navigation li:last-child{border-bottom:none;}
  .woocommerce-MyAccount-navigation li a{
    display:block;padding:16px 22px;font-family:'Oswald';font-weight:500;font-size:12.5px;
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);
  }
  .woocommerce-MyAccount-navigation li.is-active a,
  .woocommerce-MyAccount-navigation li a:hover{color:var(--gold);background:var(--bg-raised);}
  .woocommerce-MyAccount-content > p{color:var(--ink-muted);font-size:14.5px;line-height:1.7;}
  .woocommerce-MyAccount-content mark{background:none;color:var(--gold);font-weight:600;}

/* Tabla de pedidos - mismo lenguaje visual que .size-table */
  .woocommerce-orders-table{width:100%;border-collapse:collapse;border:1px solid var(--line);}
  .woocommerce-orders-table thead{display:none;}
  .woocommerce-orders-table tbody tr{border-bottom:1px solid var(--line);}
  .woocommerce-orders-table tbody tr:last-child{border-bottom:none;}
  .woocommerce-orders-table td{padding:16px 20px;color:var(--ink-muted);font-size:13.5px;}
  .woocommerce-orders-table td::before{
    content:attr(data-title) ": ";font-family:'Oswald';font-weight:600;font-size:10.5px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--gold);display:block;margin-bottom:4px;
  }
  .woocommerce-orders-table__cell-order-number a{color:var(--ink);font-weight:600;}
  /* Pedido del cliente 2026-08-23: "que no sea muy redonda" (heredaba la
     forma de pildora de Woodmart, sin radio propio) y mejor acomodados -
     un solo radio chico en vez de capsula, en fila con espacio parejo
     entre "Ver"/"Factura" en vez de quedar pegados o desalineados. */
  .woocommerce-orders-table__cell-order-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
  .woocommerce-orders-table__cell-order-actions .button{padding:9px 16px;font-size:11px;border-radius:4px;}

/* Detalle de un pedido */
  .woocommerce-order-details,.woocommerce-customer-details{margin-bottom:36px;}
  .woocommerce-order-details__title,
  .woocommerce-column__title{
    font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--gold);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);
  }
  table.woocommerce-table--order-details{width:100%;border-collapse:collapse;border:1px solid var(--line);}
  table.woocommerce-table--order-details th,
  table.woocommerce-table--order-details td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink-muted);font-size:13.5px;}
  table.woocommerce-table--order-details thead th{
    font-family:'Oswald';font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);background:var(--bg-raised);
  }
  table.woocommerce-table--order-details tfoot th,
  table.woocommerce-table--order-details tfoot td{color:var(--ink);font-weight:600;}

/* Direcciones - reportado como "todo negro, ni se lee" (2026-08-23). No
   pude confirmarlo en vivo (no tengo como iniciar sesion) - reforzado
   con !important por si Woodmart trae su propio fondo/color para esta
   tarjeta (mismo patron ya visto varias veces en el proyecto), pero
   pendiente de que el cliente confirme si esto lo resuelve del todo. */
  .woocommerce-Addresses{display:flex;gap:24px;flex-wrap:wrap;}
  .woocommerce-Address{flex:1 1 260px;border:1px solid var(--line);padding:24px;background:var(--bg-raised) !important;}
  .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;background:none !important;}
  .woocommerce-Address-title h3{font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink) !important;margin:0;}
  .woocommerce-Address-title a{color:var(--ink) !important;}
  .woocommerce-Address address{color:var(--ink-muted) !important;font-size:13.5px;line-height:1.7;font-style:normal;}

/* Avisos (mensajes de exito/error de WooCommerce) - Woodmart trae su
   propio color de fondo para estos avisos (variable --notices-warning-bg,
   un dorado/khaki claro) que le ganaba en especificidad al nuestro -
   mismo patron ya visto varias veces (botones, etc.), se fuerza con
   !important para que se vea oscuro y consistente con el resto del sitio
   en vez de la caja clara que chocaba con el tema. */
  .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
    list-style:none;border:1px solid var(--gold-dim) !important;background:var(--bg-raised) !important;color:var(--ink) !important;
    padding:16px 20px;font-size:13.5px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  }
  .woocommerce-error{border-color:#b4463f !important;}

/* Selector de avatar (registro) - grilla de circulos seleccionables,
   sin depender de JS (son radio inputs nativos, ocultos visualmente,
   el estilo del circulo reacciona a :checked por CSS puro). */
  .tf-avatar-picker{margin:22px 0 6px;}
  .tf-avatar-picker-label{
    font-family:'Oswald';font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-muted);margin-bottom:12px;
  }
  .tf-avatar-grid{display:flex;flex-wrap:wrap;gap:12px;}
  .tf-avatar-option{cursor:pointer;}
  .tf-avatar-option input{position:absolute;opacity:0;width:1px;height:1px;}
  .tf-avatar-circle{
    display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
    background:var(--bg);border:1.5px solid var(--line);transition:border-color .15s,background .15s;
  }
  .tf-avatar-circle svg{width:26px;height:26px;stroke:var(--ink-muted);fill:none;stroke-width:1.6;transition:stroke .15s;}
  .tf-avatar-option input:checked + .tf-avatar-circle{background:var(--bg-raised);border-color:var(--gold);}
  .tf-avatar-option input:checked + .tf-avatar-circle svg{stroke:var(--gold);}
  .tf-avatar-option input:focus-visible + .tf-avatar-circle{border-color:var(--gold-dim);}

/* Avatar ya elegido, mostrado en Mi Cuenta / donde WordPress use
   get_avatar() (reemplaza al Gravatar por defecto). Selector de avatar
   pausado (ver functions.php), esta regla queda sin uso mientras tanto -
   no se borra por si se reactiva mas adelante. */
  .tf-avatar-rendered{
    display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
    background:var(--bg-raised);border:1px solid var(--line);
  }
  .tf-avatar-rendered svg{width:60%;height:60%;stroke:var(--gold);fill:none;stroke-width:1.6;}

/* ============================================================
   ESCRITORIO DE MI CUENTA (rediseno estilo AliExpress, adaptado a
   negro/dorado) - woocommerce/myaccount/dashboard.php.
   El aviso nativo de "contrasena temporal" (wc_print_notices) sigue
   imprimiendose antes que esto en el HTML (lo controla el wrapper de
   WooCommerce, no esta plantilla) - se reordena solo VISUALMENTE con
   flexbox + :has(), para que el saludo y las tarjetas se vean primero
   sin arriesgar tocar el wrapper general de Mi Cuenta.
   ============================================================ */
  .woocommerce-MyAccount-content:has(.tf-account-dashboard){
    display:flex;flex-direction:column;
  }
  .woocommerce-MyAccount-content:has(.tf-account-dashboard) > .woocommerce-notices-wrapper{
    order:5;margin-bottom:0;
  }
  .tf-account-dashboard{order:1;}
  .tf-account-dashboard .woocommerce-info,
  .tf-account-dashboard .woocommerce-message,
  .tf-account-dashboard .woocommerce-error{order:5;margin-top:24px;margin-bottom:0;}

  .tf-account-greeting{margin-bottom:28px;}
  .tf-account-greeting h2{font-family:'Anton';font-size:clamp(24px,3vw,32px);color:var(--ink);margin-bottom:8px;}
  .tf-account-greeting p{color:var(--ink-muted);font-size:14px;margin:0;}

  .tf-account-sale-banner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    background:linear-gradient(135deg,var(--bg-raised-2),var(--bg-raised));
    border:1px solid var(--gold-dim);padding:22px 26px;margin-bottom:28px;
    text-decoration:none;transition:border-color .15s,transform .15s;
  }
  .tf-account-sale-banner:hover{border-color:var(--gold);transform:translateY(-1px);}
  .tf-sale-banner-pct{
    font-family:'Anton';font-size:clamp(20px,2.6vw,26px);color:var(--gold-bright);letter-spacing:.01em;
  }
  .tf-sale-banner-cta{
    display:inline-flex;align-items:center;gap:8px;font-family:'Oswald';font-weight:600;font-size:12.5px;
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  }
  .tf-sale-banner-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}

  .tf-account-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:8px;}
  .tf-account-card{
    display:flex;flex-direction:column;gap:10px;padding:24px 22px;
    background:var(--bg-raised);border:1px solid var(--line);text-decoration:none;
    transition:border-color .15s,background .15s,transform .15s;
  }
  .tf-account-card:hover{border-color:var(--gold);background:var(--bg-raised-2);transform:translateY(-2px);}
  .tf-account-card-icon{
    display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
    background:var(--bg);border:1px solid var(--gold-dim);
  }
  .tf-account-card-icon svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.7;}
  .tf-account-card-title{font-family:'Oswald';font-weight:600;font-size:13.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);}
  .tf-account-card-desc{color:var(--ink-muted);font-size:12.5px;line-height:1.5;}

  .tf-account-logout{
    display:inline-block;margin-top:28px;color:var(--ink-muted);font-size:13px;text-decoration:underline;
  }
  .tf-account-logout:hover{color:var(--gold);}

/* "Gana hasta 5%..." (pedidos completados sin reseña) y "Mis
   descuentos" (codigos ya ganados) - pedido del cliente 2026-08-23. */
  .tf-account-section-title{font-family:'Oswald';font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin:28px 0 14px;}
  .tf-account-rewards-intro{color:var(--ink-muted);font-size:13px;margin:0 0 14px;}
  .tf-account-reward-row{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:var(--bg-raised);border:1px solid var(--line);padding:16px 18px;margin-bottom:10px;
    text-decoration:none;color:var(--ink);font-size:13.5px;transition:border-color .15s;
  }
  .tf-account-reward-row:hover{border-color:var(--ink);}
  .tf-account-reward-cta{display:inline-flex;align-items:center;gap:6px;font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
  .tf-account-reward-cta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}

  .tf-account-coupon-row{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    background:var(--bg-raised);border:1px solid var(--line);padding:14px 18px;margin-bottom:8px;font-size:13px;
  }
  .tf-account-coupon-code{font-family:'Oswald';font-weight:600;letter-spacing:.04em;color:var(--ink);}
  .tf-account-coupon-pct{font-family:'Oswald';font-weight:700;color:var(--ink);}
  .tf-account-coupon-expiry{color:var(--ink-muted);margin-left:auto;}
  .tf-account-coupons-note{color:var(--ink-muted);font-size:12px;margin:6px 0 0;}