envuelve a los dos (toda la fila es clickeable) pero no se pinta. */
.book-red{display:inline-flex;align-items:center;gap:.6em;color:inherit;text-decoration:none;
background:none;border:0;padding:0;transition:transform .12s}
.book-red:hover{transform:translateY(-2px);color:inherit}
.book-red-ico{width:1.75em;height:1.75em;font-size:.9em;flex:none;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;transition:background .12s;
background:color-mix(in srgb, currentColor 14%, transparent);border:1px solid color-mix(in srgb, currentColor 45%, transparent)}
.book-red:hover .book-red-ico{background:color-mix(in srgb, currentColor 28%, transparent)}
.book-portada-cr{font-size:.72em;opacity:.8;max-width:85%;line-height:1.4}
.book-portada-cr .cr-tienda{display:block}
/* Crédito del producto: esquina inferior derecha de la portada, discreto. Va posicionado sobre
la hoja (no en el pie) para que no compita con el nombre de la tienda ni con las redes. */
.book-powered{position:absolute;right:1.2em;bottom:.8em;z-index:4;
font-size:.52em;letter-spacing:.04em;opacity:.55;color:inherit;text-decoration:none}
.book-powered:hover{opacity:.9;color:inherit;text-decoration:none}
.book-portada-cr .cr-benfer{display:block;font-size:.9em;opacity:.75;margin-top:.15em}
/* Índice lateral: el capítulo va en el margen DERECHO, vertical, como las pestañas de un cuaderno.
Antes era un título arriba a la izquierda que le comía una línea de alto a la hoja y competía
con los artículos. Acá orienta sin robar espacio: la hoja arranca directo en la grilla.
`position:absolute` y no un elemento en el flujo, justamente para que no ocupe alto — el de la
hoja lo calcula ajustarAlto() y no tiene margen para regalar.
writing-mode + rotate: el texto se lee de abajo hacia arriba, como en el lomo de un libro. */
/* Índice de la portada: las solapas de capítulo apiladas, como el índice con pestañas de una
agenda. Mismos colores invertidos que .book-cap, así la que ves en la portada es la misma que
después te recibe arriba de la hoja.
alto FIJO (no max-height): la zona del índice mide siempre lo mismo, aunque se muestren menos de
5 solapas, así el JS puede partirla en 5 partes iguales sin que el alto se realimente. */
.book-idx{position:absolute;top:1.2em;right:0;z-index:5;
display:flex;flex-direction:column;align-items:flex-end;gap:.18em;
height:calc(100% - 2.4em);overflow:hidden}
/* Chicas y de letra fina: es un índice, no un título — tiene que estar sin pelear con la portada.
El peso 500 (y no 300) es el piso para que en .52em siga leyéndose: más fino, a ese tamaño y
sobre un fondo saturado, los palos de la letra se cortan. El letter-spacing hace el laburo que
haría la negrita: separa y deja leer sin engordar. */
.book-idx-tab{
writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;
font-size:.52em;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
padding:.75em .42em;border:0;cursor:pointer;
background:var(--bk-texto, #111);
color:var(--bk-fondo, #fff);
border-radius:0 6px 6px 0;
/* Alto uniforme fijado por el JS (--bk-tab-h = zona / 5). El nombre largo se recorta con
ellipsis; así todas las solapas miden lo mismo sin importar el largo del texto. */
flex:0 0 auto;height:var(--bk-tab-h, auto);
overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
transition:background-color .15s, color .15s, box-shadow .15s}
/* Invierte al pasar, como los .action-hover del panel. El inset le deja el borde del color de la
solapa: sin él, invertida se confunde con la hoja. */
.book-idx-tab:hover{
background:var(--bk-fondo, #fff);
color:var(--bk-texto, #111);
box-shadow:0 0 0 2px var(--bk-texto, #111) inset}
/* Los controles −/+: horizontales y chiquitos, para que no se lean como un capítulo más. El "−" va
arriba (tanda anterior) y el "+" abajo (tanda siguiente). Mismos colores invertidos que la solapa.
Redondeados del lado de ADENTRO (izquierda) y rectos contra el canto — igual que las solapas, que
quedan así por el rotate(180deg) —, si no se ven "al revés" respecto de ellas.
visibility:hidden de base: reservan su lugar (para el alto uniforme) sin verse. Solo aparecen con
la clase .on Y sobre la portada ACTIVA; así no se filtran sobre las otras hojas, que heredan el
visibility:hidden de la portada apagada (antes el JS les ponía visibility:visible inline, que le
ganaba a ese hidden heredado y los dejaba colgados en cada hoja). */
.book-idx-nav{writing-mode:horizontal-tb;transform:none;border:0;cursor:pointer;visibility:hidden;
font-size:.8em;letter-spacing:0;font-weight:700;line-height:1;padding:.3em .7em;
background:var(--bk-texto, #111);color:var(--bk-fondo, #fff);border-radius:6px 0 0 6px;
transition:background-color .15s, color .15s, box-shadow .15s}
.book-portada.bk-actual .book-idx-nav.on{visibility:visible}
.book-idx-nav:hover{background:var(--bk-fondo, #fff);color:var(--bk-texto, #111);
box-shadow:0 0 0 2px var(--bk-texto, #111) inset}
/* Impreso: la portada NO lleva el índice de solapas. En papel no se clickea, tapa el margen y no
suma nada (para ubicarse ya están las pestañas de capítulo .book-cap de cada hoja, que SÍ van —
son otro elemento y esta regla no las toca). El !important le gana al reparto en tandas. */
@media print{
.book-idx{display:none !important}
}
/* Arriba pero DEBAJO del logo: `top` en em (no en %) para que se mida contra la misma escala que
el logo (max-height:2.5em desde top:.9em, o sea que termina en ~3.4em). En % dependería del
alto de la hoja y en una pantalla baja se le montaría encima. */
.book-cap{position:absolute;top:5.6em;right:0;z-index:2;
writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;
font-size:.62em;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
padding:.9em .55em;
/* INVERTIDA: fondo del color de la LETRA del catálogo, letra del color del FONDO. Los dos salen
de Apariencia → Catálogo, así que la pestaña sigue tu paleta sola.
Con var y no currentColor: currentColor tomaría el `color` de esta misma regla y fondo y letra
saldrían iguales — un bloque de color sin texto.
Sin opacity: mezclaba la pestaña con el fondo y en una hoja clara no se leía. */
background:var(--bk-texto, #111);
color:var(--bk-fondo, #fff);
/* Redondeada del lado del BORDE (derecha) y recta hacia adentro: así se lee como una pestaña
pegada al canto de la hoja, no como una etiqueta suelta apuntando al contenido. */
border-radius:0 6px 6px 0;pointer-events:none;
max-height:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){ .book-cap{font-size:.55em;padding:.7em .35em} }
/* Grilla tipo libro: llena la página IZQUIERDA primero y luego la derecha (grid-auto-flow:column).
Columnas/filas fijas según cantidad por página; en pantallas chicas achica todo, no reflowea. */
/* Grillas: 2 → 1 col × 2 filas · 4 → 2×2 · 9 → 3×3. Van SIEMPRE completas: si la hoja no llega
a la cantidad, las celdas que faltan quedan vacías (solo puede pasar en la última). Así el
artículo mide igual en todas las hojas.
Sin grid-auto-flow:column: eso era para llenar primero la página izquierda del pliego, que
ya no existe; ahora se lee de corrido. */
.book-grid{position:relative;z-index:1;flex:1;min-height:0;display:grid;align-items:stretch}
/* La letra acompaña la densidad. Importa MÁS de lo que parece: la foto se lleva "lo que sobra"
del ítem (.book-img{flex:1}), así que si el texto no achica al apretar la grilla, la foto se
queda en cero y DESAPARECE (fue lo que pasó con la grilla de 8). */
.book-grid[data-per="2"]{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr);
gap:1.1em 1em;font-size:.88em}
.book-grid[data-per="4"]{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);
gap:1.4em 1em;font-size:.72em}
.book-grid[data-per="9"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
gap:.85em .55em;font-size:.5em}
.book-grid[data-per="9"] .book-desc{display:none}
/* Con 3 columnas las fotos se tocan de una a otra: aire propio dentro de cada ítem. Va acá y
no en el gap para que el respiro sea del contenido y no solo entre celdas. */
.book-grid[data-per="9"] .book-item{padding:0 .9em}
.book-item{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible;text-align:center}
/* Separador suave entre filas. La clase la pone catalogo.php y SOLO si abajo hay otra fila con
artículos: en la última no va, para no cerrar la hoja con una raya suelta.
Pseudo-elemento y no border-bottom: así se mete hacia adentro (12% a cada lado) y queda como
un
centrado en vez de una línea de borde a borde. currentColor para que siga el color
de letra del catálogo, que es configurable. */
.book-item.con-sep{position:relative;padding-bottom:.75em}
.book-item.con-sep::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:1px;
background:currentColor;opacity:.16;pointer-events:none}
/* La imagen manda: ocupa casi todo el alto del ítem. min-height:45% es su PISO: como se lleva
"lo que sobra" (flex:1), sin ese piso un nombre largo (ahora el título no se trunca) la
reduciría a nada y la foto desaparecería. */
.book-img{position:relative;flex:1;min-height:45%;display:flex;align-items:center;justify-content:center;margin-bottom:.8em}
/* La sombra va en la ![]()
y no en .book-img: el contenedor ocupa toda la celda, así que la
sombra caería en el aire. La imagen, en cambio, se achica a su propio tamaño (max-width /
max-height sobre un elemento con proporción propia), así el borde de la sombra es el de la foto. */
.book-foto{max-width:100%;max-height:100%;object-fit:contain;display:block;cursor:zoom-in;
box-shadow:0 .5em 1.4em rgba(0,0,0,.45)}
.book-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:42%;max-height:42%;opacity:.15;pointer-events:none;filter:grayscale(.2)}
/* Precio + WhatsApp en la misma línea, centrados */
.book-precio-row{display:flex;align-items:flex-end;justify-content:center;gap:.5em;margin:.05em 0 .1em}
.book-precio-wrap{display:inline-block}
.book-wa{width:1.9em;height:1.9em;flex:none;border-radius:50%;color:inherit;display:inline-flex;align-items:center;justify-content:center;
background:color-mix(in srgb, currentColor 14%, transparent);border:1px solid color-mix(in srgb, currentColor 45%, transparent);
font-size:.9em;text-decoration:none;transition:transform .15s,background .12s}
.book-wa:hover{transform:translateY(-2px);color:inherit;background:color-mix(in srgb, currentColor 28%, transparent)}
/* Hermano del WhatsApp: mismo círculo, mismo tamaño, mismo hover. Hereda el color de la hoja
(currentColor) como todo el catálogo, así sigue al fondo que configures. */
/* "Desde" del Base: discreto, no compite con el precio. */
.book-desde{font-size:.62em;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-right:.15em}
.book-cart{width:1.9em;height:1.9em;flex:none;border-radius:50%;color:inherit;
display:inline-flex;align-items:center;justify-content:center;
background:color-mix(in srgb, currentColor 14%, transparent);
border:1px solid color-mix(in srgb, currentColor 22%, transparent);
font-size:.9em;text-decoration:none;cursor:pointer;padding:0;
transition:transform .15s,background .12s}
.book-cart:hover{transform:translateY(-2px);color:inherit;background:color-mix(in srgb, currentColor 28%, transparent)}
/* Confirmación de que entró al carrito, sin sacarte de la hoja. */
.book-cart.added{background:color-mix(in srgb, #1c7a3f 55%, transparent);border-color:transparent;color:#fff}
/* En papel no se puede tocar: fuera, igual que el WhatsApp de cada artículo. */
@media print{ .book-cart{display:none !important} }
/* ---- Modal de compra del catálogo ----
Propio y no el lightbox: aquel es fondo negro para mirar fotos. Este es una tarjeta blanca con
un formulario, y NO hereda los colores del catálogo (currentColor): es una capa del sitio, no
una hoja del libro — con un catálogo de fondo oscuro, el texto se perdería. */
.shop-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
background:rgba(15,23,42,.55);padding:1rem}
.shop-modal[hidden]{display:none}
.shop-abierto{overflow:hidden}
.shop-box{position:relative;background:#fff;color:var(--tinta);border-radius:14px;
max-width:640px;width:100%;max-height:88vh;overflow:auto;
box-shadow:0 18px 50px rgba(0,0,0,.35)}
.shop-close{position:absolute;top:.4rem;right:.6rem;z-index:2;background:none;border:0;
font-size:1.8rem;line-height:1;color:var(--suave);cursor:pointer;padding:.2rem .4rem}
.shop-close:hover{color:var(--tinta)}
.shop-cargando{padding:3rem;text-align:center;color:var(--suave);font-size:1.4rem}
.shop-cont{display:flex;gap:1.2rem;padding:1.4rem}
.shop-img{width:40%;max-width:230px;aspect-ratio:1;object-fit:contain;border-radius:10px;
background:#f7f8fa;flex:none}
.shop-datos{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6rem}
.shop-tit{margin:0;font-size:1.1rem;line-height:1.3;padding-right:1.5rem}
.shop-desc{margin:0;font-size:.88rem;color:var(--suave);line-height:1.45}
.shop-lbl{display:block;font-size:.78rem;color:var(--suave);font-weight:600;margin-bottom:.25rem}
.shop-sel{width:100%;padding:.5rem .6rem;border:1px solid var(--linea);border-radius:8px;
font-size:.92rem;background:#fff;color:var(--tinta)}
.shop-precio{font-size:1.5rem;font-weight:700;color:var(--marca)}
.shop-nota{margin:.6rem 0 .2rem}
.shop-nota-txt{width:100%;padding:.45rem .6rem;border:1px solid var(--linea);border-radius:8px;
font-size:.9rem;background:#fff;color:var(--tinta);resize:vertical;min-height:2.4rem;font-family:inherit}
.shop-pie{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:auto}
.shop-cant{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:999px;overflow:hidden}
.shop-cant-btn{width:34px;height:34px;border:0;background:#fff;color:var(--tinta);
font-size:1.1rem;line-height:1;cursor:pointer}
.shop-cant-btn:hover{background:rgba(0,0,0,.05)}
/* Sin spinners del navegador: al lado de los botones - / + son ruido y desalinean la caja. */
.shop-cant input{width:44px;height:34px;border:0;text-align:center;font-size:.95rem;
color:var(--tinta);-moz-appearance:textfield}
.shop-cant input::-webkit-outer-spin-button,.shop-cant input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.shop-add{display:inline-flex;align-items:center;gap:.45rem;background:var(--marca);color:#fff;
border:0;border-radius:999px;padding:.6rem 1.3rem;font-weight:600;font-size:.95rem;cursor:pointer;
transition:background .12s,transform .12s}
.shop-add:hover:not(:disabled){background:var(--marca-osc);transform:translateY(-2px)}
.shop-add:disabled{opacity:.5;cursor:not-allowed}
.shop-add.added{background:#1c7a3f}
.shop-aviso{margin:0;font-size:.8rem;color:var(--peligro);font-weight:600}
@media(max-width:560px){
.shop-cont{flex-direction:column;padding:1.1rem}
.shop-img{width:100%;max-width:none;aspect-ratio:16/10}
}
@media print{ .shop-modal{display:none !important} }
@media(prefers-reduced-motion:reduce){ .shop-add:hover:not(:disabled){transform:none} }
/* ---- Modales de aviso (Configuración → Mensajes: bienvenida, checkout) ----
UN solo juego de clases para todos: lo que cambia entre un aviso y otro son los colores, y esos
los pone configuración inline (son datos, no diseño de la hoja). Por eso la ✕ y los links van con
currentColor: sobre un fondo oscuro elegido por el cliente, un gris fijo desaparecía. */
.aviso-modal{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;
background:rgba(15,23,42,.6);padding:1rem}
.aviso-modal[hidden]{display:none}
.aviso-abierto{overflow:hidden}
/* El que scrollea es .aviso-cont, NO la caja: el ✕ está absolute respecto de la caja, así que si la
caja fuera el scroller un mensaje alto (una imagen grande) se lo llevaría fuera de la vista justo
cuando el cliente baja a leer el final. Con flex + min-height:0 el ✕ queda clavado en la esquina. */
/* Padding PAREJO en los cuatro lados. Antes arriba llevaba 2.1rem contra 1.7/1.8 del resto: eran
0.4rem reservados para que el ✕ no pisara el contenido, y con una imagen a todo el ancho el marco
de color se veía más grueso arriba que abajo. El ✕ es absolute (fuera del flujo), así que no
necesita que nadie le haga lugar: flota en la esquina y el marco queda simétrico. */
.aviso-box{position:relative;width:100%;border-radius:16px;padding:1.7rem;
max-height:88vh;display:flex;flex-direction:column;text-align:center;
box-shadow:0 18px 50px rgba(0,0,0,.4);animation:aviso-in .22s ease-out}
/* Absolute respecto de la CAJA (que no scrollea) y no de .aviso-cont (que sí): así queda fijo en la
esquina mientras el cliente baja a leer el final de un mensaje largo. */
.aviso-close{position:absolute;top:.15rem;right:.4rem;z-index:2;background:none;border:0;
font-size:1.9rem;line-height:1;color:currentColor;opacity:.55;cursor:pointer;padding:.1rem .35rem}
.aviso-close:hover{opacity:1}
/* La caja recibe el foco al abrir (ver aviso_modal.php) y no es un control: su anillo de foco sería
un recuadro que el visitante no pidió. El del ✕ NO se toca — cuando se llega ahí con Tab, el
anillo es justamente lo que dice dónde estás parado. */
.aviso-box:focus{outline:none}
.aviso-cont{font-size:1rem;line-height:1.5;overflow:auto;min-height:0}
/* El editor siempre envuelve en : sin esto la caja queda con un aire de más arriba y abajo. */
.aviso-cont>:first-child{margin-top:0}
.aviso-cont>:last-child{margin-bottom:0}
.aviso-cont a{color:inherit;text-decoration:underline}
.aviso-cont img{max-width:100%;height:auto}
@keyframes aviso-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .aviso-box{animation:none} }
@media print{ .aviso-modal{display:none !important} }
/* Miniaturas: montadas sobre el borde izquierdo de la foto (más adentro que afuera), circulares, con sombra marcada.
La posición (left/top) la calcula el JS según el ancho real de cada foto centrada. */
.book-thumbs{position:absolute;transform:translateX(-40%);display:flex;flex-direction:column;gap:.35em;z-index:3}
.book-thumb{width:1.9em;height:1.9em;border-radius:50%;border:2px solid rgba(255,255,255,.95);
background-size:cover;background-position:center;background-repeat:no-repeat;padding:0;
cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.5);transition:transform .12s}
.book-thumb:hover{transform:scale(1.18)}
/* Miniaturas de más: se ocultan para no tapar la foto, pero siguen en el DOM y el lightbox
las recorre (arma su lista con querySelectorAll, que también ve las ocultas). */
.book-thumb-oculta{display:none}
/* El "+N" NO es un botón aparte: ES la foto siguiente, dibujada como contador. Por eso lleva
su data-full y el lightbox no la duplica. Abrirlo entra justo en esa foto. */
.book-thumb-mas{background:rgba(20,25,30,.72);color:#fff;display:flex;align-items:center;
justify-content:center;font-size:.62em;font-weight:700;line-height:1;letter-spacing:-.02em}
.book-thumb-mas:hover{background:rgba(20,25,30,.88)}
/* ===== Catálogo en PDF: lo genera el navegador al imprimir =====
En pantalla las hojas están APILADAS (absolute + visibility) y solo se ve una. Para el PDF hay
que desapilarlas, que ocupen una página cada una y cortar entre medio. Se hace con el motor del
navegador y no con una librería PHP porque el catálogo usa grid/flex/container queries: mPDF no
los soporta y habría que mantener un segundo diseño. Así el PDF sale igual a la pantalla.
Para que salgan los fondos y las fotos, el usuario tiene que dejar tildado "Gráficos de fondo"
en el diálogo de impresión (Chrome lo trae en "Más configuraciones"). */
@page{size:A4 portrait;margin:0}
@media print{
/* Fuera todo lo que no es el libro. Los flotantes (position:fixed) importan especialmente:
además de ensuciar, varios navegadores los REPITEN en cada página del PDF. */
.top,.pie,.book-nav,.loader{display:none !important}
.fab-wa,.fab-top,.pub-toast,.book-lb,.img-modal,.cat-arbol{display:none !important}
body.tienda{background:#fff !important;margin:0}
.contenido{padding:0 !important;margin:0 !important;max-width:none !important}
/* El libro deja de ser un visor de una hoja y pasa a ser la lista completa. */
.book{max-width:none !important;width:100%;margin:0;--bk-alto-libre:0px}
.book-visor{aspect-ratio:auto !important;overflow:visible !important;
border-radius:0 !important;box-shadow:none !important;perspective:none !important}
.book-tira{position:static !important;height:auto !important;perspective:none !important}
/* Cada hoja = una página. visibility:visible pisa el apilado; las animaciones se anulan
(si quedara una a medias, la hoja saldría girada o transparente en el PDF).
⚠️ position:RELATIVE, no static: la hoja tiene hijos `absolute` (el logo de la esquina y el
"Powered by"). Con static la hoja deja de ser su ancestro posicionado y esos hijos se anclan
al contenedor de arriba: TODOS los logos terminaban apilados en la esquina de la PRIMERA
página del PDF, y las hojas salían sin ninguno. relative también entra en el flujo normal
(que es lo que se buscaba al sacar el absolute del apilado en pantalla). */
.book-pagina{position:relative !important;visibility:visible !important;
width:100%;height:100vh;break-after:page;page-break-after:always;
z-index:auto !important;opacity:1 !important;transform:none !important;animation:none !important;
border-radius:0 !important;
-webkit-print-color-adjust:exact;print-color-adjust:exact}
.book-pagina:last-child{break-after:auto;page-break-after:auto}
/* La foto pierde la sombra (en papel ensucia) y las miniaturas no van: en el PDF no hay
lightbox que abrir, así que solo taparían la imagen. */
.book-foto{box-shadow:none !important}
.book-thumbs{display:none !important}
/* El WhatsApp de cada artículo es solo un ícono, sin número: en papel no se puede tocar y
solo le roba lugar al precio. El de la portada/contratapa SÍ queda: ese muestra el número
escrito, que es justamente cómo te contactan desde un PDF impreso. */
.book-wa{display:none !important}
}
/* Lightbox */
.book-lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.86);padding:2rem}
.book-lb[hidden]{display:none}
.book-lb-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:10px;box-shadow:0 12px 48px rgba(0,0,0,.5)}
.book-lb-close{position:absolute;top:14px;right:22px;background:none;border:0;color:#fff;
font-size:2.6rem;line-height:1;cursor:pointer}
.book-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.16);
border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.3rem;cursor:pointer}
.book-lb-nav:hover{background:rgba(255,255,255,.3)}
.book-lb-nav.prev{left:18px}
.book-lb-nav.next{right:18px}
@media(max-width:560px){.book-lb-nav{width:44px;height:44px}}
/* Texto compacto (em: escala con el zoom de la página); la imagen es la protagonista */
/* Peso 600/700 y no 800: en catálogo el bold pleno satura, sobre todo con la grilla de 9.
El precio queda un escalón por encima del título para que siga siendo lo que más pesa.
SIN line-clamp: el nombre se lee entero, nunca con "...". Lo que lo hace posible es el
min-height de .book-img: si no, un título largo le comería el alto a la foto (flex:1). */
.book-title{font-size:.95em;font-weight:600;margin:0 0 .1em;line-height:1.15;overflow-wrap:anywhere}
.book-rule{width:2.2em;height:.12em;background:currentColor;opacity:.4;border:0;margin:.06em auto .28em}
.book-desc{font-size:.74em;line-height:1.25;margin:0 0 .28em;opacity:.9;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.book-precio{font-size:1.2em;font-weight:700;display:block;line-height:1;margin-bottom:.1em}
.book-cod{font-size:.64em;opacity:.7}
.book-nav{display:flex;align-items:center;justify-content:center;gap:1.3rem;margin:1.3rem 0 2.2rem}
.book-nav button{border:none;background:var(--marca);color:#fff;width:48px;height:48px;border-radius:50%;
font-size:1.05rem;cursor:pointer;transition:transform .12s}
.book-nav button:hover:not(:disabled){transform:translateY(-2px)}
.book-nav button:disabled{opacity:.3;cursor:default}
.book-cont{font-weight:700;color:var(--suave);min-width:82px;text-align:center}
/* Link "Catálogo" en el header público */
.top-link{display:inline-flex;align-items:center;gap:.4rem;background:var(--marca);color:#fff;
padding:.5rem .9rem;border-radius:999px;font-weight:600;font-size:.9rem;text-decoration:none;white-space:nowrap;transition:transform .12s}
.top-link:hover{transform:translateY(-2px);color:#fff}
/* Precio con descuento: original tachado */
.precio-antes,.book-antes{text-decoration:line-through;opacity:.55;font-size:.82em;margin-right:.4rem;font-weight:600}
.precio-bloque{margin:.6rem 0 1rem}
/* Solapas del form de producto */
.pf-content{padding-top:1.3rem}
/* Desglose de stock en el listado admin */
.stock-detalle{display:block;font-size:.72rem;color:var(--suave);font-weight:400;margin-top:.1rem}
/* Árbol de categorías (Parámetros) */
.cat-tree{font-size:.92rem;border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.cat-box{border:1px solid var(--linea,#e4e8ee);border-radius:10px;margin-bottom:.8rem;overflow:hidden;background:#fff}
.cat-box:last-child{margin-bottom:0}
.cat-nodo{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-bottom:1px solid #eef0f3;background:#fff}
.cat-nodo:last-child{border-bottom:0}
.cat-nodo.cat-raiz{background:#f4f6f8;border-bottom:1px solid var(--linea,#e4e8ee)}
.cat-nodo.cat-raiz .cat-nombre{color:var(--marca);font-size:1rem}
.cat-nombre{font-weight:600}
.cat-tipo{font-size:.68rem;padding:.1rem .5rem;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.cat-tipo.hoja{background:#e9f6ec;color:#1e7e34}
.cat-tipo.cont{background:#eef2f6;color:#5b6b78}
.cat-acc{margin-left:auto;display:flex;gap:.15rem;align-items:center}
.cat-edit,.cat-addsub{padding:.5rem .6rem;background:rgba(0,0,0,.022);border-bottom:1px solid var(--linea)}
/* Árbol de selección de categorías en el form de producto */
.cat-sel-box{border:1px solid var(--linea);border-radius:8px;padding:.6rem .8rem;max-height:420px;overflow:auto}
.cat-sel,.cat-sel ul{list-style:none;margin:0;padding:0}
.cat-sel ul{padding-left:1.1rem;border-left:1px dashed var(--linea);margin-left:.3rem}
.cat-sel li{margin:.15rem 0}
.cat-sel-cont{font-weight:700;color:var(--suave);font-size:.9rem}
/* Árbol COLAPSABLE (Parámetros y form de producto): caret ▶/▼, todo cerrado al inicio.
El nodo hoja usa un espaciador del mismo ancho que el caret para que quede alineado. */
.cat-collapsed{display:none !important}
.cat-caret{border:0;background:transparent;cursor:pointer;padding:0;width:1.1rem;height:1.1rem;flex:0 0 1.1rem;color:var(--suave);font-size:.7rem;line-height:1.1;text-align:center}
.cat-caret::before{content:'\25B6'} /* ▶ colapsado */
.cat-caret.cat-open{color:var(--marca)}
.cat-caret.cat-open::before{content:'\25BC'} /* ▼ abierto */
.cat-caret-sp{display:inline-block;width:1.1rem;flex:0 0 1.1rem}
.cat-sel-cont .cat-caret{margin-right:.2rem;vertical-align:middle}
.cat-children{background:transparent}
/* Resaltado breve del nodo recién dado de alta/editado (foco tras el POST). Usa un box-shadow
interior para teñir la fila sin pelear con el fondo propio de .cat-raiz. */
.cat-nodo.cat-foco{animation:catFoco 2.2s ease-out}
@keyframes catFoco{0%,35%{box-shadow:inset 0 0 0 999px rgba(74,150,230,.20)}100%{box-shadow:none}}
/* Escalas (Base/Fijo) en Parámetros */
.esc-bloque{border:1px solid var(--linea);border-radius:8px;padding:.7rem .9rem;margin-bottom:1rem}
.esc-head{display:flex;align-items:center;gap:.7rem}
.esc-nombre{font-weight:700;font-size:1.02rem}
.esc-acc{margin-left:auto;display:flex;gap:.2rem;align-items:center}
.esc-edit{margin-top:.6rem}
.esc-valores{margin-top:.6rem}
.esc-valadd{margin-top:.4rem}
/* Listado: fila de artículo Fijo bajo su Base */
.fila-hijo > td{background:rgba(0,0,0,.025)}
.fila-hijo .hijo-flecha{color:var(--suave);margin-right:.15rem}
.badge.tipo-base{background:#6d28d9;color:#fff}
.badge.tipo-fijo{background:#0e7490;color:#fff}
.base-toggle i{transition:transform .15s ease}
.base-toggle.abierto i{transform:rotate(90deg)}
/* Tienda: card de Base (variantes / desde) + estado de stock */
.card-img{position:relative;overflow:hidden}
.card-variantes{position:absolute;top:.5rem;left:.5rem;background:rgba(20,20,20,.72);color:#fff;font-size:.68rem;font-weight:600;padding:.15rem .5rem;border-radius:20px;backdrop-filter:blur(2px)}
.precio-desde .desde{font-size:.72rem;color:var(--suave);text-transform:uppercase;letter-spacing:.05em;margin-right:.2rem}
/* Banda "Agotado" — cinta diagonal en la esquina, roja muted, delicada */
.card.agotado .card-img img{filter:grayscale(.55);opacity:.85}
.card-band{position:absolute;top:13px;right:-38px;transform:rotate(45deg);background:rgba(150,66,60,.9);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.24rem 3rem;box-shadow:0 1px 5px rgba(0,0,0,.2);z-index:2}
.det-band{top:22px;right:-46px;font-size:.8rem;padding:.3rem 3.6rem}
.galeria-main{position:relative;overflow:hidden}
.galeria-main.agotado img{filter:grayscale(.5);opacity:.9}
/* Estado de stock (badge de texto) — solo "Agotado", rojo muted */
.stock-estado{display:inline-block;font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:20px;vertical-align:middle}
.stock-estado.agotado{background:#f0e3e2;color:#9b4a44}
/* Variantes en la ficha del Base */
.variantes{margin-top:1rem}
.variantes-tit{font-size:1rem;margin:0 0 .5rem}
.variantes-tabla{width:100%;border-collapse:collapse}
.variantes-tabla td{padding:.55rem .5rem;border-top:1px solid var(--linea);vertical-align:middle}
.variantes-tabla .v-nom small{color:var(--suave);display:inline-block;margin-left:.3rem}
.variantes-tabla .v-precio{text-align:right;white-space:nowrap}
.variantes-tabla .v-wa{text-align:right;width:1%;white-space:nowrap}
.variantes-tabla .v-img{width:56px;padding-right:0}
.variantes-tabla .v-img img{width:44px;height:44px;max-width:none;object-fit:cover;border-radius:6px;border:1px solid var(--linea)}
.variantes-tabla tr.v-agotado{opacity:.55}
.btn-wa-sm{padding:.3rem .7rem;font-size:.82rem}
.btn-wa-ico{padding:.4rem .55rem;border-radius:8px}
.btn-wa-ico i{margin:0}
/* Leyenda "+ IVA" cuando la tienda muestra precios netos */
.iva-nota{color:var(--suave);font-weight:600;font-size:.7em;white-space:nowrap}
/* Carrito: badge en el header */
.top-carrito{position:relative}
.cart-badge{position:absolute;top:-6px;right:-6px;background:#fff;color:var(--marca);font-size:.7rem;font-weight:700;
min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:999px;padding:0 4px;border:1px solid var(--marca)}
/* En mobile el badge sale de la píldora y queda suelto sobre el header, así que se invierte: el
fondo es el color de las LETRAS del menú y el número el fondo del menú. Antes era var(--marca)
—el color de los botones, no el del header— y quedaba de un tono distinto al link de al lado. */
@media(max-width:991px){ .cart-badge{position:static;margin-left:auto;
background:var(--menu-txt);color:var(--menu-a);border-color:transparent} }
.add-cart.added{background:#1a7f37 !important}
/* Botón "Agregar al carrito" con cantidad (ficha de producto) */
.pf-add{display:flex;gap:.6rem;align-items:stretch;margin:.6rem 0 1.4rem;flex-wrap:wrap}
.pf-add .btn-wa{margin:0;display:inline-flex;align-items:center}
.pf-add .qty-input{margin:0;height:auto}
.qty-input{width:70px;padding:.5rem;border:1px solid var(--linea);border-radius:8px;font-size:1rem;text-align:center}
.pf-add .btn-cuenta{margin-top:0;border-radius:10px}
/* Página del carrito */
/* Tarjeta blanca a 1500, como el resto. Antes eran 820px sin fondo: el contenido flotaba suelto
sobre el degradé de la página. El margin:auto SÍ va: en la tienda el contenido va centrado
(no hay barra lateral que lo alinee, como en el panel). */
.carrito-wrap{max-width:1500px;margin:1.4rem auto;padding:1.5rem;
background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
box-shadow:0 6px 18px rgba(20,40,60,.06)}
.carrito-tit{color:var(--marca);margin:0 0 1.2rem}
@media(max-width:640px){ .carrito-wrap{margin:1rem .6rem;padding:1rem} }
.carrito-vacio{color:var(--suave)}.carrito-vacio a{color:var(--marca)}
.carrito-lista{display:flex;flex-direction:column;gap:.6rem}
.ci{display:flex;align-items:center;gap:.8rem;padding:.7rem;border:1px solid var(--linea);border-radius:10px}
.ci-img-link{flex:none;display:block;line-height:0}
.ci-img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex:none;background:#fff;cursor:pointer}
.ci-info{flex:1;min-width:0}
.ci-nom{font-weight:600}.ci-cod{color:var(--suave);font-size:.82rem}.ci-precio{color:var(--suave);font-size:.82rem}
.ci-nota{width:100%;max-width:32rem;margin-top:.35rem;padding:.35rem .5rem;border:1px solid var(--linea);
border-radius:6px;font-size:.82rem;color:var(--tinta);background:#fff;resize:vertical;min-height:2rem;font-family:inherit}
.ped-det-obs{color:#6b7280;font-style:italic}
.ci-cant{display:flex;align-items:center;gap:.2rem}
.ci-cant button{width:30px;height:30px;border:1px solid var(--linea);background:#fff;border-radius:8px;cursor:pointer;font-size:1.1rem;line-height:1}
.ci-qty{width:52px;height:30px;text-align:center;border:1px solid var(--linea);border-radius:8px}
.ci-sub{width:110px;text-align:right;font-weight:600;white-space:nowrap}
.ci-del{background:none;border:none;color:var(--peligro);font-size:1.4rem;cursor:pointer;line-height:1;padding:0 .2rem}
.carrito-pie{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.2rem;padding-top:1rem;border-top:2px solid var(--linea)}
.carrito-total{font-size:1.2rem}
.carrito-desglose{min-width:220px}
.carrito-desglose>div{display:flex;justify-content:space-between;gap:1.5rem;padding:.2rem 0;color:var(--suave)}
.carrito-desglose .dsg-total{border-top:1px solid var(--linea);margin-top:.3rem;padding-top:.4rem;color:inherit;font-size:1.2rem}
.carrito-desglose b{color:#20303c}
.carrito-acc{display:flex;gap:.6rem;flex-wrap:wrap}
@media(max-width:600px){
.ci{flex-wrap:wrap}.ci-info{flex:1 0 60%}.ci-sub{width:auto}
.carrito-acc{width:100%}.carrito-acc .btn-cuenta{flex:1;text-align:center}
}
/* Checkout */
/* Misma tarjeta que el carrito: es el paso siguiente y tienen que leerse como la misma pieza. */
.checkout-wrap{max-width:1500px;margin:1.4rem auto;padding:1.5rem;
background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
box-shadow:0 6px 18px rgba(20,40,60,.06)}
/* El contenido NO se estira a 1500: es un formulario y una lista de ítems, y a esa distancia los
campos quedan desparramados y el ojo se pierde de una punta a la otra. La tarjeta da el marco;
adentro el contenido sigue en su ancho legible, como en el carrito. */
.checkout-wrap > *{max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:640px){ .checkout-wrap{margin:1rem .6rem;padding:1rem} }
.checkout-cliente{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:.9rem 1rem;margin-bottom:1rem;line-height:1.5}
.checkout-tabla{width:100%;border-collapse:collapse;margin-bottom:1rem}
.checkout-tabla td{padding:.55rem .3rem;border-top:1px solid var(--linea)}
.checkout-tabla .num{text-align:right;white-space:nowrap}
.checkout-tabla tfoot td{border-top:2px solid var(--linea);font-size:1.05rem}
.checkout-coment{display:block;font-size:.85rem;color:var(--suave);font-weight:600;margin-bottom:1rem}
.checkout-coment textarea,.checkout-coment select{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;border:1px solid var(--linea);border-radius:8px;font-family:inherit;font-size:.95rem;resize:vertical;background:#fff;color:inherit}
.checkout-datos-falta{text-align:center;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.6rem}
.checkout-ok{text-align:center;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.6rem}
.btn-wa-grande{background:var(--wa) !important;color:#fff;font-size:1.05rem;padding:.8rem 1.6rem;margin:.6rem 0}
.btn-wa-grande:hover{background:#1fb457 !important}
.checkout-links{margin-top:1rem;font-size:.9rem}.checkout-links a{color:var(--marca)}
/* Métodos de pago (checkout) */
.checkout-metodo-tit{font-size:.9rem;font-weight:700;color:var(--suave);margin:.4rem 0 .2rem}
.btn-mp{background:#009ee3 !important;color:#fff;font-size:1.02rem;padding:.8rem 1.4rem;margin:.5rem 0}
.btn-mp:hover{background:#0089c7 !important}
.btn-wa-checkout{background:var(--wa) !important;color:#fff;font-size:1.02rem;padding:.8rem 1.4rem;margin:.5rem 0}
.btn-wa-checkout:hover{background:#1fb457 !important}
/* Página de estado del pago (retorno de Mercado Pago) */
.pago-estado{text-align:center;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.8rem 1.4rem}
.pago-ico{font-size:3.4rem;line-height:1;margin-bottom:.6rem}
.pago-ico.ok{color:#2e9e4f}.pago-ico.pend{color:#e0a800}.pago-ico.err{color:#d64545}
/* Estados de pedido (badge) + filas de detalle (admin y cuenta del cliente) */
.ped-badge{display:inline-block;padding:.12rem .55rem;border-radius:11px;font-size:.72rem;font-weight:700;white-space:nowrap}
.ped-badge.ok{background:#d8f3e0;color:#1c7a3f}
.ped-badge.pend{background:#fdf0cf;color:#8a6d1a}
.ped-badge.err{background:#fbdcdc;color:#a62b2b}
.ped-badge.nuevo{background:#dfe9fb;color:#2b4a8a}
.ped-badge.cta{background:#e9e2f7;color:#5a3a8a}
.ped-pdf{color:#b23b3b;font-size:1.05rem}.ped-pdf:hover{color:#8a2a2a}
.ped-ver{background:none;border:0;cursor:pointer;color:inherit;padding:.1rem .25rem}
.ped-ver:hover{color:var(--marca)}
.ped-det-tabla{width:100%;border-collapse:collapse;font-size:.88rem}
.ped-det-tabla td,.ped-det-tabla th{padding:.28rem .4rem;border-bottom:1px solid var(--linea,#eee)}
/* Propia y no heredada: el detalle vivía anidado adentro de .tabla (panel) y de .cuenta-pedidos
(cuenta), y le llegaba el alineado por descendencia. Ahora vive en el modal, fuera de las dos. */
.ped-det-tabla .num{text-align:right;white-space:nowrap}
/* Cobro dentro del detalle del pedido (solo el panel: el cliente no marca cobrado). Mismo box que
el de despacho, para que se lean como dos acciones hermanas — pero sin campos: es un solo botón. */
.ped-cobro{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 .7rem;
padding:.55rem .6rem;border:1px solid var(--linea,#eee);border-radius:8px;background:#fafbfc}
.ped-cobro-tit{font-size:.86rem;white-space:nowrap}
.ped-cobro-txt{font-size:.8rem;color:var(--suave);margin-right:auto} /* empuja el botón a la derecha */
/* Form de despacho (tracking) dentro del detalle del pedido. */
.ped-envio-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0 0 .7rem;
padding:.55rem .6rem;border:1px solid var(--linea,#eee);border-radius:8px;background:#fafbfc}
.ped-envio-tit{font-size:.86rem;align-self:center;white-space:nowrap}
.ped-envio-form label{display:flex;flex-direction:column;gap:.15rem;font-size:.74rem;color:#6b7280}
.ped-envio-form input,.ped-envio-form select{font-size:.82rem;padding:.22rem .4rem;
border:1px solid var(--linea,#ddd);border-radius:5px;min-width:9rem}
.ped-envio-form input[type=url]{min-width:14rem}
.ped-envio-fecha{font-size:.74rem;color:#6b7280;align-self:center}
/* Datos del envío en "Mis pedidos" (cuenta del cliente). */
.cuenta-envio{font-size:.84rem;margin:.1rem 0 .5rem;padding:.35rem .5rem;border-radius:6px;
background:#f5f7fa;border:1px solid var(--linea,#eee)}
.cuenta-envio code{background:#fff;padding:.05rem .3rem;border-radius:4px}
@media(max-width:820px){
.ped-envio-form label,.ped-envio-form input,.ped-envio-form select{width:100%;min-width:0}
}
.ped-det-datos{font-size:.86rem;margin-bottom:.6rem;line-height:1.7}
.ped-det-datos code{background:#f2f2f2;padding:.05rem .3rem;border-radius:4px}
/* ---- Modal del detalle de pedido (src/ped_modal.php): panel y "Mis pedidos" ----
z-index 1050: tapa la barra lateral del panel (1040) y su hamburguesa (1045), y queda POR DEBAJO
del .modal de Bootstrap (1055) — así el confirm del despacho (bfdialog) sale ENCIMA y no atrás.
El [hidden] explícito no es opcional: display:flex le gana al display:none del atributo. */
.ped-modal{position:fixed;inset:0;z-index:1050;display:flex;align-items:center;justify-content:center;
background:rgba(15,23,42,.55);padding:1rem}
.ped-modal[hidden]{display:none}
.ped-modal-abierto{overflow:hidden}
.ped-modal-box{position:relative;background:#fff;color:var(--tinta);border-radius:14px;
width:100%;max-width:780px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ped-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:none;
padding:.7rem 1.1rem;border-bottom:1px solid var(--linea)}
.ped-modal-tit{margin:0;font-size:1rem;font-weight:700}
.ped-modal-close{background:none;border:0;font-size:1.8rem;line-height:1;color:var(--suave);
cursor:pointer;padding:0 .3rem}
.ped-modal-close:hover{color:var(--tinta)}
/* El body scrollea y la cabecera queda fija: el detalle de un pedido largo no puede empujar el
título ni la X fuera de la caja. */
.ped-modal-body{padding:1rem 1.1rem 1.2rem;overflow:auto}
/* Ajuste de stock (admin/stock.php) */
.stock-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
@media(max-width:820px){.stock-cols{grid-template-columns:1fr}}
/* Pie con identidad del producto (Benfersoft Tiendas vX) */
.admin-pie{text-align:center;color:#9aa5b1;font-size:.78rem;padding:1.4rem 0 1rem;letter-spacing:.02em}
.admin-pie span{opacity:.7}
/* Cuenta del cliente (ingresar / registro / mi cuenta) */
.cuenta-wrap{max-width:520px;margin:1.6rem auto;padding:0 1rem}
.cuenta-wrap-ancho{max-width:860px}
.cuenta-card{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.5rem}
.cuenta-tit{color:var(--marca);margin:0 0 1rem;font-size:1.4rem}
.cuenta-sub{color:var(--marca);margin:1.4rem 0 .6rem;font-size:1.05rem}
.cuenta-datos{color:var(--suave);margin:-.6rem 0 1rem}
.cuenta-card label{display:block;font-size:.85rem;color:var(--suave);font-weight:600;margin-bottom:.8rem}
.cuenta-card input,.cuenta-card select{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;border:1px solid var(--linea);border-radius:8px;font-size:.95rem;font-family:inherit;color:inherit;background:#fff}
.cuenta-card input:focus,.cuenta-card select:focus{outline:none;border-color:var(--marca)}
.cuenta-nota{font-size:.85rem;color:var(--suave);margin:.2rem 0 .8rem}
.cuenta-datos-form{margin-bottom:1rem}
.dir-lista{list-style:none;padding:0;margin:.2rem 0 .8rem}
.dir-lista li{padding:.45rem .1rem;border-bottom:1px solid var(--linea);font-size:.9rem}
.dir-badge{display:inline-block;background:var(--marca);color:#fff;font-size:.68rem;font-weight:700;padding:.05rem .4rem;border-radius:8px;margin-right:.3rem}
.dir-del{background:none;border:0;color:#c0392b;font-size:1.1rem;cursor:pointer;line-height:1;padding:0 .3rem;float:right}
.dir-nueva{margin-bottom:1rem}.dir-nueva summary{cursor:pointer;color:var(--marca);font-size:.9rem;font-weight:600}
.cta-row{display:flex;gap:1rem}
.cta-row label{flex:1}
.btn-cuenta{display:inline-block;background:var(--marca);color:#fff;border:none;border-radius:999px;padding:.7rem 1.9rem;font-weight:600;font-size:.98rem;cursor:pointer;text-decoration:none;margin-top:.3rem;transition:transform .12s}
.btn-cuenta:hover{transform:translateY(-2px);color:#fff}
.btn-cuenta-sec{background:#efe6dd;color:var(--marca)}
.btn-cuenta-sec:hover{color:var(--marca)} /* solo se sube (el lift lo da .btn-cuenta:hover), sin volverse blanco */
.cuenta-sep{display:flex;align-items:center;text-align:center;color:var(--suave);font-size:.82rem;margin:1.1rem 0 .9rem}
.cuenta-sep::before,.cuenta-sep::after{content:"";flex:1;border-top:1px solid var(--linea)}
.cuenta-sep span{padding:0 .8rem}
.cuenta-google{display:flex;justify-content:center}
.cuenta-check{display:flex;align-items:center;gap:.5rem;font-weight:400;font-size:.88rem;color:var(--suave);margin-bottom:1rem}
.cuenta-check input{width:auto;margin:0}
.cuenta-alt{margin-top:1rem;font-size:.9rem;color:var(--suave)}
.cuenta-alt a,.cuenta-datos a{color:var(--marca)}
.cuenta-ok{background:#e6f4ea;color:#1a7f37;padding:1rem 1.1rem;border-radius:10px;margin-bottom:1rem}
.cuenta-err{background:#f0e3e2;color:#9b4a44;padding:.8rem 1rem;border-radius:10px;margin-bottom:1rem}
.cuenta-vacio{color:var(--suave)}
/* ---- "Mis pedidos" (public/cuenta.php) ----
Divs y no