/* ==========================================================================
   MI CUENTA

   Porteado de `especificaciones/MAQUETA-MI-CUENTA.html` el 12/09/2026. El
   relevamiento, las decisiones y lo que se descarto estan en
   `especificaciones/MI-CUENTA.md`.

   Carga SOLO en las paginas de cuenta (`is_account_page()`, ver
   `functions.php`). Por eso puede usar nombres cortos —`.tarjeta`, `.btn`,
   `.pil`— sin prefijo `svo-`: el prefijo es para lo que carga en TODAS las
   paginas, y nada de esto lo hace.

   ==========================================================================
   LO QUE CAMBIA RESPECTO DE LA MAQUETA, Y POR QUE

   La maqueta escribe su propio HTML; aca el HTML lo emite WooCommerce y no se
   copia a mano. Asi que cada bloque dice contra que selector real quedo. La
   unica plantilla que se sobreescribe es `myaccount/dashboard.php`, porque ahi
   si hacia falta un envoltorio que WooCommerce no da.

   ==========================================================================
   DOS COSAS QUE PISAN DESDE AFUERA Y HAY QUE DESHACER

   1. `astra-child/style.css` clava `font-family:'Owners Wide' !important` en
      `body, button, input, select, textarea`. Owners Wide es del lockup, no de
      texto corrido: aca se vuelve a pedir Archivo, y hace falta `!important`
      para ganarle a un `!important`.
   2. Astra escribe `<style>` en linea desde el Personalizador, que NO esta en
      el repositorio y ningun `grep` encuentra. Lo peor que pisa es el anillo
      de foco (`button:focus{outline:0}`). Se repone abajo.
   ========================================================================== */


/* ==========================================================================
   1. EL ARMAZON

   WooCommerce emite dos hermanos adentro de `.woocommerce`: el `<nav>` y el
   panel de contenido. Se los agarra ahi para armar las dos columnas, en vez de
   copiar `my-account.php`.
   ========================================================================== */

.woocommerce-account .woocommerce {
  display: grid;
  gap: 20px;
  align-items: start;
  /* Aire entre la banda de marca y la pantalla. Astra no deja ninguno cuando
     el titulo de la pagina esta apagado, y el menu arranca pegado al borde
     del degradado. */
  padding-top: 22px;
}

/* `min-width:0` no es adorno: el minimo automatico de un item de grid es su
   ancho de contenido, y tanto la tira del menu como la tabla de pedidos —que
   miden mas que la pantalla a proposito, porque se desplazan adentro de su
   caja— estiran la columna y hacen que la PAGINA entera se desplace de
   costado. Medido a 375 y 390px antes de ponerlo. */
.woocommerce-account .woocommerce > * {
  min-width: 0;
}

/* ==========================================================================
   EL ANCHO Y EL FLOTADO QUE HAY QUE DESHACER, SI O SI

   WooCommerce arma estas dos columnas flotando el menu a la izquierda con un
   ancho en porcentaje y el panel a la derecha con otro, y Astra encima pone
   los suyos. Con el contenedor en grid, el flotado se ignora pero **los
   anchos no**: quedan resueltos contra la caja equivocada y el resultado
   medido fue un menu de 280px metido en una columna de 236 y un panel de
   160px dentro de una de 932.

   Y solo pasa de 768px para arriba, que es donde WooCommerce mete esas dos
   reglas. Por eso en telefono se veia bien y el escritorio estaba roto.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
}

@media (min-width: 880px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 32px;
  }

  /* LA COLUMNA DE CADA UNO SE DECLARA, NO SE DEJA AL AUTOMATICO.
     Medido: con la colocacion automatica, el menu terminaba en la columna
     ancha y el panel en la angosta, al reves de lo que dice el HTML —donde el
     `<nav>` va primero—. Algo de la pila de Astra y WooCommerce invierte esa
     colocacion; declarar la columna lo vuelve irrelevante y no depende de
     descubrir cual de las dos hojas lo hace. */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 1;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 879px) {
  /* En una sola columna pasa lo mismo: el menu va arriba porque se declara. */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    grid-row: 1;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    grid-row: 2;
  }
}

/* Astra le pone a los formularios y a las tablas una tipografia que no es la
   de la marca. Todo lo de esta pantalla vuelve a Archivo. */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce input,
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea,
.woocommerce-account .woocommerce button {
  font-family: "Archivo", system-ui, -apple-system, sans-serif !important;
  font-variation-settings: "wdth" 100;
}

/* El anillo de foco que pisa el Personalizador de Astra. Va con `!important`
   porque lo que lo apaga tambien lo lleva. */
.woocommerce-account .woocommerce :focus-visible {
  outline: 2px solid var(--acento) !important;
  outline-offset: 2px;
  border-radius: 4px;
}


/* ==========================================================================
   2. EL MENU

   Real: `.woocommerce-MyAccount-navigation > ul > li.woocommerce-MyAccount-navigation-link--<slug> > a`
   El activo ya viene marcado dos veces por WooCommerce —`.is-active` en el
   `<li>` y `aria-current="page"` en el `<a>`— asi que no hace falta tocar la
   plantilla para saber donde esta parado el usuario.
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Astra le pone a cada `<li>` del menu un borde y un fondo propios, y eso
   dibuja siete cajas iguales donde la unica que tiene que destacarse es la
   que estas mirando. El borde pasa al `<a>`, y solo cuando esta activo. */
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li::marker,
.woocommerce-account .woocommerce-MyAccount-navigation li::before {
  content: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active > a {
  background: var(--surface);
  border-color: var(--line);
  font-weight: 700;
  box-shadow: var(--sombra);
}

/* --- Los iconos ----------------------------------------------------------
   Van como MASCARA y no como imagen de fondo: asi el color sale de
   `background-color` y sigue al tema y al estado, en vez de quedar clavado
   dentro del SVG. Un icono violeta sobre fondo oscuro se pierde; este no.

   Cada entrada trae el suyo por `--icono`, que se define por la clase que
   WooCommerce ya escribe con el slug del endpoint. Una entrada nueva sin
   icono declarado no se rompe: no dibuja nada y el texto queda igual.
   ------------------------------------------------------------------------ */
.woocommerce-account .woocommerce-MyAccount-navigation a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: var(--ink-3);
  -webkit-mask: var(--icono, none) center / contain no-repeat;
  mask: var(--icono, none) center / contain no-repeat;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover::before,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active > a::before {
  background-color: var(--acento);
}

.woocommerce-MyAccount-navigation-link--mis-tickets {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 9V7a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a2.5 2.5 0 0 0 0 5v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a2.5 2.5 0 0 0 0-5z'/%3E%3Cpath d='M14 6v12' stroke-dasharray='2 3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l1 18-7-3-7 3z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.5 3.1-5.5 7-5.5s7 2 7 5.5'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--productor,
.woocommerce-MyAccount-navigation-link--mis-eventos-colaborador {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--administracion {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-2.9 7.8-7 9-4.1-1.2-7-4.8-7-9V6z'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--eventos_pendientes {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--revendedor {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-9 9 9-9 9z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 16l4-4-4-4M20 12H10'/%3E%3C/svg%3E");
}

/* "Salir" es la unica accion del menu que te saca de donde estas. Se separa. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a {
  color: var(--ink-2);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a:hover::before {
  color: var(--baja);
  background-color: var(--baja);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a:hover {
  background: var(--baja-soft);
}

/* --- Telefono: la tira que se desplaza -----------------------------------
   Siete entradas apiladas a pantalla completa son dos pantallas de menu antes
   de ver un solo dato. Lo que avisa que hay mas a la derecha es la pastilla
   CORTADA por el borde: no miente cuando no hay desborde y no ocupa lugar.
   ------------------------------------------------------------------------ */
@media (max-width: 879px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin: 0 -16px 4px;
    padding: 0 16px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0 10px;
    scroll-snap-type: x proximity;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li {
    flex: none;
    scroll-snap-align: start;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation a {
    white-space: nowrap;
    background: var(--surface);
    border-color: var(--line);
    border-radius: 999px;
    padding: 9px 15px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation .is-active > a {
    background: var(--ink);
    color: var(--ground);
    border-color: var(--ink);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation .is-active > a::before {
    background-color: var(--lima);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout > a {
    border-style: dashed;
  }
}

@media (min-width: 880px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: grid;
    gap: 2px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
}


/* ==========================================================================
   3. EL PANEL DE CONTENIDO, Y EL VOCABULARIO COMPARTIDO

   `.tarjeta`, `.btn`, `.pil` y `.caja-tabla` se llaman igual que en
   `panel.css` a proposito: son el mismo componente y el sitio tiene que
   hablar un solo idioma. Copiados, no reinterpretados.
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-size: 19px;
  font-weight: 800;
  font-variation-settings: "wdth" 110;
  margin: 0 0 4px;
  line-height: 1.25;
}

.woocommerce-account .woocommerce-MyAccount-content > p {
  color: var(--ink-2);
  max-width: 62ch;
}

.woocommerce-account .tarjeta {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 18px 20px;
  box-shadow: var(--sombra);
}

.woocommerce-account .btn {
  background: var(--ink);
  color: var(--ground);
  border: 0;
  border-radius: 9px;
  padding: 10px 17px;
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  min-height: 44px;
}
.woocommerce-account .btn:hover {
  background: var(--acento);
  color: var(--acento-txt);
}
.woocommerce-account .btn.sec {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-fuerte);
  font-weight: 600;
}
.woocommerce-account .btn.sec:hover {
  background: var(--surface-2);
  border-color: var(--acento);
  color: var(--acento);
}

/* Los botones que pinta WooCommerce —guardar la cuenta, "Ver" de un pedido,
   volver a pagar— se visten con el mismo molde sin tocar sus plantillas. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
  background: var(--ink);
  color: var(--ground);
  border: 0;
  border-radius: 9px;
  padding: 12px 19px;
  min-height: 44px;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
  background: var(--acento);
  color: var(--acento-txt);
}

/* Los de adentro de una tabla son secundarios: no compiten con el dato. */
.woocommerce-account .woocommerce-orders-table .button,
.woocommerce-account .woocommerce-orders-table .woocommerce-button {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-fuerte);
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 13px;
  min-height: 36px;
  margin: 2px 4px 2px 0;
}
.woocommerce-account .woocommerce-orders-table .button:hover,
.woocommerce-account .woocommerce-orders-table .woocommerce-button:hover {
  background: var(--surface-2);
  border-color: var(--acento);
  color: var(--acento);
}


/* ==========================================================================
   4. EL ESCRITORIO

   Real: `myaccount/dashboard.php`, la unica plantilla sobreescrita. Copia de
   la 4.4.0 con los dos parrafos de WooCommerce adentro de una tarjeta; los
   textos, las traducciones y los hooks quedan intactos.
   ========================================================================== */

.woocommerce-account .bienvenida .hola {
  font-size: clamp(19px, 4vw, 23px);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--ink);
}
.woocommerce-account .bienvenida p {
  color: var(--ink-2);
  max-width: 58ch;
}
.woocommerce-account .bienvenida a {
  color: var(--acento);
}

.woocommerce-account .bienvenida .accesos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.woocommerce-account .bienvenida .accesos .btn {
  color: var(--ground);
}
.woocommerce-account .bienvenida .accesos .btn.sec {
  color: var(--ink);
}
.woocommerce-account .bienvenida .accesos .btn:hover {
  color: var(--acento-txt);
}
.woocommerce-account .bienvenida .accesos .btn.sec:hover {
  color: var(--acento);
}

/* La salida va al pie y en letra chica: es la unica accion de la tarjeta que
   te saca de la pantalla, y no compite con el saludo. */
.woocommerce-account .bienvenida .salida {
  font-size: 13px;
  color: var(--ink-3);
  margin: 14px 0 0;
}
.woocommerce-account .bienvenida .salida a {
  color: var(--ink-2);
}
.woocommerce-account .bienvenida .salida a:hover {
  color: var(--acento);
}


/* ==========================================================================
   5. PEDIDOS

   Real: `table.woocommerce-orders-table`. La tabla NO se achica en telefono:
   se desplaza adentro de su caja, que es lo que ya hace el panel. Achicarla
   produce columnas de una letra.

   Por eso tambien se apaga `shop_table_responsive`, el modo de WooCommerce
   que convierte cada fila en una ficha con el nombre de la columna pegado
   adelante por `::before`. Con seis columnas eso da seis renglones por pedido.
   ========================================================================== */

.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sombra);
}

/* LA CAJA QUE DESPLAZA ES EL PANEL, NO LA TABLA.
   WooCommerce no envuelve la tabla en nada, y hacerla `display:block` con su
   propio desborde no sirve: el `min-width` que la mantiene legible se aplica
   entonces a la CAJA, que deja de poder achicarse y termina desbordando la
   pagina entera. Asi que desplaza el panel, y solo cuando adentro hay una
   tabla de pedidos. Si el navegador no entiende `:has()`, no se rompe nada:
   la tabla se achica sola, que es lo que pasaba antes. */
.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-orders-table) {
  overflow-x: auto;
}

.woocommerce-account .woocommerce-orders-table__header {
  text-align: left;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}

/* Astra le pone borde a los CUATRO lados de cada celda, y eso convierte la
   tabla en una cuadricula de planilla. Se dejan solo las lineas horizontales,
   que son las que separan un pedido de otro. */
.woocommerce-account .woocommerce-orders-table__cell,
.woocommerce-account .woocommerce-orders-table__header {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.woocommerce-account .woocommerce-orders-table__cell {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
}

/* Las cifras y la fecha no se parten en dos renglones: la tabla ya se
   desplaza de costado, asi que partirlas no gana nada y ensucia la lectura. */
.woocommerce-account .woocommerce-orders-table__cell-order-number,
.woocommerce-account .woocommerce-orders-table__cell-order-date,
.woocommerce-account .woocommerce-orders-table__cell-order-status {
  white-space: nowrap;
}
.woocommerce-account .woocommerce-orders-table__row:last-child .woocommerce-orders-table__cell {
  border-bottom: 0;
}
.woocommerce-account .woocommerce-orders-table__row:hover {
  background: var(--surface-2);
}

/* El numero, la fecha y el importe son cifras: van en la mono, que las alinea
   por columna. El importe ademas es plata, y la plata tiene su token. */
.woocommerce-account .woocommerce-orders-table__cell-order-number,
.woocommerce-account .woocommerce-orders-table__cell-order-date,
.woocommerce-account .woocommerce-orders-table__cell-order-total {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.woocommerce-account .woocommerce-orders-table__cell-order-total {
  color: var(--plata);
  font-weight: 600;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El estado como pastilla, con el color que le corresponde. Sale de la clase
   de la fila, que WooCommerce ya escribe con el estado del pedido. */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
.woocommerce-account .woocommerce-orders-table__cell-order-status::first-line {
  line-height: 1.2;
}
.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
  color: var(--ok);
}
.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status {
  color: var(--espera);
}
.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
  color: var(--baja);
}

/* El modo "responsive" de WooCommerce, apagado: ver el comentario de arriba. */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive tr {
    display: table-row;
  }
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive td,
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive th {
    display: table-cell;
    text-align: left;
  }
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive thead {
    display: table-header-group;
  }
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive td::before {
    content: none;
  }
}


/* ==========================================================================
   6. DETALLES DE LA CUENTA

   Real: `form.woocommerce-EditAccountForm`, con sus `p.woocommerce-form-row`.
   No se copia la plantilla: se viste la que hay.
   ========================================================================== */

.woocommerce-account .woocommerce-EditAccountForm {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sombra);
  padding: 18px 20px 20px;
  /* No crece con la pantalla: un campo de 900px para escribir un nombre no
     ayuda a nadie, y obliga al ojo a viajar hasta el otro extremo para leer
     la etiqueta de al lado. */
  max-width: 640px;
  margin-top: 16px;
}

.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row {
  margin: 0 0 15px;
  padding: 0;
}
/* La etiqueta lleva el selector largo a proposito: Astra pinta las suyas con
   `.woocommerce-account .woocommerce form .form-row label`, que pesa mas que
   la version corta de esta regla y devolvia las etiquetas a 15,3px. Medido. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm .woocommerce-form-row label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
  line-height: 1.35;
}
.woocommerce-account .woocommerce-EditAccountForm .required {
  color: var(--baja);
  text-decoration: none;
  border: 0;
}
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Input,
.woocommerce-account .woocommerce-EditAccountForm .input-text {
  width: 100%;
  font-size: 14px;
  padding: 11px 12px;
  min-height: 44px;
  border: 1px solid var(--line-fuerte);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
}
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Input:focus,
.woocommerce-account .woocommerce-EditAccountForm .input-text:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}
.woocommerce-account .woocommerce-EditAccountForm em,
.woocommerce-account .woocommerce-EditAccountForm .description {
  font-size: 11.5px;
  color: var(--ink-3);
  font-style: normal;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px 4px;
  margin: 4px 0 18px;
}
.woocommerce-account .woocommerce-EditAccountForm legend {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0 7px;
  width: auto;
  margin: 0;
  border: 0;
}

/* Nombre y apellido comparten renglon desde 620px. WooCommerce ya los marca
   como `--first` y `--last`; abajo de ese ancho ocupan el renglon entero. */
@media (min-width: 620px) {
  .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--first,
  .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--last {
    width: calc(50% - 8px);
    float: left;
  }
  .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--last {
    margin-left: 16px;
  }
  .woocommerce-account .woocommerce-EditAccountForm .clear {
    clear: both;
  }
}


/* ==========================================================================
   7. LOS AVISOS Y LOS ESTADOS VACIOS

   Real: `.woocommerce-message`, `.woocommerce-info`, `.woocommerce-error`.
   WooCommerce los usa tanto para confirmar un guardado como para decir que no
   hay pedidos, asi que el mismo molde sirve para las dos cosas.
   ========================================================================== */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  border: 1px solid var(--line-fuerte);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  padding: 18px 20px;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  font-size: 14px;
  box-shadow: var(--sombra);
  list-style: none;
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before {
  content: none;
}
.woocommerce-account .woocommerce-message {
  border-color: var(--ok-borde);
  background: var(--ok-soft);
  color: var(--ok);
}
.woocommerce-account .woocommerce-error {
  border-color: var(--baja-borde);
  background: var(--baja-soft);
  color: var(--baja);
}
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button {
  margin-left: auto;
}


/* ==========================================================================
   ==========================================================================
   AÑADIDO: LA PANTALLA DE ACCEDER Y REGISTRARSE

   Porteado de `especificaciones/MAQUETA-ACCESO.html` el 13/09/2026. El
   relevamiento, los datos que decidieron cada cosa y lo que se descarto estan
   en `especificaciones/ACCESO.md`.

   Va al FINAL y bajo rotulo propio, no intercalado, como pide la regla de
   porteo de la skill `survivo-design`.

   ==========================================================================
   POR QUE ESTA EN ESTA HOJA Y NO EN UNA NUEVA

   Sin sesion, `/mi-cuenta/` emite `<body class="... woocommerce-account ...">`
   igual que con sesion —comprobado el 13/09/2026— y `is_account_page()` da
   true, asi que esta hoja YA cargaba en la pantalla de acceso. Una hoja nueva
   seria un encolado mas para la misma superficie.

   ==========================================================================
   EL SELECTOR QUE SEPARA LAS DOS PANTALLAS

   `body.woocommerce-account:not(.logged-in)`. WordPress agrega `logged-in` al
   body solo cuando hay sesion, asi que ese `:not()` es exactamente "la pantalla
   de acceso" y nada mas. No se usa `:has()` ni se depende del markup propio:
   si manana cambia la plantilla, el selector sigue siendo cierto.

   HACE FALTA, ADEMAS DE PINTAR: el armazon de la seccion 1 de esta hoja pone
   `display:grid` con dos columnas de 236px + 1fr sobre `.woocommerce`, y ese
   selector tambien matchea esta pantalla, que no tiene menu ni panel. Le caia
   encima sin que nadie lo hubiera pensado.

   ==========================================================================
   LAS TRADUCCIONES DE LA MAQUETA A ESTE HTML

   La maqueta escribe su propio HTML y aca casi todo lo emite la plantilla
   copiada `woocommerce/myaccount/form-login.php`, asi que los nombres de clase
   son LOS MISMOS. Las dos excepciones:

     maqueta            sitio                        por que
     .boton-google  ->  .nsl-container .nsl-button   lo dibuja Nextend Social
                                                     Login y su markup no es
                                                     nuestro
     .nota-puerta   ->  .svo-nota-puerta             lo emite `SVO_Acceso`, que
                                                     es un plugin y no el tema
   ========================================================================== */


/* --- El armazon ---------------------------------------------------------- */

/* Se deshace el grid de dos columnas de la seccion 1. Ver arriba. */
body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  padding-top: 0;
}

body.woocommerce-account:not(.logged-in) .acceso {
  max-width: 560px;
  margin: 0 auto;
  padding: 26px 0 8px;
}

body.woocommerce-account:not(.logged-in) .acceso h1 {
  font-size: clamp(23px, 5vw, 30px);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  line-height: 1.15;
  margin: 0 0 6px;
}

/* La bajada SOLO sale cuando venis de una compra: entrando directo repetia lo
   que los dos encabezados ya dicen y costaba 56px de la primera pantalla. */
body.woocommerce-account:not(.logged-in) .acceso .bajada {
  color: var(--ink-2);
  margin: 0 0 22px;
  font-size: 14px;
}
body.woocommerce-account:not(.logged-in) .acceso .bajada b {
  font-weight: 700;
  color: var(--ink);
}

@media (min-width: 880px) {
  body.woocommerce-account:not(.logged-in) .acceso {
    padding-top: 34px;
    padding-bottom: 12px;
  }
}


/* --- Lo que estas comprando ---------------------------------------------- */

body.woocommerce-account:not(.logged-in) .que-compras {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--acento-borde);
  background: var(--acento-soft);
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 0 0 18px;
}
body.woocommerce-account:not(.logged-in) .que-compras .icono {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--acento);
  background: var(--surface);
}
body.woocommerce-account:not(.logged-in) .que-compras .icono svg {
  width: 18px;
  height: 18px;
}
body.woocommerce-account:not(.logged-in) .que-compras .texto {
  min-width: 0;
}
/* `display:block` NO es adorno: sobre un elemento inline no funcionan ni
   `text-overflow:ellipsis` ni el `margin-top`. Es la trampa 8 de la skill
   `survivo-design` con una cuarta condicion que no estaba escrita. */
body.woocommerce-account:not(.logged-in) .que-compras .evento {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.woocommerce-account:not(.logged-in) .que-compras .detalle {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
}


/* --- El atajo de Google --------------------------------------------------
   Real: lo que emite `SVO_Boton_Google::pintar()`, que envuelve el shortcode
   `[nextend_social_login]`. El boton de adentro es `.nsl-button`, de Nextend.

   MEDIDO EL 13/09/2026, y es lo que decide que este arriba y con este peso:
     usuarios con Google vinculado ..... 998 de 3.500  (28,5%)
     COMPRADORES que usan Google ....... 626 de 2.173  (28,8%)

   Casi 3 de cada 10. Va ARRIBA porque es el camino individual mas usado, y NO
   va solido porque el otro es el 71%: dos solidos serian dos primarios.

   El borde es `--ink-3` y no `--line-fuerte` a proposito: `--line-fuerte` da
   1,66:1 sobre blanco, por debajo del 3:1 que pide un control, y el boton
   quedaba en posicion de primario con peso de terciario. `--ink-3` da 3,44:1
   en claro y 3,99:1 en oscuro.
   ------------------------------------------------------------------------- */

body.woocommerce-account:not(.logged-in) .sso {
  margin: 0;
}
body.woocommerce-account:not(.logged-in) .sso .nsl-container {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left;
}
body.woocommerce-account:not(.logged-in) .sso .nsl-container-buttons {
  display: block;
}
body.woocommerce-account:not(.logged-in) .sso .nsl-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  border: 1px solid var(--ink-3) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: var(--sombra);
}
body.woocommerce-account:not(.logged-in) .sso .nsl-button:hover {
  background: var(--surface-2) !important;
  border-color: var(--acento) !important;
}
/* El rotulo de Nextend viene con su propia tipografia y su propio tamano.
   Vuelve a Archivo, que es la trampa 2 de la cabecera de esta hoja. */
/* El `line-height` va explicito: el de Nextend estiraba el boton a 66px de
   alto, contra los 48 del resto de los controles de la pantalla. Medido. */
body.woocommerce-account:not(.logged-in) .sso .nsl-button-label-container {
  font-family: "Archivo", system-ui, -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}
body.woocommerce-account:not(.logged-in) .sso .nsl-button-svg-container {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
/* El logo va a 22px y no a los 18 de un icono de interfaz: no es un adorno del
   boton, es la marca que la persona reconoce de un vistazo, y es lo que hace
   que este camino se lea como "el atajo" antes de leer el rotulo. Con un boton
   de 48px de alto, 22 es lo que lo deja proporcionado sin dominarlo. */
body.woocommerce-account:not(.logged-in) .sso .nsl-button-svg-container svg {
  width: 22px;
  height: 22px;
}

/* El separador. La linea va con pseudoelementos: el texto va EN la linea.
   No avisa ademas que abajo hay dos caminos —la critica lo pidio— porque esa
   senal son los dos encabezados del acordeon, visibles sin scroll a 390px. */
body.woocommerce-account:not(.logged-in) .separador {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  color: var(--ink-2);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
}
body.woocommerce-account:not(.logged-in) .separador::before,
body.woocommerce-account:not(.logged-in) .separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}


/* --- Los dos caminos: un acordeon, uno abierto por vez -------------------
   Son `<details>` NATIVOS, el mismo recurso que ya usan `details.permisos` y
   `details.desc` en `panel.css`, y con el mismo nombre para lo de adentro:
   `.cuerpo`. El atributo `name` compartido los vuelve excluyentes sin JS.

   Los encabezados dicen QUIEN SOS y no que accion vas a hacer: la persona sabe
   su historia y no tiene que traducirla a un verbo.

   POR QUE NO HAY DOS COLUMNAS. Baymard, sobre 344 sitios: el 60% de los
   sujetos de prueba tuvo problemas para identificar la opcion correcta cuando
   habia varios formularios abiertos a la vez, y recomienda colapsar. Medido en
   la primera version de la maqueta: a 390px el primer campo arrancaba a 431px
   de scroll; con el acordeon arranca a 313 y la pantalla entra entera.
   ------------------------------------------------------------------------- */

body.woocommerce-account:not(.logged-in) .caminos {
  display: grid;
  gap: 12px;
}

body.woocommerce-account:not(.logged-in) .camino {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sombra);
  overflow: hidden;
}
body.woocommerce-account:not(.logged-in) .camino[open] {
  border-color: var(--line-fuerte);
}

body.woocommerce-account:not(.logged-in) .camino summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  min-height: 56px;
}
body.woocommerce-account:not(.logged-in) .camino summary::-webkit-details-marker {
  display: none;
}
body.woocommerce-account:not(.logged-in) .camino summary:hover {
  background: var(--surface-2);
}
/* El anillo de foco se repone explicitamente, igual que en `details.permisos`
   del panel: Astra lo apaga desde el Personalizador con un `<style>` en linea
   que no esta en el repositorio. Trampa 2 de la cabecera de esta hoja. */
body.woocommerce-account:not(.logged-in) .camino summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}

body.woocommerce-account:not(.logged-in) .camino .quien {
  font-size: 17px;
  font-weight: 700;
  font-variation-settings: "wdth" 110;
  line-height: 1.25;
}
body.woocommerce-account:not(.logged-in) .camino .que {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 2px;
}
body.woocommerce-account:not(.logged-in) .camino .chevron {
  margin-left: auto;
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  transition: transform .2s ease;
}
body.woocommerce-account:not(.logged-in) .camino[open] .chevron {
  transform: rotate(180deg);
}

body.woocommerce-account:not(.logged-in) .camino .cuerpo {
  padding: 2px 18px 20px;
}

/* WOOCOMMERCE LE PONE UNA CAJA AL FORMULARIO, Y HAY QUE SACARLA.
   `.woocommerce form.login` y `form.register` traen `border: 1px solid`,
   `padding: 20px` y `border-radius: 5px` propios. Medido en el sitio el
   13/09/2026: un rectangulo negro de 0,9px adentro de la tarjeta del acordeon,
   o sea dos cajas anidadas diciendo lo mismo. La tarjeta ya es la caja. */
body.woocommerce-account:not(.logged-in) .camino form.login,
body.woocommerce-account:not(.logged-in) .camino form.register {
  border: 0;
  padding: 0;
  border-radius: 0;
  margin: 0;
}


/* --- Los campos ----------------------------------------------------------
   Los valores de caja —alto, padding, radio, borde— son LOS MISMOS que la
   seccion 6 (Detalles de la cuenta) de esta hoja, a proposito: son el mismo
   componente en dos pantallas del mismo sitio.

   > DOS DIFERENCIAS CON LA SECCION 6, Y ESTAN A PROPOSITO. Aca el rotulo va en
   > peso 600 sobre `--ink-2`, y alla en 700 sobre `--ink`. Y aca los textos de
   > ayuda van en 12px sobre `--ink-2`, y alla en 11,5px sobre `--ink-3`.
   >
   > Las dos salieron de la critica de esta pantalla: un rotulo en negro 700 es
   > lo unico con peso cuando todos los campos estan vacios y le gana al dato
   > que la persona todavia no escribio; y `--ink-3` da 3,44:1 en claro, por
   > debajo del 4,5 que pide un texto, mientras `--ink-2` da 7,29:1. El 11,5px
   > ademas no es un paso de la escala del sistema.
   >
   > O SEA QUE LA SECCION 6 TIENE LOS MISMOS DOS DEFECTOS. No se arreglan desde
   > aca porque es otra pantalla y seria agrandar el alcance sin avisar, pero
   > queda escrito: las dos pantallas hay que unificarlas.
   ------------------------------------------------------------------------- */

/* ==========================================================================
   EL ANCHO Y EL FLOTADO DE WOOCOMMERCE, QUE HAY QUE DESHACER

   Es la MISMA leccion que la seccion 1 de esta hoja ya aprendio con el menu y
   el panel: WooCommerce le pone a `.form-row-first` y `.form-row-last` un
   `width: 47%` con `float: left`, y a otras filas sus propios anchos. Con un
   contenedor en grid el flotado se ignora, pero LOS ANCHOS NO.

   Medido en el sitio el 13/09/2026: los campos de Nombre y Apellido salian a
   la mitad del ancho de los de arriba, y el `<p>` del boton se pasaba del
   borde de la tarjeta.

   Hay que deshacerlo ANTES de poner un layout nuevo encima, no despues.
   ========================================================================== */
body.woocommerce-account:not(.logged-in) .camino .form-row,
body.woocommerce-account:not(.logged-in) .camino .woocommerce-form-row {
  width: auto;
  max-width: none;
  min-width: 0;
  float: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

body.woocommerce-account:not(.logged-in) .campo {
  margin: 0 0 15px;
  padding: 0;
}

/* El selector va LARGO por el mismo motivo que la linea 652 de esta hoja:
   Astra pinta las etiquetas con `.woocommerce-account .woocommerce form
   .form-row label`, que pesa mas que la version corta y las devolvia a
   15,3px. Medido al portear Detalles el 12/09/2026. */
body.woocommerce-account:not(.logged-in) .woocommerce form .campo label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink-2);
  letter-spacing: .02em;
  line-height: 1.35;
}

body.woocommerce-account:not(.logged-in) .campo .input-text,
body.woocommerce-account:not(.logged-in) .campo .woocommerce-Input {
  width: 100%;
  font-size: 14px;
  padding: 11px 12px;
  min-height: 44px;
  border: 1px solid var(--line-fuerte);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
}
body.woocommerce-account:not(.logged-in) .campo .input-text:focus,
body.woocommerce-account:not(.logged-in) .campo .woocommerce-Input:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}
body.woocommerce-account:not(.logged-in) .campo .input-text::placeholder {
  color: var(--ink-3);
}

/* EL CORREO VA EN MONO, y no es un capricho: es la misma regla que el sistema
   ya aplica a importes, fechas y codigos —lo que se lee caracter por caracter
   y se copia—. Aca rinde doble, porque en mono se distingue `l` de `1` y `rn`
   de `m`, que es de lo que viven los correos mal tipeados. El ROTULO queda en
   Archivo; lo que se tipea, en mono. */
body.woocommerce-account:not(.logged-in) .campo input[type="email"],
body.woocommerce-account:not(.logged-in) .campo input[name="username"] {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13.5px;
}

body.woocommerce-account:not(.logged-in) .campo .ayuda {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 6px;
}

/* Nombre y apellido al lado en cuanto entran. 560px es el corte del sistema
   para exactamente esto: "la grilla de dos columnas de un formulario se arma". */
body.woocommerce-account:not(.logged-in) .par {
  display: grid;
  gap: 0 14px;
}
@media (min-width: 560px) {
  body.woocommerce-account:not(.logged-in) .par {
    grid-template-columns: 1fr 1fr;
  }
}

/* El ojo de mostrar la contrasena lo agrega WooCommerce por JavaScript: envuelve
   el input en `.password-input` y le cuelga un `.show-password-input`. Con la
   opcion `generate_password` en `'no'` —que ahora fija `SVO_Acceso`— aparece
   tambien en el registro, donde hoy no se ve.

   SE ANCLA AL INPUT, no al campo: `.campo` incluye el texto de ayuda de abajo,
   y anclado ahi el ojo queda montado encima de "Al menos 8 caracteres". */
/* ==========================================================================
   EL OJO DE MOSTRAR LA CONTRASENA NO SE POSICIONA DESDE ACA

   Lo agrega WooCommerce por JavaScript —envuelve el input en
   `<span class="password-input">` y le cuelga un `<button class="show-password-input">`—
   y trae su propio CSS para ubicarlo, que funciona.

   Se intento reposicionarlo cinco veces el 13/09/2026 y las cinco salieron
   peor: con `position:absolute` el boton quedaba 17px arriba de donde el
   propio navegador declaraba haberlo puesto, y al volverlo item de un flex se
   iba abajo y a la izquierda del campo. La causa nunca aparecio en el estilo
   calculado.

   La conclusion es la barata: si el componente ya esta resuelto en la hoja de
   WooCommerce, reimplementarlo es trabajo que se paga dos veces. De aca sale
   SOLO el color, para que no desentone con el resto de la pantalla.
   ========================================================================== */
body.woocommerce-account:not(.logged-in) .campo .show-password-input {
  color: var(--ink-2);
}
body.woocommerce-account:not(.logged-in) .campo .show-password-input:hover {
  color: var(--acento);
}

/* La nota del nombre impreso. La emite `SVO_Acceso::pintar_campos()`, que es un
   plugin y no el tema: por eso lleva prefijo y la maqueta no. */
body.woocommerce-account:not(.logged-in) .svo-nota-puerta {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  margin: 0 0 15px;
  font-size: 12px;
  color: var(--ink-2);
}

/* El aviso de que todo es obligatorio se dice UNA vez, no campo por campo: por
   eso los asteriscos se sacan del markup de la plantilla. En una pantalla donde
   TODOS los campos son obligatorios, marcarlos uno por uno no comunica nada. */
body.woocommerce-account:not(.logged-in) .todos-obligatorios {
  font-size: 12px;
  color: var(--ink-2);
  margin: 0 0 15px;
}

/* "Recordarme": toda la fila es el area de toque, no los 18px de la casilla.
   Real: `.woocommerce-form-login__rememberme`. */
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 16px;
  min-height: 44px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  float: none;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input {
  width: 20px;
  height: 20px;
  accent-color: var(--acento);
  flex: none;
  margin: 0;
}

/* --- Los botones ---------------------------------------------------------
   Real: `.woocommerce-form-login__submit` y `.woocommerce-form-register__submit`.
   Con el acordeon nunca hay dos en pantalla a la vez, que era la critica
   —dos solidos identicos se leen como la misma accion repetida—.
   ------------------------------------------------------------------------- */

body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit {
  background: var(--ink);
  color: var(--ground);
  border: 0;
  border-radius: 9px;
  padding: 10px 17px;
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  width: 100%;
  float: none;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit:hover,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit:hover {
  background: var(--acento);
  color: var(--acento-txt);
}

/* "Olvidaste la contrasena" va DEBAJO del campo y a la derecha, no centrado
   bajo el boton: ahi quedaba en la ruta del pulgar como si fuera el paso
   siguiente. Y va en el acento, que es lo que marca lo accionable —la critica
   de color midio que el unico enlace de la pantalla no lo usaba—. */
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword {
  margin: -9px 0 16px;
  font-size: 12px;
  text-align: right;
}
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a {
  color: var(--acento);
  text-decoration: none;
}
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a:hover {
  text-decoration: underline;
}

/* La nota de privacidad, que WooCommerce cuelga de `woocommerce_register_form`
   con prioridad 20 si esta configurada. */
body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: var(--ink-2);
  margin: 12px 0 0;
}