/* ============================================================================ Brooklyn by Janice — Mi cuenta ---------------------------------------------------------------------------- Es donde las compradoras recuperan sus descargas. Suena secundaria y no lo es: el copy promete "acceso de por vida", y esta es la página donde esa promesa se cumple o se rompe. Cuando alguien vuelve dos años después a buscar su ebook, aterriza aquí. Por eso la pestaña de Descargas va primero en el menú, antes que Pedidos y que Detalles de la cuenta. ========================================================================= */ .woocommerce-account .wc-content { padding-block: 24px 70px; } /* ---------- Login / registro ---------- */ /* La caja de «Acceder» ya la dibuja `.bk-login-caja` (form-login.php). Estas dos siguen viniendo de plantillas de WooCommerce sin override —restablecer y fijar contraseña— y tienen que verse igual que ella. */ .woocommerce-account .woocommerce-ResetPassword { max-width: 460px; margin-inline: auto; padding: 24px 20px; background: var(--white); border-radius: var(--r-caja); box-shadow: var(--borde-caja); } /* 🔴 ESTA REGLA ROMPÍA EL FOOTER EN TODAS LAS PÁGINAS DE LA CUENTA. Estaba escrita como `.woocommerce-account h2` —(0,1,1), sin acotar— y esa clase vive en el ``, así que alcanzaba también a `.foot-col h2`, que pesa exactamente lo mismo (0,1,1) y pierde el empate por cargarse antes. Consecuencia medida: los tres títulos del footer —BROOKLYN, INFORMACIÓN, LEGAL— salían en **Young Serif de 22,4px** en vez de la monoespaciada de 11,5px que llevan en el resto del sitio. El footer se veía distinto solo dentro de la cuenta, que es justo la clase de defecto que nadie encuentra revisando una página por vez. Se acota a `.woocommerce`, el contenedor del panel, que el footer no toca. Es la misma familia de trampa que el proyecto ya pisó veinte veces —CSS de una página alcanzando un componente global—, esta vez al revés: no era el componente el que estaba en la hoja equivocada, era la hoja de la página la que no estaba acotada. */ .woocommerce-account .woocommerce h2, .woocommerce-account .woocommerce-ResetPassword h2 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.005em; margin-bottom: 14px; } .woocommerce-account .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding: 0; } .woocommerce-account label { font-size: .82rem; font-weight: 600; } .woocommerce-account input[type="text"], .woocommerce-account input[type="email"], .woocommerce-account input[type="tel"], .woocommerce-account input[type="password"], .woocommerce-account textarea, .woocommerce-account select { width: 100%; font-size: 16px; /* evita el zoom automático de iOS al enfocar */ padding: 12px 14px; border: 1px solid rgba(121, 87, 87, .30); border-radius: var(--r-campo); background: var(--white); color: var(--ink); } .woocommerce-account input:focus, .woocommerce-account select:focus, .woocommerce-account textarea:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110, 44, 52, .1); } /* El botón por defecto de WooCommerce es gris y no parece de esta marca. */ .woocommerce-account .woocommerce-form-login__submit, .woocommerce-account .woocommerce-Button, .woocommerce-account button[type="submit"] { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; padding: 13px 26px; border: none; border-radius: 999px; background: var(--wine); color: var(--white); font-family: var(--body); font-size: .95rem; font-weight: 600; cursor: pointer; transition: background var(--t-base); } .woocommerce-account button[type="submit"]:hover { background: var(--wine-dark); } .woocommerce-account .woocommerce-form-login__rememberme { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: .84rem; } .woocommerce-account .lost_password { font-size: .84rem; margin-top: 12px; } .woocommerce-account .lost_password a { text-decoration: underline; text-underline-offset: 3px; color: var(--cacao); } /* ============================================================================ EL PANEL DE LA CUENTA — «La Carta» (27-08) ---------------------------------------------------------------------------- Era la última pantalla del sitio sin componer, y se notaba: pestañas con viñetas de lista cortadas por la derecha, un saludo suelto en monoespaciada, y catorce tarjetas blancas genéricas —una por archivo Y por pedido— donde el mismo PDF aparecía cuatro veces. Ahora usa las piezas que ya existen: el bloque vino de la entrega (el mismo de «gracias por tu compra»), el marco de papel con doble filete de la cuenta del carrito, y el sello de cierre de la ficha. Ninguna es nueva. ========================================================================= */ /* ---------- La sesión y las pestañas ---------- */ /* Ritmo propio: `.bk-cuenta-nav` es hijo directo de `.woocommerce`, o sea una sección del RITMO VERTICAL ÚNICO, pero no es una sección de contenido — es la cabecera del panel y tiene que quedar pegada al titular de la página. El `padding-top` de `:first-child` la despegaba de su propio `

`. ⚠️ HACEN FALTA CUATRO CLASES (0,4,0), no tres. La regla del ritmo que aplica acá es la de `:first-child` —el nav es el primer hijo de `.woocommerce`— y pesa (0,3,1): (0,2,1) del `:is()`, por su argumento más alto `.wrap--reading.section > article`, más (0,1,0) de la pseudo-clase. Con tres clases se empata en clases y gana el ritmo por el elemento: medido, el `padding-top` computaba 30px (`--sec-hero`) en vez del valor de acá. */ .woocommerce-account .woocommerce .bk-cuenta-nav.bk-cuenta-nav { padding-top: 5px; /* Pedido de Ignacio, 31-08. Venía escrito en 2px, sin efecto. */ padding-bottom: 0; } /* La línea de sesión: quién está adentro y cómo se sale. Va ARRIBA de las pestañas y no dentro del escritorio, que es donde estaba: así identifica la sesión en las cuatro pantallas y no en una sola. Clase repetida porque `.entry p` es (0,1,1) y le devolvería el cuerpo de 16px. */ .bk-cuenta-sesion.bk-cuenta-sesion { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; line-height: 1.4; color: var(--cacao); } .bk-cuenta-hola { min-width: 0; overflow-wrap: anywhere; } /* «Cerrar sesión» es una acción destructiva y por eso NO es una pestaña: entre pestañas de navegación se toca sin querer, y con cuatro ítems la fila además no cabía a 390px. Acá queda a la vista pero fuera del camino. */ .bk-cuenta-salir.bk-cuenta-salir { flex: none; color: var(--cacao); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(121, 87, 87, .4); } .bk-cuenta-salir.bk-cuenta-salir:hover { color: var(--wine); text-decoration-color: var(--wine); } /* Las pestañas: tres, entre dos filetes punteados. El punteado es el mismo separador de «la cuenta» del carrito y de «Las recetas» de la ficha; encerrar la fila entre dos la convierte en una franja de la carta en vez de una barra de navegación de aplicación. ⚠️ `list-style: none` y `padding: 0` van explícitos aunque parezcan el default: esta lista se dibuja dentro de `.entry`, donde `.entry ul` (0,1,1) declara `list-style: disc` y `padding-left: 20px` para el contenido editorial. Sin esto —y así estaba— cada pestaña salía con su viñeta. */ .bk-tabs.bk-tabs { display: flex; margin: 0; padding: 0; list-style: none; border-top: 1px dotted rgba(121, 87, 87, .45); border-bottom: 1px dotted rgba(121, 87, 87, .45); } .bk-tabs.bk-tabs > li { margin: 0; flex: 1 1 0; min-width: 0; } .bk-tabs.bk-tabs > li + li { border-left: 1px dotted rgba(121, 87, 87, .3); } .bk-tabs a { display: flex; align-items: center; justify-content: center; min-height: 44px; /* área táctil mínima */ padding: 10px 6px; text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; line-height: 1.25; color: var(--cacao); border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); } .bk-tabs a:hover { color: var(--wine); } /* La activa se marca en vino y con subrayado grueso: se distingue por peso y por color, no solo por color. El fondo `--paper` (#F0F0F0) que tenía antes se leía como una mancha gris desde que el sitio corre sobre papel cálido. */ .bk-tabs .is-active a { color: var(--wine); font-weight: 600; border-bottom-color: var(--wine); } /* 🔴 EN ESCRITORIO, `woocommerce.css` PARTE LA CUENTA EN DOS COLUMNAS. Desde 768px declara `.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 30% }` y el contenido al 68%. Con las pestañas ya convertidas en una barra horizontal, eso las metía en una columna de 200px —«MIS DESCARGAS» partido en dos líneas, tres cajitas apiladas— y dejaba **toda la mitad izquierda de la página vacía** bajo ellas. La cuenta se queda en una sola columna, que es lo que corresponde con tres pestañas y una página de ancho de lectura. Una barra lateral existe para menús largos; acá sería una columna de 200px sosteniendo tres enlaces. Empata en especificidad (0,2,0) y gana por orden de carga: `cuenta.css` va después de las hojas de WooCommerce. */ @media (min-width: 768px) { .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } } /* ---------- El estado vacío ---------- */ .bk-cuenta-vacia .carta-marco h2 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.14; margin: 12px 0 0; color: var(--ink); } .bk-cuenta-vacia .carta-marco > p { margin: 10px 0 0; font-size: 15px; line-height: var(--lh-texto); color: var(--tinta-2); } .bk-cuenta-vacia-acciones.bk-cuenta-vacia-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; } .bk-cuenta-vacia-acciones .btn { flex: 1 1 150px; } /* ---------- El cierre: la salida humana ---------- */ /* ⚠️ El aire va por FUERA, con el padding re-declarado. `.sello--linea` no es una caja con marco, pero sí lleva su propio padding y sus filetes; el `padding-block` del RITMO VERTICAL ÚNICO —que pesa (0,2,1)— se lo pisaba. Misma corrección ya hecha en «gracias», en el carrito y en la pantalla de descarga. Selector (0,3,0). */ .woocommerce-account .bk-cuenta-ayuda.bk-cuenta-ayuda { margin-block: var(--sec-borde) 0; padding-block: 14px; } /* ---------- Mis compras ---------- */ .bk-compra + .bk-compra { margin-top: 14px; } /* Los productos, uno por línea y con punteado entre ellos: son los renglones de una cuenta, igual que en el carrito. La tabla original no los mostraba —decía «5 productos»— y era justo lo único que la compradora viene a reconocer. */ .bk-compra-items.bk-compra-items { margin: 12px 0 0; padding: 0; list-style: none; } .bk-compra-items.bk-compra-items > li { margin: 0; padding: 7px 0; font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.22; color: var(--ink); border-top: 1px dotted rgba(121, 87, 87, .45); } .bk-compra-items.bk-compra-items > li:first-child { border-top: 0; padding-top: 2px; } /* En «Ver una compra» cada renglón lleva su precio, y en «Mis compras» no. No es inconsistencia: son dos objetos distintos. El listado es el índice —«¿cuál de mis compras es esta?»— y ahí el nombre alcanza; la compra abierta es el respaldo, y un respaldo sin las cifras por línea no sirve de respaldo. El precio va en mono junto al nombre en serif, igual que en la cuenta del carrito: el nombre es el renglón y la cifra es su anotación. */ .bk-vercompra .bk-compra-items.bk-compra-items > li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .bk-compra-item-precio { flex: 0 0 auto; font-family: var(--mono); font-size: 12.5px; color: var(--cacao); } .bk-compra-item-precio i { font-style: normal; font-size: 10px; } /* Subtotal y descuento: solo aparecen cuando hay un cupón u otro ajuste, así que nunca conviven con un total idéntico. Mismo tratamiento que la fila de datos de abajo — son cifras de registro, van en mono. */ .bk-compra-ajuste.bk-compra-ajuste { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--cacao); } .bk-compra-ajuste i { font-style: normal; font-size: 10px; } .bk-compra-ajuste--descuento { color: var(--wine); } /* La conversión a moneda local queda bajo el total y alineada con él. */ .bk-vercompra .price-conv.price-conv { display: block; margin: 6px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--cacao); text-align: right; } /* Fecha, estado y total: datos de registro, así que van en mono, como todas las cifras del recorrido de compra. */ .bk-compra-datos.bk-compra-datos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(110, 44, 52, .28); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--cacao); } .bk-compra-total { margin-left: auto; font-size: 16px; color: var(--wine); } .bk-compra-total i { font-style: normal; font-size: 10.5px; color: var(--cacao); } .bk-compra-acciones.bk-compra-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; } .bk-compras-paginas { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; } /* ---------- Mis datos ---------- */ .bk-datos-caja + .bk-datos-caja { margin-top: 14px; } /* El primer campo nacía a 6px del filete: el rótulo «TUS DATOS» y la etiqueta «Nombre» se leían como una sola cosa. `.carta-marco .carta-filete` declara `margin: 0` con (0,2,0), así que esto va con tres clases para ganarle contando. */ .bk-datos .carta-marco .carta-filete { margin: 0 0 16px; } .bk-datos .bk-datos-lead + .form-row.form-row { margin-top: 14px; } .bk-datos-lead.bk-datos-lead { margin: 0; font-size: 14px; line-height: var(--lh-texto); color: var(--tinta-2); } .bk-datos-guardar.bk-datos-guardar { margin: 16px 0 0; } /* La ayuda del correo: la misma pieza del checkout, no un globo azul de WooCommerce (ver `brooklyn_ayuda_campo()` y la nota de `cart.css`). */ .bk-datos .bk-ayuda { display: block; margin-top: 6px; font-size: 12.5px; line-height: var(--lh-texto); color: var(--cacao); } .bk-datos .required { color: var(--wine); text-decoration: none; } /* ---------- Tablas que quedan de WooCommerce ---------- «Mis compras» y «Ver una compra» ya no son tablas —tienen plantilla propia—, pero «ver una compra» (`view-order`) sigue usando las del núcleo y tiene que verse de esta marca. */ .woocommerce-account .shop_table { width: 100%; border-collapse: collapse; border: 0; } .woocommerce-account .shop_table thead { display: none; } .woocommerce-account .shop_table tr { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 14px; margin-bottom: 10px; background: var(--white); border: 0; border-radius: var(--r-caja); box-shadow: var(--borde-caja); } .woocommerce-account .shop_table td { border: 0; padding: 0; font-size: .86rem; background: transparent; } .woocommerce-account .shop_table td::before { content: attr(data-title) ": "; font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cacao); margin-right: 4px; } /* * OJO CON LA ESPECIFICIDAD. * * WooCommerce pinta sus botones principales con `.woocommerce a.button.alt` * (0,3,1) en morado #7f54b3. La regla que había aquí era (0,3,0): perdía por un * selector de elemento, y los botones de esta pantalla salían morados. */ .woocommerce-account .shop_table a.woocommerce-button.button, .woocommerce-account a.button.alt, .woocommerce-account button.button.alt, .woocommerce-account input.button.alt { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border-radius: 999px; background: var(--wine); background-color: var(--wine); color: var(--white); font-size: .86rem; font-weight: 600; text-align: center; line-height: 1.3; } .woocommerce-account .shop_table a.woocommerce-button.button:hover, .woocommerce-account a.button.alt:hover, .woocommerce-account button.button.alt:hover, .woocommerce-account input.button.alt:hover { background: var(--wine-dark); background-color: var(--wine-dark); } /* ---------- Avisos ---------- El de «confirma tu correo» imprimía el BOTÓN primero y la explicación debajo: se leía la acción antes que el motivo. Se invierte con `flex-direction`, sin tocar el marcado del núcleo. */ .woocommerce-account .woocommerce-Message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 12px; padding: 16px 18px; margin: 0 0 14px; border-radius: var(--r-caja); border-left: 3px solid var(--wine); background: var(--white); border-top: 1px solid rgba(121, 87, 87, .18); border-right: 1px solid rgba(121, 87, 87, .18); border-bottom: 1px solid rgba(121, 87, 87, .18); font-size: 14.5px; line-height: var(--lh-texto); color: var(--ink); } .woocommerce-account .woocommerce-error { list-style: none; } .woocommerce-account .woocommerce-error li { margin: 0; } /* El error NO va en flex ni lleva `gap`, y el motivo salió de medir. `column-reverse` + `gap: 12px` se escribieron para el aviso de «confirma tu correo», que son DOS piezas (explicación + botón). El error es solo una lista de mensajes, nunca trae botón — y ahí el `gap` se convierte en 12px de aire fantasma ARRIBA del texto: Chrome reserva el hueco de fila del nodo de texto en blanco que WooCommerce imprime entre `