/*
 * CCM Account — diseño del área de cuenta.
 *
 * Traducido a CSS plano desde el export de Figma Make que entregó el dueño
 * (React + Tailwind + shadcn). No se instaló nada de aquello: se extrajo el
 * lenguaje visual —rejilla, tarjetas, lateral pegajoso, ítem activo en rojo— y
 * se aplicó sobre las plantillas de WooCommerce que ya existían.
 *
 * Los colores NO son los del mockup: usa los rojos de CCM del kit de Elementor
 * (#E60000 y #191818, que son los que se ven en toda la tienda) y una escala de
 * grises neutra. Ojo: `ccm-checkout` usa otro rojo, #e63946, que no aparece en
 * ninguna otra parte del sitio — no es la referencia.
 *
 * No se declara `font-family` a propósito: la hereda del tema, que ya carga
 * Founder Grotesk CCM. Declararla aquí arriesga un fallback si la fuente no
 * está encolada en esta página.
 */

.woocommerce-account {
    /* Los rojos de la tienda, tomados del kit de Elementor —que es la fuente
     * autoritativa— y no de ccm-checkout.
     *
     * Kit: Principal y Énfasis `#E60000`, Secundario `#191818`. Verificado en
     * el HTML servido de /tienda/: `#E60000` aparece 17 veces y `#191818` 5;
     * `#e63946` **cero**. Ese `#e63946` es de ccm-checkout, que lo usa 30 veces
     * y es el que desentona del resto del sitio, no al revés. Aquí se estaba
     * copiando de allí por error.
     *
     * De propina, esto cierra un hallazgo de accesibilidad que arrastrábamos:
     * blanco sobre `#E60000` da **4.81:1** y pasa el mínimo de 4.5; el
     * `#e63946` anterior se quedaba en 4.17:1. */
    --ccma-red: #e60000;

    /* Hover, por decisión del dueño: el negro del kit, no un rojo más oscuro. */
    --ccma-red-strong: #191818;

    /* Rosa del ítem activo. Se aclara respecto al anterior (#fdf1f2) porque
       `#E60000` encima daba 4.36:1; sobre este da **4.55:1** y pasa. */
    --ccma-red-soft: #fef7f7;

    /* Ya no hace falta un rojo distinto para texto: el de marca pasa el mínimo
       sobre blanco (4.81:1) y sobre el rosa nuevo (4.55:1). Se conserva la
       variable para no tocar los quince sitios que la usan. */
    --ccma-red-text: #e60000;

    --ccma-ink: #1a1a1a;
    --ccma-ink-soft: #4a4a52;
    --ccma-muted: #6b7280;

    --ccma-line: #e8e8e8;
    --ccma-line-soft: #f1f1f3;

    --ccma-surface: #fff;
    --ccma-canvas: #fafafa;
    --ccma-hover: #f5f5f5;

    --ccma-radius-card: 16px;
    --ccma-radius: 12px;
    --ccma-radius-sm: 8px;

    --ccma-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    --ccma-shadow-hover: 0 4px 12px rgba(0, 0, 0, .07);
}

body.woocommerce-account {
    background: var(--ccma-canvas);
}

/* ---------------------------------------------------------------------------
 * Rejilla: lateral + contenido.
 *
 * `minmax(0, 1fr)` en la columna de contenido no es adorno: sin él, una tabla
 * ancha (la de pedidos) fuerza a la columna a crecer más allá del contenedor y
 * la página se desborda hacia la derecha. Era exactamente el fallo visible en
 * el escritorio antes de este diseño.
 * ------------------------------------------------------------------------ */

/* `:not(:has(> .ccma-access))` para que la rejilla no se active en la pantalla
   de recuperacion con sesion, que se pinta suelta y no lleva barra lateral. */
.woocommerce-account.logged-in .woocommerce:not(:has(> .ccma-access)) {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    /* 1240 y no 1200: el dueño pidió 40px más de ancho en escritorio
       (2026-08-11). Los aprovecha la columna de contenido, porque la barra
       lateral es fija a 280px. */
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 16px 56px;
}

/* El selector tiene que ser EL MISMO que el de arriba, `:not(:has(...))`
 * incluido.
 *
 * Se rompió justo por esto: al acotar la regla base con `:not(:has(> .ccma-access))`
 * para arreglar la pantalla de recuperación, su especificidad subió a (0,4,0),
 * y esta se quedó en (0,3,0). Una media query **no gana por estar dentro de una
 * media query**: sigue decidiendo la especificidad. Resultado en el móvil del
 * dueño: la rejilla seguía en dos columnas y el contenido quedaba en una tira
 * estrecha a la derecha.
 *
 * Si algún día vuelve a cambiar el selector de arriba, este cambia con él. */
@media (max-width: 900px) {
    .woocommerce-account.logged-in .woocommerce:not(:has(> .ccma-access)) {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px 10px 40px;
    }
}

/* Título de la página: oculto a la vista, presente para lectores de pantalla.
 *
 * El dueño pidió que no se viera (2026-08-11). No se borra del marcado porque
 * la auditoría del paso 4.8 lo añadió justo para cerrar un hueco: **ninguna
 * pantalla del área tenía `<h1>`**, y sin él quien navega con lector de
 * pantalla llega a una página sin nombre. Oculto así se consigue lo pedido
 * —que no se vea— sin volver a abrirlo.
 *
 * `position: absolute` lo saca del flujo de la rejilla, así que ya no ocupa
 * celda y no hace falta el `grid-column` que llevaba. `clip-path` en vez de
 * `display: none` o `visibility: hidden`, que sí lo esconderían también de los
 * lectores de pantalla. */
.ccma-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Nombre de la pantalla, para las que WooCommerce pinta sin ningún
   encabezado: pedidos, descargas, datos de la cuenta y métodos de pago. */
.ccma-screen-title {
    margin: 0 0 18px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ccma-ink);
}

/* Y los encabezados que SÍ trae WooCommerce, al mismo tamaño.
 *
 * Sus plantillas los pintan sin clase (`<h2>Dirección de facturación</h2>`), así
 * que heredaban el tamaño del tema. Verificado en el navegador del dueño: 32px
 * y peso 500, contra los 18px y 600 de los nuestros — dos pantallas seguidas de
 * la misma área con encabezados de tamaño muy distinto.
 *
 * Se excluyen los nuestros por nombre para no pisarlos, y se deja fuera la
 * tarjeta de acceso, que tiene su propia escala. */
.woocommerce-MyAccount-content h2:not(.ccma-screen-title):not(.ccma-card__title):not(.ccma-access__title),
.woocommerce-MyAccount-content h3:not(.ccma-screen-title):not(.ccma-card__title):not(.ccma-access__title) {
    margin: 0 0 18px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ccma-ink);
}

/* Anular la maquetación en columnas flotantes de WooCommerce.
 *
 * `woocommerce-layout.css` trae, de antes de que existieran flex y grid:
 *
 *     .woocommerce-account .woocommerce-MyAccount-navigation { float: left;  width: 30%; }
 *     .woocommerce-account .woocommerce-MyAccount-content    { float: right; width: 68%; }
 *
 * Esas reglas tienen especificidad 0,2,0 y le ganaban a `.ccma-nav` (0,1,0).
 * Dentro de una rejilla el `float` no hace nada, pero **el ancho en porcentaje
 * sí**: la barra lateral se quedaba en el 30% de su columna. Medido en la
 * página real de staging: 84px de ancho dentro de una columna de 280px, y el
 * contenido en 469px dentro de una de 689px. Con esta regla, 280px y 689px.
 *
 * El selector va a 0,4,0 a propósito, en vez de empatar a 0,2,0 y confiar en
 * el orden de los archivos: nuestro CSS no declara dependencia de los de
 * WooCommerce —hacerlo sería peor, porque si un tema los quita `wp_enqueue_style`
 * se salta el nuestro entero— así que el orden de carga no está garantizado.
 *
 * `woocommerce-smallscreen.css` ya los pone a `width: 100%` por debajo de
 * 768px; ahí `auto` da lo mismo, porque la rejilla ya es de una columna.
 */
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
    float: none;
    width: auto;
}

/* Y quitar su clearfix, que en una rejilla descoloca las dos columnas.
 *
 * `woocommerce-layout.css` trae también:
 *
 *     .woocommerce::before, .woocommerce::after { content: " "; display: table; }
 *
 * Es la limpieza de flotantes de toda la vida, y con `float` no molesta. Pero
 * **en un contenedor de rejilla los pseudo-elementos son ítems de rejilla**:
 * el `::before` se quedaba con la primera celda, la barra lateral se iba a la
 * segunda y el contenido bajaba a la fila de abajo. Medido en el HTML real con
 * sesión: barra 689px y contenido 280px, es decir, cambiados. Con esto, 280px
 * y 689px.
 *
 * Cuesta de encontrar porque un pseudo-elemento no aparece en `children` ni en
 * el inspector como nodo: hay que preguntar por `getComputedStyle(el, '::before')`.
 *
 * Sin flotantes que limpiar —los acabamos de quitar arriba— el clearfix no
 * hace ninguna falta.
 */
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after {
    content: none;
}

/* ---------------------------------------------------------------------------
 * Barra lateral
 * ------------------------------------------------------------------------ */

/* Sin `position: sticky` por decisión del dueño (2026-08-11): la barra lateral
   se queda quieta y es el contenido el que se fija. El export de Figma lo
   tenía al revés (`sticky top-24` en el `<aside>`), pero manda lo pedido. */
.ccma-nav {
    padding: 24px;
    background: var(--ccma-surface);
    border-radius: var(--ccma-radius-card);
    box-shadow: var(--ccma-shadow);
}

.ccma-nav__user {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}

.ccma-nav__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 12px;
    border: 2px solid var(--ccma-line);
    border-radius: 50%;
    background: var(--ccma-hover);
    color: #9ca3af;
}

.ccma-nav__avatar svg {
    width: 42px;
    height: 42px;
}

.ccma-nav__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ccma-ink);
}

.ccma-nav__email {
    margin: 4px 0 0;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--ccma-muted);
    /* Un correo largo no debe ensanchar la columna ni salirse de la tarjeta. */
    overflow-wrap: anywhere;
}

.ccma-nav__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ccma-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--ccma-radius-sm);
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--ccma-ink-soft);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.ccma-nav__link:hover,
.ccma-nav__link:focus-visible {
    background: var(--ccma-hover);
    color: var(--ccma-ink);
}

.ccma-nav__icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
}

.ccma-nav__item.is-active > .ccma-nav__link {
    background: var(--ccma-red-soft);
    color: var(--ccma-red-text);
    font-weight: 500;
}

/* Cerrar sesión: separado del resto, para que no se pulse por inercia. */
.ccma-nav__item--logout {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ccma-line-soft);
}

.ccma-nav__item--logout .ccma-nav__link:hover,
.ccma-nav__item--logout .ccma-nav__link:focus-visible {
    background: var(--ccma-red-soft);
    color: var(--ccma-red-text);
}

/* ---------------------------------------------------------------------------
 * Móvil: la barra lateral pasa a pestañas deslizables
 *
 * Decisión del dueño (2026-08-11). Apilada encima del contenido se comía unos
 * 370px de alto: al entrar se veía la navegación entera y nada de lo que el
 * cliente venía a ver.
 *
 * Se hace con `overflow-x`, sin JavaScript: si el JS no corre, las pestañas
 * siguen deslizándose y siguen siendo enlaces normales. `account.js` solo
 * añade una mejora encima —traer la pestaña activa a la vista— y su ausencia
 * no rompe nada.
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .ccma-nav {
        /* Sin relleno: el aire lo pone cada pestaña, para que la primera y la
           última puedan pegarse al borde al deslizar. */
        padding: 0;
        /* El degradado del borde derecho avisa de que hay más pestañas. Con
           seis ítems siempre sobra ancho en un móvil, así que no es un adorno
           que engañe: de verdad hay más. */
        position: relative;
    }

    .ccma-nav::after {
        content: "";
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        width: 36px;
        border-radius: 0 var(--ccma-radius-card) var(--ccma-radius-card) 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--ccma-surface) 72%);
        pointer-events: none;
    }

    /* El nombre y el correo se van: 130px de alto para decirle al cliente su
       propio nombre. El saludo del escritorio ya lo hace, y el correo está en
       "Datos de la cuenta". */
    .ccma-nav__user {
        display: none;
    }

    .ccma-nav__list {
        flex-direction: row;
        gap: 0;
        overflow-x: auto;

        /* Sin esto la tira NO se arrastra con el dedo. Reportado por el dueño
         * en su movil, y no salia en el navegador de escritorio.
         *
         * Con el valor por omisión (`auto`) el navegador decide el eje del
         * gesto en los primeros píxeles de movimiento. Sobre una tira de 48px
         * de alto, el pulgar casi nunca va perfectamente horizontal: en cuanto
         * la componente vertical manda, el gesto se lo queda el
         * desplazamiento de la página y se bloquea en vertical hasta que
         * levantas el dedo. La tira no llega a moverse.
         *
         * `pan-x` le dice al navegador que aquí solo se desplaza en
         * horizontal, así que no entrega el gesto a la página. Es lo que hacen
         * las barras de pestañas nativas.
         *
         * `pinch-zoom` se deja a propósito: sin él, quien necesite ampliar la
         * pantalla no podría hacerlo con los dedos sobre las pestañas.
         *
         * A cambio: un arrastre vertical que EMPIECE sobre las pestañas no
         * desplaza la página. Son 48px, y es el comportamiento habitual. */
        touch-action: pan-x pinch-zoom;

        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        /* La barra de desplazamiento horizontal sobre unas pestañas de 44px de
           alto ocupa un tercio y se ve como un fallo. El degradado y el propio
           corte de la última pestaña ya dicen que hay más. */
        scrollbar-width: none;
    }

    .ccma-nav__list::-webkit-scrollbar {
        display: none;
    }

    .ccma-nav__item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* Pestaña, no fila de menú: subrayado en vez de fondo, y el texto en una
       sola línea para que no se parta al estrecharse. */
    .ccma-nav__link {
        gap: 8px;
        padding: 14px 14px 12px;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        white-space: nowrap;
    }

    .ccma-nav__item.is-active > .ccma-nav__link {
        background: none;
        border-bottom-color: var(--ccma-red);
        color: var(--ccma-red-text);
    }

    /* "Salir" se separa con una línea vertical, no horizontal: en una fila la
       de arriba no separaría nada. */
    .ccma-nav__item--logout {
        margin: 0 0 0 4px;
        padding: 0 0 0 4px;
        border-top: 0;
        border-left: 1px solid var(--ccma-line-soft);
    }

    /* Hueco al final para que la última pestaña no quede debajo del degradado
       cuando se llega al tope del desplazamiento. */
    .ccma-nav__list::after {
        content: "";
        flex: 0 0 28px;
    }
}

/* ---------------------------------------------------------------------------
 * Contenido
 *
 * Por defecto el contenedor de WooCommerce ES la tarjeta: así los endpoints
 * nativos (pedidos, direcciones, datos de la cuenta) quedan bien sin tocar sus
 * plantillas. El escritorio, que trae sus propias tarjetas, lo desactiva.
 * ------------------------------------------------------------------------ */

/* El contenido es el que se fija, por decisión del dueño (2026-08-11).
   `align-items: start` en la rejilla es lo que lo permite: sin eso el hijo se
   estira a toda la altura de la fila y `sticky` no tendría contra qué moverse. */
.woocommerce-MyAccount-content {
    position: sticky;
    top: 24px;
    padding: 28px;
    background: var(--ccma-surface);
    border-radius: var(--ccma-radius-card);
    box-shadow: var(--ccma-shadow);
    color: var(--ccma-ink-soft);
}

@media (max-width: 900px) {
    .woocommerce-MyAccount-content {
        position: static;
    }
}

.woocommerce-MyAccount-content:has(> .ccma-dashboard) {
    padding: 0;
    background: none;
    box-shadow: none;
}

/* Al navegar sin recarga, `account.js` lleva el foco aquí para que un lector
   de pantalla anuncie la pantalla nueva. Es foco por código, no del teclado:
   no debe dibujar cerco. El de los enlaces y campos sigue intacto. */
.woocommerce-MyAccount-content[tabindex="-1"]:focus {
    outline: none;
}

/* Señal de que algo está pasando mientras llega la respuesta. Sin esto, en
   una conexión lenta se pulsa un ítem del menú y no ocurre nada visible
   durante un segundo, que se lee como "no funciona". `aria-busy` ya lo pone
   el JS; aquí solo se le da forma.

   Esta atenuación cubre los primeros 180ms. Si la respuesta tarda más, entra
   el esqueleto y entonces la atenuación estorba: se cancela abajo. */
.woocommerce-MyAccount-content[aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Esqueleto de carga
 *
 * Los valores son los de `ccm-checkout` (`--ccmck-skel-base`, `--ccmck-skel-hi`,
 * barrido de 1.3s), portados a mano para que las dos esperas de la tienda se
 * vean iguales. Si allí se cambian, aquí también: son plugins distintos y no
 * comparten hoja.
 * ------------------------------------------------------------------------ */

.woocommerce-account {
    --ccma-skel-base: #e9e9ee;
    --ccma-skel-hi: #f4f4f7;
}

/* Con el esqueleto puesto, la atenuación sobra: dejaría las barras lavadas. */
.woocommerce-MyAccount-content[aria-busy="true"]:has(> .ccma-skel) {
    opacity: 1;
}

/* El escritorio no lleva tarjeta contenedora, y su esqueleto tampoco. */
.woocommerce-MyAccount-content:has(> .ccma-skel--escritorio) {
    padding: 0;
    background: none;
    box-shadow: none;
}

@keyframes ccmaBarrido {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.ccma-skel__bar,
.ccma-skel__tile {
    display: block;
    border-radius: 6px;
    background-color: var(--ccma-skel-base);
    background-image: linear-gradient(90deg, var(--ccma-skel-base) 0, var(--ccma-skel-hi) 90px, var(--ccma-skel-base) 180px);
    background-size: 600px 100%;
    background-repeat: no-repeat;
    animation: ccmaBarrido 1.3s linear infinite;
}

.ccma-skel__panel {
    padding: 24px;
    background: var(--ccma-surface);
    border-radius: var(--ccma-radius-card);
    box-shadow: var(--ccma-shadow);
}

.ccma-skel--escritorio .ccma-skel__panel {
    margin-bottom: 20px;
}

.ccma-skel__bar {
    height: 12px;
    margin-bottom: 14px;
}

.ccma-skel__bar:last-child {
    margin-bottom: 0;
}

.ccma-skel__bar--title {
    width: 38%;
    height: 18px;
    margin-bottom: 20px;
}

.ccma-skel__bar--wide {
    width: 100%;
}

/* Las filas van a anchos distintos: un bloque de barras iguales parece un
   fallo de pintado, no algo cargando. */
.ccma-skel__bar--fila {
    height: 16px;
    margin-bottom: 18px;
}

.ccma-skel__bar--fila:nth-child(2n) {
    width: 82%;
}

.ccma-skel__bar--fila:nth-child(3n) {
    width: 64%;
}

.ccma-skel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.ccma-skel__card {
    padding: 18px;
    border: 1px solid var(--ccma-line);
    border-radius: var(--ccma-radius);
    background: var(--ccma-surface);
}

.ccma-skel__tile {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: var(--ccma-radius-sm);
}

.ccma-skel__card .ccma-skel__bar--label {
    width: 62%;
    height: 14px;
    margin-bottom: 10px;
}

.ccma-skel__card .ccma-skel__bar--text {
    width: 90%;
    height: 11px;
    margin-bottom: 0;
}

/* --- Esqueleto de la lista de pedidos ---
   Copia la forma de lo que llega: fila de pastillas y tarjetas con foto. Con el
   esqueleto genérico de barras, cambiar de filtro daba un salto — aparecían
   cinco líneas finas y las sustituían dos bloques altos. */

.ccma-skel__chips {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.ccma-skel__chip {
    display: block;
    width: 88px;
    height: 36px;
    border-radius: 999px;
    background-color: var(--ccma-skel-base);
    background-image: linear-gradient(90deg, var(--ccma-skel-base) 0, var(--ccma-skel-hi) 90px, var(--ccma-skel-base) 180px);
    background-size: 320px 100%;
    background-repeat: no-repeat;
    animation: ccma-skel 1.1s ease-in-out infinite;
}

/* Anchos distintos: cuatro pastillas idénticas no se parecen a "Todos,
   Pendientes, En proceso, Completados". */
.ccma-skel__chip:first-child {
    width: 66px;
}

.ccma-skel__chip:last-child {
    width: 104px;
}

.ccma-skel__order {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid var(--ccma-line);
    border-radius: var(--ccma-radius-card);
    background: var(--ccma-surface);
}

.ccma-skel__order .ccma-skel__tile {
    width: 64px;
    height: 64px;
    margin-bottom: 0;
    border-radius: 10px;
    flex: 0 0 auto;
}

.ccma-skel__lines {
    display: block;
    flex: 1 1 auto;
}

.ccma-skel__order .ccma-skel__bar--label {
    width: 58%;
    height: 14px;
    margin-bottom: 10px;
}

.ccma-skel__order .ccma-skel__bar--text {
    width: 34%;
    height: 11px;
    margin-bottom: 0;
}

/* Quien pide menos movimiento se queda con las barras quietas: la señal de
   "esto está cargando" no se pierde, solo deja de moverse. */
@media (prefers-reduced-motion: reduce) {
    .ccma-skel__bar,
    .ccma-skel__tile,
    .ccma-skel__chip {
        animation: none;
        background-image: none;
    }
}

@media (max-width: 900px) {
    .woocommerce-MyAccount-content {
        padding: 20px;
    }
}

.ccma-card {
    padding: 24px;
    margin-bottom: 20px;
    background: var(--ccma-surface);
    border-radius: var(--ccma-radius-card);
    box-shadow: var(--ccma-shadow);
}

.ccma-card:last-child {
    margin-bottom: 0;
}

.ccma-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.ccma-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ccma-ink);
}

/* Botón fantasma rojo: "Editar" del mockup. */
.ccma-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--ccma-radius-sm);
    background: none;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ccma-red-text);
    text-decoration: none;
    transition: background-color .15s ease;
}

.ccma-ghost:hover,
.ccma-ghost:focus-visible {
    background: var(--ccma-red-soft);
    color: var(--ccma-red-strong);
}

.ccma-ghost svg {
    width: 15px;
    height: 15px;
}

/* Campos en solo lectura del perfil. */
.ccma-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    margin: 0;
}

.ccma-field__label {
    display: block;
    margin-bottom: 3px;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--ccma-muted);
}

.ccma-field__value {
    margin: 0;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ccma-ink);
    overflow-wrap: anywhere;
}

.ccma-field__value--empty {
    font-weight: 400;
    color: var(--ccma-muted);
}

/* ---------------------------------------------------------------------------
 * Escritorio: rejilla de accesos
 * ------------------------------------------------------------------------ */

.ccma-dashboard__greeting {
    margin: 0 0 4px;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ccma-ink);
}

.ccma-dashboard__sub {
    margin: 0 0 20px;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--ccma-muted);
}

.ccma-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ccma-dashboard__card-link {
    display: block;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--ccma-line);
    border-radius: var(--ccma-radius);
    background: var(--ccma-surface);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ccma-dashboard__card-link:hover,
.ccma-dashboard__card-link:focus-visible {
    border-color: var(--ccma-red);
    box-shadow: var(--ccma-shadow-hover);
    transform: translateY(-1px);
}

/* Baldosa roja del ícono, tal cual el mockup. */
.ccma-dashboard__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: var(--ccma-radius-sm);
    background: linear-gradient(135deg, #ff2b2b, var(--ccma-red));
    color: #fff;
}

.ccma-dashboard__card-icon svg {
    width: 21px;
    height: 21px;
}

.ccma-dashboard__card-label {
    display: block;
    margin-bottom: 3px;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ccma-ink);
}

.ccma-dashboard__card-text {
    display: block;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--ccma-muted);
}

/* Quien no soporte :has() vería el degradado sobre otra tarjeta; se evita
   quitándole la sombra al contenedor sin depender de ese selector. */
@supports not selector(:has(*)) {
    .woocommerce-MyAccount-content {
        padding: 20px;
    }
}

/* ---------------------------------------------------------------------------
 * Acceso: entrar y crear cuenta (sin sesión, sin lateral)
 *
 * Recreado del archivo de Figma que entregó el dueño (nodos 3:39579 y 7:731).
 * Del diseño se toman composición, proporciones y radios; los colores son los
 * de CCM, por decisión suya, para que la cuenta no sea la única pantalla de la
 * tienda con otra paleta.
 *
 * Correspondencia con los valores leídos del archivo, y por qué cambian:
 *
 *   tarjeta      353x510 r28 borde 5px blanco   ->  420px máx, r28, borde 5px
 *   controles    277x34  r12                    ->  ancho completo, 46px, r12
 *   título       Inter 600 16px                 ->  22px
 *   etiquetas    Inter 600 12px                 ->  13px
 *   apagado      Inter 400 12px #757575         ->  13px #757575 (4.61:1, pasa)
 *   fondo        foto oscura + capa #111111     ->  degradado, sin imagen
 *
 * La escala sube porque el original está pensado a 12px de texto y 34px de alto
 * de control: eso deja las zonas pulsables al filo del mínimo de 24x24 y va
 * contra el trabajo de legibilidad de la auditoría. Las proporciones y los
 * radios se mantienen.
 * ------------------------------------------------------------------------ */

/* Banda oscura a todo el ancho con la tarjeta centrada. No se oscurece el
   <body> entero: esta página lleva la cabecera y el pie del sitio, que son
   claros, y un fondo oscuro detrás de ellos quedaría fuera de lugar. */
/* Se acota por lo que HAY en la pagina, no por si hay sesion.
 *
 * Antes era `:not(.logged-in)`, y eso dejaba un caso roto: `/account/
 * lost-password/` **con sesion abierta** lo pinta WooCommerce fuera del area de
 * cuenta —sin barra lateral y sin `.woocommerce-MyAccount-content`— asi que la
 * tarjeta quedaba sobre fondo claro cuando esta disenada para el oscuro.
 * Verificado en el navegador del dueno. Con `:has()` la banda acompana a la
 * tarjeta siempre que aparezca. */
.woocommerce-account .woocommerce:has(> .ccma-access) {
    display: flex;
    /* En columna, no en fila. Los avisos de WooCommerce son hermanos de la
       tarjeta, así que en fila se convertían en un segundo ítem flex y el error
       de "usuario o contraseña incorrectos" salía flotando A LA IZQUIERDA de la
       tarjeta, sobre el fondo oscuro. En columna caen encima, que es donde se
       leen. */
    flex-direction: column;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: 64px 16px 72px;
    /* Negro a gris oscuro, por decisión del dueño (2026-08-11). Antes llevaba
       además dos resplandores, uno rojo y otro violeta; se quitan. */
    background: linear-gradient(160deg, #000 0%, #1c1c1c 55%, #2e2e2e 100%);
}

/* Y sin su clearfix: en un contenedor flex los pseudo-elementos de WooCommerce
   son ítems flex y añadirían ancho. Es el mismo problema que ya descolocó la
   rejilla de la cuenta; aquí se corta antes de que aparezca. */
.woocommerce-account .woocommerce:has(> .ccma-access)::before,
.woocommerce-account .woocommerce:has(> .ccma-access)::after {
    content: none;
}

@media (max-width: 600px) {
    .woocommerce-account .woocommerce:has(> .ccma-access) {
        padding: 28px 12px 40px;
    }
}

/* `.ccma-title--acceso` ya no necesita reglas propias: desde que el título va
   oculto solo para lectores de pantalla, su geometría la pone `.ccma-title` y
   cualquier margen o alineación de aquí solo estorbaría. */

.ccma-access {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    padding: 36px 28px 32px;
    /* Radio 28 y borde de 5px, del diseño. El borde es blanco traslúcido y no
       blanco puro: sobre una tarjeta blanca, un borde blanco no se vería, y lo
       que hace en el mockup es separar la tarjeta del fondo oscuro. */
    border: 5px solid rgba(255, 255, 255, .5);
    border-radius: 28px;
    background: var(--ccma-surface);
    /* La primera sombra es la del diseño (4 4 blur 4 al 25%); la segunda le da
       el asiento que a ese tamaño de tarjeta el original no necesitaba. */
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .25), 0 26px 60px rgba(0, 0, 0, .3);
}

@media (max-width: 480px) {
    .ccma-access {
        padding: 28px 20px 24px;
        border-width: 4px;
        border-radius: 22px;
    }
}

/* La recuperación de contraseña también se ve con sesión abierta, y ahí ya va
   dentro de la tarjeta del contenido: no se anida una tarjeta en otra, ni se
   arrastra el borde ni la sombra. */
.woocommerce-MyAccount-content .ccma-access {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* --- Cabecera de la tarjeta: logo, título, subtítulo --- */

.ccma-access__head {
    margin-bottom: 22px;
    text-align: center;
}

/* Círculo de 48px, del diseño.
 *
 * En el mockup el círculo es blanco con borde blanco y se distingue porque la
 * tarjeta es crema. Sobre nuestra tarjeta blanca eso es invisible — visto en el
 * navegador del dueño: el logo quedaba flotando sin nada alrededor. Se consigue
 * el mismo efecto al revés, con el círculo en gris muy claro. */
.ccma-access__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    padding: 9px;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ccma-hover);
}

.ccma-access__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ccma-access__title {
    margin: 0 0 4px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ccma-ink);
}

/* 18px y no 0: sin margen, la etiqueta del primer campo quedaba a 3px del
   subtitulo — medido en la pantalla de recuperacion. En la de acceso no se
   notaba porque debajo va el boton social, que trae su propio margen. */
.ccma-access__sub {
    margin: 0 0 18px;
    font-size: .8125rem;
    line-height: 1.5;
    color: #757575;
}

/* --- Botón social y separador --- */

/* Fila de acceso social.
 *
 * En el diseño son tres pastillas contorneadas de 88x32 (radio 12, borde 1px
 * #757575) **solo con el icono**, repartidas a lo ancho de la tarjeta. Aquí
 * solo hay Google, así que se conserva lo que define esa fila —pastilla
 * contorneada, sin relleno, y sin texto— y se mantiene la proporción del
 * original: 88 de 277 es un tercio del ancho, así que aquí ronda los 112.
 *
 * A cambio, el botón deja de decir "Iniciar con Google". Es lo que hace el
 * diseño; el nombre accesible sigue estando para lectores de pantalla, y si
 * algún cliente se queda dudando, volver a mostrar la etiqueta es quitar una
 * línea de aquí abajo. */
.ccma-access__social {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.ccma-access__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    font-size: .8125rem;
    line-height: 1;
    color: #757575;
    text-align: center;
}

/* La línea va en el gris de los bordes de campo, no en el de las separaciones:
   sobre blanco, `--ccma-line` (#e8e8e8) casi no se veía — visto en el navegador
   del dueño. En el mockup era blanca y se distinguía porque la tarjeta es crema. */
.ccma-access__divider::before,
.ccma-access__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d1d1d1;
}

/* --- Pestañas: entrar / crear cuenta ---
 *
 * Son dos `<input type="radio">` de verdad con sus `<label>`, no `role="tab"`
 * de adorno: funcionan sin JavaScript, se recorren con el teclado sin escribir
 * una línea, y un lector de pantalla las anuncia como lo que son.
 * ------------------------------------------------------------------------ */

.ccma-access__tabs {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Los radios quedan fuera de la vista pero SIGUEN pudiendo recibir foco: con
   `display: none` el teclado no llegaría a ellos y las pestañas dejarían de
   poder cambiarse sin ratón. */
.ccma-access__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    pointer-events: none;
}

.ccma-access__tablist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 22px;
    padding: 4px;
    border-radius: 12px;
    background: #f4f4f6;
}

.ccma-access__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 9px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: #757575;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

#ccma-vista-acceso:checked ~ .ccma-access__tablist label[for="ccma-vista-acceso"],
#ccma-vista-registro:checked ~ .ccma-access__tablist label[for="ccma-vista-registro"] {
    background: var(--ccma-surface);
    color: var(--ccma-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* El foco se dibuja sobre la pestaña, porque el radio en sí no se ve. */
#ccma-vista-acceso:focus-visible ~ .ccma-access__tablist label[for="ccma-vista-acceso"],
#ccma-vista-registro:focus-visible ~ .ccma-access__tablist label[for="ccma-vista-registro"] {
    outline: 2px solid var(--ccma-red);
    outline-offset: 2px;
}

/* Solo se ocultan los paneles que están DENTRO del grupo de pestañas: si el
   registro está desactivado en WooCommerce no hay pestañas, y sin este ámbito
   se escondería el formulario de acceso entero. */
.ccma-access__tabs .ccma-access__panel {
    display: none;
}

#ccma-vista-acceso:checked ~ .ccma-access__panel--login,
#ccma-vista-registro:checked ~ .ccma-access__panel--register {
    display: block;
}

/* Fuera la caja que WooCommerce le pone al formulario.
 *
 * `woocommerce.css` trae:
 *
 *     .woocommerce form.login,
 *     .woocommerce form.register { border: 1px solid #cfc8d8; border-radius: 5px;
 *                                  padding: 20px; margin: 2em 0 }
 *
 * Es de cuando el formulario de acceso iba suelto en la página y necesitaba su
 * propio marco. Dentro de nuestra tarjeta produce un recuadro dentro del
 * recuadro, con 20px de relleno de más y 32px de margen arriba y abajo — que es
 * de donde salía el hueco muerto al final de la tarjeta.
 *
 * Es (0,2,1); esto va a (0,3,1). Visto en el navegador del dueño, no en una
 * reconstrucción: es el fallo que llevaba varias rondas sin salir. */
.woocommerce-account .ccma-access form.login,
.woocommerce-account .ccma-access form.register {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* --- Fila de "recuérdame" y "olvidé mi contraseña" --- */

.ccma-access__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

/* Especificidad (0,4,0) a propósito, y el motivo merece quedar escrito porque
 * no se ve venir.
 *
 * `woocommerce.css` trae
 * `.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme
 * { display: inline-block }`, que es (0,3,0) — lo mismo que un selector con
 * `.woocommerce-account .ccma-access__row .woocommerce-...`. Al empatar decide
 * el orden de los archivos, y su hoja carga después: ganaba `inline-block`.
 *
 * Y aquí está lo que cuesta ver: esta etiqueta es **ítem flex** (su padre
 * `.ccma-access__row` es flex), y a un ítem flex el navegador le convierte
 * `inline-block` en `block`. Por eso al medir salía `display: block` sin que
 * ninguna regla del sitio declarase `block` en ningún sitio. Resultado en
 * pantalla: la casilla y su texto en líneas distintas. */
.woocommerce-account .ccma-access .ccma-access__row .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.3;
}

.ccma-access .woocommerce-LostPassword {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.3;
    white-space: nowrap;
}

.ccma-access .woocommerce-LostPassword a {
    /* Subrayado, como en el diseño. */
    color: #757575;
    text-decoration: underline;
}

.ccma-access .woocommerce-LostPassword a:hover {
    color: var(--ccma-red-text);
}

.ccma-access__foot {
    margin: 20px 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: #757575;
    text-align: center;
}

.ccma-access__foot a {
    color: var(--ccma-red-text);
    font-weight: 500;
    text-decoration: none;
}

.ccma-access__foot a:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * Formularios — los mismos valores que ccm-checkout
 *
 * Portados a mano desde `ccm-checkout/assets/ccmck-checkout.css` (pedido del
 * dueño, 2026-08-11) para que los dos formularios de la tienda se vean iguales.
 * Si allí se cambian, aquí hay que cambiarlos también: son dos plugins
 * distintos y no comparten hoja.
 *
 * Lo que NO se copia del checkout: allí las etiquetas se ocultan
 * (`display: none`) y se trabaja con marcadores dentro del campo, porque es un
 * flujo de compra de un tirón. Aquí son pantallas de consulta y edición, y las
 * etiquetas se quedan visibles.
 * ------------------------------------------------------------------------ */

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
    display: block;
    margin: 0 0 16px;
    padding: 0;
}

/* Se excluye `.ccma-access__tab` porque las pestañas de acceso SON `<label>`
 * —van atadas a un radio para funcionar sin JavaScript— y esta regla, que es
 * (0,3,1), le ganaba a `.ccma-access__tab` (0,1,0). Resultado verificado en el
 * navegador: las pestañas salían `display: block` a 12px con margen inferior,
 * o sea el texto arriba a la izquierda del pastilla en vez de centrado.
 *
 * El arreglo va aquí y no subiendo la especificidad de la pestaña porque la
 * causa es esta regla: pretende dar formato a etiquetas **de campo**, y una
 * pestaña no lo es. */
.woocommerce-account .woocommerce label:not(.woocommerce-form__label-for-checkbox):not(.ccma-access__tab) {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: #666;
}

/* 0,4,1 a propósito: `woocommerce.css` pone `.woocommerce form .form-row
   .required { color: #a00 }` a 0,3,1. Ver la nota de especificidad de abajo. */
.woocommerce-account .woocommerce form .form-row .required,
.woocommerce-account .woocommerce .required {
    border: 0;
    color: var(--ccma-red-text);
    text-decoration: none;
}

/* La nota de ayuda bajo un campo ("Así será como se mostrará tu nombre…"),
   que WooCommerce mete en cursiva. */
.woocommerce-account .woocommerce form .form-row em {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
    color: var(--ccma-muted);
}

/* Nota de especificidad, y es la que costó una ronda de más.
 *
 * `woocommerce.css` estiliza los campos con
 *
 *     .woocommerce form .form-row .input-text,
 *     .woocommerce form .form-row select        { padding: .5em; border-radius: var(--wc-form-border-radius); ... }
 *
 * que es **0,3,1**. El selector obvio de aquí,
 * `.woocommerce-account .woocommerce input[type="text"]`, es **0,3,1 también**:
 * empatan, y como `woocommerce.css` se encola después, ganaba WooCommerce. Se
 * veía en el navegador: padding 7px (su `.5em`) y radio 4px en vez de los
 * nuestros.
 *
 * Por eso se baja un nivel más, a **0,4,1**, igual que hace ccm-checkout con
 * `.ccmck .checkout-main .form-row .input-text`. `:is()` toma la especificidad
 * de su argumento más específico, así que la lista de dentro cuenta como una
 * clase y el total no depende de qué campo coincida.
 *
 * Empatar y confiar en el orden de los archivos no vale: nuestro CSS no
 * declara dependencia de los de WooCommerce, y no debe hacerlo — si un tema
 * los quita, `wp_enqueue_style` se salta el nuestro entero.
 */
.woocommerce-account .woocommerce form .form-row :is(.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea),
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="tel"],
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce input[type="number"],
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ccma-ink);
    transition: border-color .2s;
}

.woocommerce-account .woocommerce textarea {
    min-height: 90px;
    resize: vertical;
}

/* Los desplegables de select2 (Departamento en el formulario de dirección).
 *
 * WooCommerce oculta el `<select>` nativo y pinta su propio marcado, así que
 * las reglas de campo de abajo no lo alcanzan. Medido en el navegador del
 * dueño, quedaba visiblemente distinto de los campos de al lado:
 *
 *     select2      39px de alto, borde rgba(32,7,7,.8), radio 4, texto 16px #444
 *     campo normal 45px,          borde #d1d1d1,        radio 6, texto 14px #1a1a1a
 *
 * Los `!important` no son pereza: select2 trae los suyos.
 */
.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection {
    box-sizing: border-box !important;
    height: 45px !important;
    padding: 0 !important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 6px !important;
    background: #fff !important;
}

.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection__rendered {
    padding: 0 38px 0 14px !important;
    font-size: 14px !important;
    line-height: 43px !important;
    color: var(--ccma-ink) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection__placeholder {
    color: #aaa !important;
}

.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection__arrow {
    height: 44px !important;
    right: 8px !important;
}

.woocommerce-account .woocommerce-MyAccount-content .select2-container--open .select2-selection,
.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection:hover {
    border: 2px solid #000 !important;
}

/* Desplegables nativos: el tema les pone `appearance: none` y no pone flecha,
 * así que un <select> se veía exactamente igual que un campo de texto —
 * verificado en el formulario de dirección de staging. Se le devuelve una, con
 * el mismo chevron y las mismas medidas que ccm-checkout.
 *
 * `:is([name])` sube el selector a (0,5,2) para ganar a la regla de campo de
 * arriba, que es (0,4,2), sin depender del orden dentro del archivo.
 */
.woocommerce-account .woocommerce form .form-row select:is([name]),
.woocommerce-account .woocommerce select:is([name]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 38px 12px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    cursor: pointer;
}

/* En foco y hover el padding baja 1px por el borde de 2px, pero el hueco del
   chevron (38px) se mantiene. */
.woocommerce-account .woocommerce form .form-row select:is([name]):is(:hover, :focus),
.woocommerce-account .woocommerce select:is([name]):is(:hover, :focus) {
    padding: 11px 37px 11px 13px;
}

.woocommerce-account .woocommerce form .form-row ::placeholder,
.woocommerce-account .woocommerce ::placeholder {
    color: #aaa;
}

/* Foco y hover: borde negro de 2px, y el padding baja 1px por lado para
 * compensarlo y que el campo NO se mueva al pincharlo.
 *
 * El `!important` del radio no es pereza: el kit de Elementor inyecta
 * `border-radius: 100px` en `input:focus` para todo el sitio, y sin esto los
 * campos se vuelven cápsulas al pincharlos. Está documentado igual en
 * ccm-checkout, donde apareció por primera vez.
 */
.woocommerce-account .woocommerce form .form-row :is(.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea):is(:hover, :focus),
.woocommerce-account .woocommerce :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea):is(:hover, :focus) {
    outline: none;
    border: 2px solid #000;
    border-radius: 6px !important;
    padding: 11px 13px;
}

/* Hueco para el ojo de "ver contraseña", que WooCommerce coloca en absoluto
 * dentro del campo (`span.password-input` > `.show-password-input`, a .7em del
 * borde derecho). Sin esto, una contraseña larga se mete bajo el icono.
 *
 * Tiene que ir por encima de la regla de campo de arriba, y ahí me equivoqué
 * al calcularlo: `:is()` toma la especificidad de su argumento **más
 * específico**, y aquella lista incluye `input[type="text"]`, que es (0,1,1) y
 * no (0,1,0). Eso deja la regla base en **(0,4,2)**, no en (0,4,1). Con el
 * selector corto de antes —también (0,4,1)— perdía, y el `padding-right` se
 * quedaba en 14px. Verificado en el navegador. Esta versión es (0,5,2).
 */
.woocommerce-account .woocommerce form .form-row .password-input :is(input[type="password"], input[type="text"]) {
    padding-right: 46px;
}

.woocommerce-account .woocommerce form .form-row .password-input :is(input[type="password"], input[type="text"]):is(:hover, :focus) {
    padding-right: 45px;
}

/* Zonas pulsables: mínimo 24×24 (WCAG 2.2, criterio 2.5.8 nivel AA).
 *
 * Medido en las once pantallas: el ojo de "ver contraseña" salía a 22×22, y
 * varios enlaces sueltos a 19-21px de alto. Los enlaces dentro de una frase
 * están exentos del criterio; estos no lo están, son acciones por su cuenta.
 *
 * El ojo se agranda con relleno, no con tamaño: el icono se queda igual y solo
 * crece la zona que responde al dedo. */
.woocommerce-account .woocommerce .show-password-input {
    right: 6px;
    padding: 9px;
}

.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .ccma-access__foot a,
.woocommerce-account .woocommerce-Address-title a,
.woocommerce-account .woocommerce-orders-table a:not(.button),
.woocommerce-account .woocommerce-table--order-details a:not(.button),
.woocommerce-account .woocommerce-form__label-for-checkbox a {
    display: inline-block;
    padding-block: 3px;
}

/* Texto por debajo de 12px: aparecía en el detalle de un pedido ("vía
   Coordinadora", a 11.2px). No hay motivo para bajar de ahí en una pantalla
   que la gente consulta para resolver dudas de su compra. */
.woocommerce-account .woocommerce-MyAccount-content small,
.woocommerce-account .woocommerce-MyAccount-content .small {
    font-size: .75rem;
}

/* El bloque "Cambio de contraseña" es un <fieldset> sin clase, así que sale
   con el marco y la leyenda encajada del navegador. Se convierte en una
   sección normal separada por una línea. */
.woocommerce-account .woocommerce form fieldset {
    margin: 26px 0 0;
    padding: 22px 0 0;
    border: 0;
    border-top: 1px solid var(--ccma-line);
}

.woocommerce-account .woocommerce form legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 16px;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ccma-ink);
}

/* Nombre y apellidos en dos columnas.
 *
 * WooCommerce lo resuelve con `float` + `width: 47%` (0,3,0). Se pasa a
 * rejilla, que no necesita limpieza de flotantes y colapsa sola en móvil.
 *
 * Los `content: none` NO son de adorno: `woocommerce-layout.css` pone el mismo
 * clearfix `::before`/`::after` sobre `.form-row` que ya descolocó la rejilla
 * principal de la cuenta. Aquí el contenedor de rejilla es el <form>, y si
 * mañana alguien convierte un `.form-row` en rejilla o flex, se lo encuentra.
 */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.woocommerce-account .woocommerce-EditAccountForm::before,
.woocommerce-account .woocommerce-EditAccountForm::after,
.woocommerce-account .woocommerce-address-fields__field-wrapper::before,
.woocommerce-account .woocommerce-address-fields__field-wrapper::after {
    content: none;
}

/* Por defecto, cada fila ocupa el ancho entero. */
.woocommerce-account .woocommerce-EditAccountForm > *,
.woocommerce-account .woocommerce-address-fields__field-wrapper > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.woocommerce-account .woocommerce form .form-row-first,
.woocommerce-account .woocommerce form .form-row-last {
    float: none;
    width: auto;
}

.woocommerce-account .woocommerce form .form-row-first {
    grid-column: 1;
}

.woocommerce-account .woocommerce form .form-row-last {
    grid-column: 2;
}

@media (max-width: 600px) {
    .woocommerce-account .woocommerce-EditAccountForm,
    .woocommerce-account .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    .woocommerce-account .woocommerce form .form-row-first,
    .woocommerce-account .woocommerce form .form-row-last {
        grid-column: 1;
    }
}

.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button[type="submit"],
.woocommerce-account .woocommerce input[type="submit"] {
    display: inline-block;
    width: auto;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--ccma-radius-sm);
    background: var(--ccma-red);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

/* Hover en el negro del kit (`Secundario`, #191818), por decisión del dueño.
   Blanco sobre ese negro da 17:1, así que el contraste sube en el hover. */
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce button[type="submit"]:hover,
.woocommerce-account .woocommerce input[type="submit"]:hover {
    background: var(--ccma-red-strong);
    color: #fff;
}

/* En la tarjeta de acceso el botón manda: ancho completo.
 *
 * Va DESPUÉS de la regla genérica de botones y con la misma especificidad
 * (0,3,0) a propósito: `.woocommerce-account .woocommerce .button` pone
 * `width: auto`, y con menos peso o antes en el archivo esta regla no se
 * aplicaba — verificado en el navegador, los dos botones salían pequeños. */
.woocommerce-account .ccma-access button[type="submit"] {
    width: 100%;
}

/* Casillas: términos y "recuérdame". */
.woocommerce-account .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--ccma-ink-soft);
    cursor: pointer;
}

.woocommerce-account .woocommerce-form__input-checkbox {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--ccma-red);
}

.woocommerce-account .woocommerce-form__label-for-checkbox a {
    color: var(--ccma-red-text);
    text-decoration: underline;
}

/* Botón de Google de Nextend: que no se salga del ancho de la tarjeta. */
.ccma-access .nsl-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Nextend anida tres capas y **el botón que se ve no es el `<a>`**, es un
 * `div.nsl-button` de dentro: ahí están su fondo oscuro `#131314` y su radio 4.
 * Verificado en el navegador — poner el radio en el `<a>` no cambiaba nada de
 * lo visible, y `.nsl-container-buttons` es `inline-grid` a 213px, que era lo
 * que dejaba el botón más estrecho que la tarjeta (213 de 354).
 *
 * Se le da el aspecto del mockup: pastilla contorneada y no rellena, del ancho
 * de la tarjeta y a la misma altura que los campos. El blanco con el "G" a
 * color es una de las variantes que Google admite para su botón, así que no se
 * incumple su guía de marca.
 *
 * Los `!important` no son pereza: Nextend trae los suyos en su propia hoja. */
.ccma-access .nsl-container-buttons {
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
    padding: 0 !important;
}

.ccma-access .nsl-container-buttons > a {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
}

/* La pastilla del diseño: contorneada, sin relleno, y con el ancho proporcional
   al original (un tercio de la fila). */
.ccma-access .nsl-button.nsl-button-default {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 112px !important;
    height: 46px !important;
    border: 1px solid #757575 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ccma-access .nsl-button.nsl-button-default:hover {
    border-color: var(--ccma-ink) !important;
    background: var(--ccma-hover) !important;
}

/* Solo el icono, como en el diseño. El texto se oculta de la vista pero NO de
   los lectores de pantalla: sin él, el botón se anunciaría como un enlace sin
   nombre. */
.ccma-access .nsl-button-default div.nsl-button-label-container {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.ccma-access .nsl-button-default .nsl-button-svg-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ccma-access .nsl-button-default .nsl-button-svg-container svg {
    width: 22px !important;
    height: 22px !important;
}

/* ---------------------------------------------------------------------------
 * Geometría de los controles DENTRO de la tarjeta de acceso
 *
 * El diseño de Figma usa radio 12 en campos y botón; el resto de la cuenta usa
 * 6, que es el de ccm-checkout. Se respeta el del diseño, acotado a esta
 * tarjeta: la pantalla de acceso es una pantalla aparte, la primera que ve el
 * cliente, y ahí el diseño manda.
 *
 * Va DESPUÉS del bloque de formularios a propósito. Ese bloque es (0,4,2) y
 * esto también: a igual especificidad decide el orden, y aquí el orden lo
 * controlamos nosotros porque las dos reglas están en este mismo archivo.
 * ------------------------------------------------------------------------ */

.woocommerce-account .ccma-access form .form-row :is(.input-text, input[type="text"], input[type="email"], input[type="password"], select) {
    height: 46px;
    border-radius: 12px;
}

.woocommerce-account .ccma-access form .form-row :is(.input-text, input[type="text"], input[type="email"], input[type="password"], select):is(:hover, :focus) {
    border-radius: 12px !important;
}

.woocommerce-account .ccma-access button[type="submit"] {
    min-height: 46px;
    border-radius: 12px;
    font-size: .875rem;
}

/* ---------------------------------------------------------------------------
 * Tablas de WooCommerce (pedidos, descargas)
 * ------------------------------------------------------------------------ */

.woocommerce-account .woocommerce table.shop_table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    font-size: .875rem;
}

.woocommerce-account .woocommerce table.shop_table th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--ccma-line);
    font-weight: 600;
    color: var(--ccma-ink);
    text-align: left;
}

.woocommerce-account .woocommerce table.shop_table td {
    padding: 14px 12px;
    border: 0;
    border-bottom: 1px solid var(--ccma-line-soft);
    color: var(--ccma-ink-soft);
}

/* El <address> del detalle de pedido y de la lista de direcciones trae borde y
   radio propios de WooCommerce: otra caja dentro de la tarjeta, igual que la que
   traia `form.login`. Medido en la pantalla del dueño: borde rgba(0,0,0,.1),
   radio 5, relleno 6px 12px. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content address {
    padding: 0;
    border: 0;
    border-radius: 0;
    font-style: normal;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Lista de pedidos
 *
 * Ya no es una tabla. La de WooCommerce tenía cinco columnas que en móvil se
 * convertían en cinco filas de "etiqueta: valor" por pedido, con el número del
 * pedido pesando lo mismo que el estado y sin nada para reconocerlo de un
 * vistazo. Ahora cada pedido es una tarjeta con la foto del artículo.
 *
 * La jerarquía de los botones se queda: las tres acciones no valen lo mismo
 * —pagar cierra la venta, ver es consulta, cancelar destruye algo— y
 * WooCommerce les pone la misma clase `.button` a las tres. Medido antes de
 * esto en la pantalla del dueño: tres bloques rojos idénticos y pegados, de
 * 83x44, 66x44 y 88x44 con -1px de hueco entre ellos.
 * ------------------------------------------------------------------------ */

/* --- Filtros por estado --- */

.ccma-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
    /* Igual que la tira de pestañas del móvil: sin `pan-x` el navegador se
       queda con el gesto para el desplazamiento vertical de la página y la fila
       no se arrastra con el dedo. */
    touch-action: pan-x pinch-zoom;
    scrollbar-width: none;
}

.ccma-filters::-webkit-scrollbar {
    display: none;
}

.ccma-filters__chip {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 1px solid var(--ccma-line);
    border-radius: 999px;
    background: var(--ccma-surface);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ccma-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.ccma-filters__chip:hover {
    border-color: var(--ccma-ink);
    background: var(--ccma-hover);
    color: var(--ccma-ink);
}

/* El activo, en el Secundario del kit (#191818). El rojo se reserva para lo que
   el cliente tiene que hacer —pagar—, no para decir dónde está. */
.ccma-filters__chip--on,
.ccma-filters__chip--on:hover {
    border-color: var(--ccma-red-strong);
    background: var(--ccma-red-strong);
    color: #fff;
}

/* --- Tarjeta de pedido --- */

.ccma-orders {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ccma-card {
    padding: 16px;
    border: 1px solid var(--ccma-line);
    border-radius: var(--ccma-radius-card);
    background: var(--ccma-surface);
}

.ccma-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ccma-line-soft);
}

.ccma-card__id {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ccma-ink);
    text-decoration: none;
}

.ccma-card__id span {
    color: var(--ccma-red-text);
}

.ccma-card__id:hover span {
    text-decoration: underline;
}

.ccma-card__date {
    flex: 0 0 auto;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--ccma-muted);
}

.ccma-card__body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
}

.ccma-card__photo {
    flex: 0 0 auto;
    line-height: 0;
}

.ccma-card__photo img {
    width: 64px;
    height: 64px;
    border: 1px solid var(--ccma-line);
    border-radius: 10px;
    object-fit: cover;
}

.ccma-card__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.ccma-card__product {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ccma-ink);
}

.ccma-card__more,
.ccma-card__qty,
.ccma-card__pay {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--ccma-muted);
}

.ccma-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex: 0 0 auto;
    text-align: right;
}

.ccma-card__total {
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--ccma-muted);
    white-space: nowrap;
}

.ccma-card__total strong {
    font-weight: 700;
    color: var(--ccma-red-text);
}

.ccma-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid var(--ccma-line-soft);
}

/* Vacío: la tarjeta se queda sin la línea de arriba. */
.ccma-card__actions:empty {
    display: none;
}

/* WooCommerce envuelve el botón de recompra en un `<p class="order-again">`.
   `display: contents` deja que el enlace sea el ítem flexible directamente, sin
   un párrafo de por medio que rompa la fila. */
.ccma-card__actions .order-again {
    display: contents;
}

/* --- Jerarquía de los botones ---
   Vale para las tarjetas y para la barra del detalle. */

.woocommerce-account .woocommerce-MyAccount-content .button.pay,
.woocommerce-account .woocommerce-MyAccount-content .button.view,
.woocommerce-account .woocommerce-MyAccount-content .button.cancel,
.woocommerce-account .woocommerce-MyAccount-content .order-again .button {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: var(--ccma-radius-sm);
    font-size: .8125rem;
    white-space: nowrap;
}

/* "Ver": consulta, no venta. Contorneada. */
.woocommerce-account .woocommerce-MyAccount-content .button.view {
    border: 1px solid #d1d1d1;
    background: var(--ccma-surface);
    color: var(--ccma-ink);
}

.woocommerce-account .woocommerce-MyAccount-content .button.view:hover {
    border-color: var(--ccma-ink);
    background: var(--ccma-hover);
    color: var(--ccma-ink);
}

/* "Comprar de nuevo": es una venta, pero no urgente como pagar un pedido
   pendiente. Va en el Secundario del kit para no competir con el rojo. */
.woocommerce-account .woocommerce-MyAccount-content .order-again .button {
    border: 1px solid var(--ccma-red-strong);
    background: var(--ccma-red-strong);
    color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content .order-again .button:hover {
    background: #000;
    color: #fff;
}

/* "Cancelar": destruye algo, así que no compite por la mirada. Se vuelve roja
   solo al ir a pulsarla, que es cuando conviene la advertencia. */
.woocommerce-account .woocommerce-MyAccount-content .button.cancel {
    border: 1px solid transparent;
    background: none;
    color: var(--ccma-muted);
}

.woocommerce-account .woocommerce-MyAccount-content .button.cancel:hover {
    border-color: var(--ccma-red);
    background: var(--ccma-red-soft);
    color: var(--ccma-red-text);
}

/* --- Sin pedidos --- */

.ccma-empty {
    padding: 40px 20px;
    border: 1px dashed var(--ccma-line);
    border-radius: var(--ccma-radius-card);
    text-align: center;
}

.ccma-empty p {
    margin: 0 0 16px;
    font-size: .9375rem;
    color: var(--ccma-ink-soft);
}

/* --- Paginación --- */

.ccma-pager {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

/* La cabecera se lee como cabecera, no como una fila más en negrita. Sigue
   valiendo para las tablas que quedan (descargas, direcciones). */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
    padding-top: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ccma-muted);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a:not(.button) {
    color: var(--ccma-red-text);
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table td a:not(.button):hover {
    text-decoration: underline;
}

/* En móvil la tabla de artículos se desplaza dentro de su tarjeta, no arrastra
   la página. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* --- Móvil estrecho ---
   El bloque del pedido pasa a dos filas: foto + datos arriba, estado e importe
   abajo. Con 375px, las tres columnas dejan el nombre del producto en una tira
   de unos 90px. */

@media (max-width: 560px) {

    .ccma-card__body {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 12px;
    }

    .ccma-card__side {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }

    .ccma-card__photo img {
        width: 56px;
        height: 56px;
    }
}


/* ---------------------------------------------------------------------------
 * Detalle de pedido
 *
 * Cuatro bloques: cabecera, franja de datos, seguimiento y detalle. El marcado
 * es el mismo en las dos anchuras; lo que cambia es la disposición.
 *
 *   - En móvil manda la cabecera compacta (número, fecha · total, estado) y el
 *     seguimiento cae en vertical, como una línea de tiempo.
 *   - En escritorio la cabecera se queda con el número y el estado, la franja
 *     de datos toma el relevo del resumen, y el seguimiento se tumba.
 *
 * La cabecera y la franja dicen cosas que se solapan a propósito: en cada
 * anchura solo se ve una de las dos, y se oculta con `display: none`, que
 * también la saca del árbol de accesibilidad. Así nadie oye la fecha dos veces.
 * ------------------------------------------------------------------------ */

.ccma-order__head {
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--ccma-line);
}

.ccma-order__headrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ccma-order__number {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ccma-ink);
}

.ccma-order__number span {
    color: var(--ccma-red-text);
}

.ccma-order__meta {
    margin: 6px 0 0;
    font-size: .875rem;
    line-height: 1.35;
    color: var(--ccma-muted);
}

.ccma-order__meta span {
    margin: 0 4px;
}

/* Los importes de WooCommerce vienen envueltos en su propio marcado. */
.ccma-order__meta .woocommerce-Price-amount {
    font-weight: 600;
    color: var(--ccma-ink);
}

/* Rótulo de sección. Pequeño y apagado: separa sin robar atención al contenido.

   La separación es `padding`, no `margin`, y no es capricho: el sitio trae un
   reinicio de titulares con `margin: 0 !important`. Medido, el rótulo salía
   pegado al último paso del seguimiento —0px de hueco— y ni siquiera a (0,4,1)
   entraba el margen; solo con `!important`. El `padding` entra a (0,1,0) sin
   pelear, así que se usa eso en vez de escalar. */
.ccma-order__section {
    padding: 30px 0 14px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ccma-muted);
}

/* --- Distintivo de estado ---
   Los cuatro tonos salen de CCMA_Templates::order_status_tone(), que devuelve
   una lista cerrada. */

.ccma-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Pide algo al cliente: pagar, o esperar una confirmación. */
.ccma-badge--espera {
    border-color: #f5d78e;
    background: #fdf6e3;
    color: #8a5a00;
}

/* En marcha, no hay nada que hacer. */
.ccma-badge--curso {
    border-color: #cfdcea;
    background: #f2f7fc;
    color: #1f4e79;
}

.ccma-badge--hecho {
    border-color: #bfe3c4;
    background: #f1faf2;
    color: #226b2c;
}

.ccma-badge--mal {
    border-color: #f4c6cb;
    background: var(--ccma-red-soft);
    color: #a51d29;
}

/* --- Franja de datos clave (solo escritorio) --- */

.ccma-order__facts {
    display: none;
    margin: 0 0 8px;
}

.ccma-order__facts dt {
    margin: 0 0 6px;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--ccma-muted);
}

.ccma-order__facts dd {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ccma-ink);
}

/* --- Seguimiento ---
   De abajo arriba: primero la línea de tiempo vertical del móvil, y a partir de
   900px se tumba. El orden importa, no el gusto: la versión horizontal tiene
   que ganar dentro de la media query, y con la misma especificidad gana la
   última que se declara. */

.ccma-track__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ccma-track__step {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 0 12px;
    padding-bottom: 22px;
}

.ccma-track__step:last-child {
    padding-bottom: 0;
}

/* Conector: del punto de este paso hacia abajo, hasta el siguiente. */
.ccma-track__step::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 0;
    left: 15px;
    width: 2px;
    background: var(--ccma-line);
}

.ccma-track__step:last-child::before {
    content: none;
}

.ccma-track__step--hecho::before {
    background: var(--ccma-red);
}

.ccma-track__dot {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--ccma-line);
    border-radius: 50%;
    background: var(--ccma-surface);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ccma-muted);
}

.ccma-track__step--hecho .ccma-track__dot {
    border-color: var(--ccma-red);
    background: var(--ccma-red);
    color: #fff;
}

/* El paso actual va marcado pero hueco: aún no ha pasado. */
.ccma-track__step--actual .ccma-track__dot {
    border-color: var(--ccma-red);
    color: var(--ccma-red-text);
}

.ccma-track__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ccma-track__title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ccma-ink);
}

.ccma-track__note {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--ccma-muted);
}

.ccma-track__date {
    justify-self: end;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--ccma-muted);
    white-space: nowrap;
}

/* Lo que todavía no ha pasado, apagado. */
.ccma-track__step--pendiente .ccma-track__title {
    font-weight: 500;
    color: var(--ccma-muted);
}

/* --- Artículos --- */

/* La cabecera "PRODUCTO / TOTAL" no aporta: encima hay un rótulo que ya dice
   qué es esto, y cada línea lleva su precio al lado. */
.woocommerce-account .woocommerce-MyAccount-content .ccma-items thead {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-content .ccma-items td {
    padding: 14px 0;
    border-bottom: 1px solid var(--ccma-line-soft);
    background: none;
    vertical-align: top;
}

.woocommerce-account .woocommerce-MyAccount-content .ccma-items tr:last-child td {
    border-bottom: 0;
}

/* El importe, a la derecha, y sin partirse. */
.woocommerce-account .woocommerce-MyAccount-content .ccma-items td.product-total {
    text-align: right;
    white-space: nowrap;
}



.ccma-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ccma-item__photo {
    flex: 0 0 auto;
    line-height: 0;
}

.ccma-item__photo img {
    width: 56px;
    height: 56px;
    border: 1px solid var(--ccma-line);
    border-radius: 10px;
    object-fit: cover;
}

.ccma-item__body {
    display: block;
    min-width: 0;
}

.ccma-item__name {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ccma-ink);
}

/* El nombre es un enlace al producto, y el tema pinta los enlaces de rojo. En
   una lista de una línea eso pasa, pero aquí sale en negrita y a varias líneas:
   un bloque rojo que compite con el distintivo de estado, que es lo que el
   cliente vino a mirar. El enlace se queda —lleva al producto— pero en tinta.

   `tbody td` no sobra: quien pinta el enlace de rojo está en una de las seis
   hojas que el navegador no deja leer por CORS, así que se buscó su peso
   inyectando reglas de especificidad creciente. Resultado medido: (0,4,1)
   pierde y (0,4,3) gana. No lleva `!important` porque la prueba demostró que no
   hace falta: la regla rival no está marcada, solo pesa más. */
.woocommerce-account .woocommerce-MyAccount-content .ccma-items tbody td.product-name a {
    color: inherit;
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .ccma-items tbody td.product-name a:hover,
.woocommerce-account .woocommerce-MyAccount-content .ccma-items tbody td.product-name a:focus-visible {
    color: var(--ccma-red-text);
    text-decoration: underline;
}

.ccma-item__sku {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--ccma-muted);
}

.woocommerce-account .woocommerce-MyAccount-content .ccma-items .product-quantity {
    display: block;
    margin-top: 4px;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--ccma-muted);
}

/* --- Resumen de importes ---
   Dos tarjetas: a la izquierda los conceptos (envío, descuentos, método de
   pago) y a la derecha lo que el cliente compara con su extracto. */

.ccma-sum {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.ccma-sum__card {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--ccma-line);
    border-radius: var(--ccma-radius-card);
}

.ccma-sum__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
}

.ccma-sum__row dt {
    font-size: .875rem;
    line-height: 1.4;
    color: var(--ccma-muted);
}

.ccma-sum__row dd {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
    color: var(--ccma-ink);
}

/* Una nota del cliente es prosa: alineada a la derecha queda dentada. */
.ccma-sum__row--note {
    display: block;
}

.ccma-sum__row--note dd {
    margin-top: 4px;
    font-weight: 400;
    text-align: left;
    color: var(--ccma-ink-soft);
}

/* El total se despega: es la cifra que se compara con lo que cobraron. */
.ccma-sum__row--total {
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--ccma-line);
}

.ccma-sum__row--total dt {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ccma-ink);
}

.ccma-sum__row--total dd {
    font-size: 1.25rem;
    font-weight: 700;
}

/* --- Barra de acciones ---
   Ya no está dentro de la tabla: la pinta CCMA_Templates::print_order_actions()
   justo debajo, así que aquí manda el ancho completo y no la rejilla de
   columnas. La jerarquía de los botones (.pay relleno, .cancel apagado) la pone
   el bloque de la lista de pedidos; esto solo los coloca. */
.ccma-order__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* --- Direcciones --- */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details {
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid var(--ccma-line);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address {
    font-size: .875rem;
    color: var(--ccma-ink-soft);
}

/* --- Novedades del pedido --- */

.ccma-order__notes {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.ccma-order__notes li {
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: var(--ccma-radius);
    background: var(--ccma-hover);
}

.ccma-order__notes .woocommerce-OrderUpdate-meta {
    margin: 0 0 4px;
    font-size: .75rem;
    color: var(--ccma-muted);
}

.ccma-order__notes .woocommerce-OrderUpdate-description p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--ccma-ink-soft);
}

/* --- Escritorio --- */

@media (min-width: 900px) {

    /* El resumen de una línea era para el móvil; aquí lo dice la franja. */
    .ccma-order__meta {
        display: none;
    }

    .ccma-order__facts {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        padding-bottom: 24px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--ccma-line);
    }

    /* El seguimiento se tumba y se mete en su propio marco. */
    .ccma-track__list {
        display: flex;
        padding: 24px 12px 20px;
        border: 1px solid var(--ccma-line);
        border-radius: var(--ccma-radius-card);
    }

    .ccma-track__step {
        display: block;
        flex: 1;
        padding: 0 6px;
        text-align: center;
    }

    .ccma-track__dot {
        margin: 0 auto 10px;
    }

    /* Conector horizontal: va del punto anterior a este, así que solo lo llevan
       los pasos que tienen uno antes. Las cuentas: los puntos están centrados en
       cada paso, luego la distancia entre centros es el ancho de un paso; la
       línea empieza en el borde derecho del punto anterior y acaba en el
       izquierdo de este, de ahí los 16px (medio punto) a cada lado. */
    .ccma-track__step::before {
        content: none;
    }

    .ccma-track__step + .ccma-track__step::before {
        content: "";
        top: 15px;
        right: calc(50% + 16px);
        bottom: auto;
        left: auto;
        width: calc(100% - 32px);
        height: 2px;
    }

    .ccma-track__body {
        display: block;
    }

    .ccma-track__note {
        display: block;
        margin-top: 2px;
    }

    .ccma-track__date {
        display: block;
        margin-top: 4px;
        white-space: normal;
    }

    /* Reparto de las dos columnas. Sin esto el navegador las calcula por
       contenido y le da más sitio a la cifra que al nombre (medido: 145px
       contra 124px), que es justo al revés de lo que interesa leer.

       Solo en escritorio. En móvil el 62% deja al nombre 83px una vez descontada
       la foto —"Parlante MTE 18 18125 2600W" en cuatro líneas—; ahí conviene que
       la columna del importe se quede con lo justo y el nombre tome el resto. */
    .woocommerce-account .woocommerce-MyAccount-content .ccma-items td.product-name {
        width: 62%;
    }

    /* Dos tarjetas, lado a lado. */
    .ccma-sum {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 18px;
    }

    /* Con una sola tarjeta —pedido sin envío ni descuentos— no se deja media
       fila vacía: se pone a la derecha, que es donde el ojo busca los importes. */
    .ccma-sum__card--destaca:only-child {
        grid-column: 2;
    }
}

/* --- Móvil estrecho --- */

@media (max-width: 600px) {

    /* Sin marco: en una columna estrecha el borde solo quita sitio al texto. */
    .ccma-sum__card {
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .ccma-sum__card + .ccma-sum__card {
        padding-top: 12px;
        border-top: 1px dashed var(--ccma-line);
    }

    .ccma-item__photo img {
        width: 48px;
        height: 48px;
    }
}

/* ---------------------------------------------------------------------------
 * Tarjeta de envío (Descargas)
 *
 * Reutiliza la tarjeta de la lista de pedidos: misma cabecera, mismo
 * distintivo, mismos botones. Aquí solo va lo que cambia — no hay foto de
 * producto y sí un número de guía, que es lo que el cliente copia y pega en la
 * web de Coordinadora.
 * ------------------------------------------------------------------------ */

.ccma-ship__body {
    align-items: center;
}

.ccma-ship__label {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--ccma-muted);
}

.ccma-ship__guia {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ccma-ink);
    /* Tabular: son cifras que el cliente compara carácter a carácter con el
       correo de la transportadora. */
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* ---------------------------------------------------------------------------
 * Avisos
 * ------------------------------------------------------------------------ */

/* Sin el icono de WooCommerce.

   Su hoja lo pinta así:

       .woocommerce-error::before { font-family: WooCommerce; content: "\e028";
           position: absolute; top: 1em; left: 1.5em; }

   y le hace sitio con `padding: 1em 2em 1em 3.5em` en la caja. Al poner aquí un
   relleno propio de 16px, el sitio desaparece pero el icono sigue anclado a
   1.5em: cae ENCIMA del texto. En la pantalla del dueño se veía "ERROR" pintado
   dos veces, uno sobre otro.

   Se quita el icono en vez de recuperar los 3.5em de relleno: el resto del área
   de cuenta no usa iconos dentro de las cajas de aviso, y un glifo de una fuente
   de iconos que puede no cargar es una fuente de sorpresas. El color del borde
   y del fondo ya dicen si es error, aviso o confirmación. */
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before {
    content: none;
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    display: block;
    margin: 0 0 18px;
    padding: 13px 16px;
    border: 1px solid transparent;
    border-radius: var(--ccma-radius-sm);
    list-style: none;
    font-size: .875rem;
    line-height: 1.45;
}

.woocommerce-account .woocommerce-error {
    border-color: #f4c6cb;
    background: var(--ccma-red-soft);
    color: #a51d29;
}

.woocommerce-account .woocommerce-message {
    border-color: #bfe3c4;
    background: #f1faf2;
    color: #226b2c;
}

.woocommerce-account .woocommerce-info {
    border-color: #cfdcea;
    background: #f2f7fc;
    color: #1f4e79;
}

.woocommerce-account .woocommerce-error li,
.woocommerce-account .woocommerce-message li {
    margin: 0;
    list-style: none;
}

/* Dentro de la tarjeta de acceso: el aviso va pegado al contenido, con aire
   debajo y sin margen suelto que lo separe del bloque siguiente. */
.ccma-access .woocommerce-notices-wrapper {
    margin-bottom: 20px;
}

.ccma-access .woocommerce-notices-wrapper:empty {
    margin-bottom: 0;
}

.ccma-access .woocommerce-error,
.ccma-access .woocommerce-message,
.ccma-access .woocommerce-info {
    margin-bottom: 0;
    text-align: left;
}

/* Fuera de la tarjeta, al ancho exacto de ella para que quede a ras. Esto ya no
   afecta al acceso —sus avisos van dentro— pero sí a la pantalla de recuperar
   contraseña, que comparte `.ccma-access` y tiene su propio gancho de avisos.

   Son 420 y no 430: la tarjeta lleva `box-sizing: border-box`, así que su
   `max-width: 420px` ya incluye los 5px de borde de cada lado. Medido: con 430
   el aviso sobresalía 5px por cada lado. En las pantallas con sesión no se acota:
   ahí el aviso vive en una columna de contenido mucho más ancha y encogerlo a
   430px lo dejaría apretado sin motivo.

   Se acota el ENVOLTORIO, no el aviso: WooCommerce mete los avisos dentro de un
   `div.woocommerce-notices-wrapper`, y ese es el hijo directo del contenedor
   flex. Medido antes de darse cuenta: acotando solo el aviso, la caja seguía
   saliendo de 686px. Se dejan también los avisos sueltos en la lista, porque
   WooCommerce no siempre los envuelve. */
.woocommerce-account .woocommerce:has(> .ccma-access) > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce:has(> .ccma-access) > .woocommerce-error,
.woocommerce-account .woocommerce:has(> .ccma-access) > .woocommerce-message,
.woocommerce-account .woocommerce:has(> .ccma-access) > .woocommerce-info {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
}

/* ---------------------------------------------------------------------------
 * Accesibilidad y movimiento
 * ------------------------------------------------------------------------ */

.woocommerce-account a:focus-visible,
.woocommerce-account button:focus-visible {
    outline: 2px solid var(--ccma-red);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-account * {
        transition: none !important;
    }

    .ccma-dashboard__card-link:hover {
        transform: none;
    }
}