/* ============================================================
   Materiales Dentales JLRC — estilos · dirección "Clínica esmeralda"
   - Tipografía local: Plus Jakarta Sans (títulos y texto)
   - Paleta esmeralda/blanco clínico sobre papel
   - A11y: skip-link, :focus-visible, reduced-motion, targets ≥24px
   CSS puro, responsive, mobile-first. Conserva todas las clases
   originales (las usan las plantillas PHP y los estilos inline).
   ============================================================ */

/* ------------------------------ Fuentes locales ------------ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/jakarta-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/jakarta-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------ Tokens --------------------- */
:root {
    /* Paleta P2 · Esmeralda quirófano */
    --fondo: #eef4f1;          /* fondo de página */
    --papel: #ffffff;          /* tarjetas y superficies */
    --tinta: #0e1f18;          /* texto principal */
    --tinta-2: #4f6259;        /* texto secundario */
    --borde: #dfe9e4;          /* bordes */
    --borde-fuerte: #c6d9d0;
    --marfil: #f1f7f4;         /* bloques suaves */
    --terracota: #047857;      /* acento principal (esmeralda) */
    --terracota-osc: #065f46;
    --oliva: #0f766e;          /* acento secundario (teal) */
    --rojo: #b3261e;
    --radio: 14px;
    --sombra: 0 12px 26px rgba(2, 8, 20, .12);

    /* Alias legacy (los usan estilos inline de PHP) */
    --gris: var(--tinta-2);
}

/* ------------------------------ Base ----------------------- */
* { box-sizing: border-box; }

html { scroll-padding-top: 90px; } /* cabecera sticky no tapa el foco (WCAG 2.4.11) */

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.02rem;
    color: var(--tinta);
    background: var(--fondo);
    line-height: 1.6;
}

/* El contenido crece: el pie siempre pegado abajo (sticky footer) */
main { flex: 1 0 auto; }

img { max-width: 100%; }
a { color: var(--terracota); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, .logo, .hero h1, .detalle-precio, .tarjeta-cuerpo .precio,
.stat .valor, .exito .icono, .barra-admin .titulo {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

h1 { font-size: clamp(1.65rem, 3vw, 2.05rem); font-weight: 650; letter-spacing: -.015em; margin: 1.2rem 0 .8rem; }
h2 {
    font-size: 1.38rem; font-weight: 620; letter-spacing: -.01em;
    margin: 1.4rem 0 .7rem; padding-bottom: .35rem;
    border-bottom: 2px solid var(--borde);
}
.hero h1 { border: 0; padding: 0; }

.contenedor {
    width: min(1100px, 100% - 2rem);
    margin-inline: auto;
}

/* --------------------------- Accesibilidad ----------------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -200px;
    left: 1rem;
    z-index: 300;
    background: var(--tinta);
    color: var(--papel);
    padding: .75rem 1.2rem;
    font-weight: 700;
    border-radius: 0 0 var(--radio) var(--radio);
    transition: top .15s ease;
}
.skip-link:focus { top: 0; text-decoration: none; }

:focus-visible {
    outline: 3px solid var(--terracota);
    outline-offset: 2px;
    border-radius: 2px;
}
.skip-link:focus-visible { outline-color: var(--papel); }

/* ------------------------------ Cabecera ------------------- */
.cabecera {
    background: var(--papel);
    border-bottom: 1px solid var(--borde-fuerte);
    position: sticky;
    top: 0;
    z-index: 50;
}

.cabecera-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    flex-wrap: wrap;
}

.logo {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.02em;
    color: var(--tinta);
}
.logo::after { content: '.'; color: var(--terracota); }
.logo:hover { text-decoration: none; color: var(--terracota); }

.nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.nav a {
    color: var(--tinta-2);
    font-weight: 600;
    font-size: .87rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    display: inline-flex;
    align-items: center;
    min-height: 24px;          /* target size WCAG 2.5.8 */
    padding: .25rem 0;
}
.nav a.activo { color: var(--terracota); box-shadow: inset 0 -2px 0 var(--terracota); }
.nav a:hover { color: var(--terracota); text-decoration: none; }

.nav-toggle {
    display: none;
    background: var(--papel);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    font-size: 1.3rem;
    padding: .2rem .6rem;
    min-height: 34px;
    cursor: pointer;
    color: var(--tinta);
}

.form-inline { display: inline; }

.link-btn {
    background: none;
    border: 0;
    color: var(--tinta);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: .25rem .2rem;
    min-height: 24px;          /* target size WCAG 2.5.8 */
    display: inline-flex;
    align-items: center;
}
.link-btn:hover { color: var(--terracota); }

.carrito-link {
    background: var(--terracota);
    color: var(--papel) !important;
    padding: .45rem .9rem;
    border-radius: var(--radio);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .85rem;
    min-height: 34px;
}
.carrito-link:hover { background: var(--terracota-osc); text-decoration: none; }

.badge-carrito {
    background: var(--papel);
    color: var(--terracota);
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .8rem;
    margin-left: .3rem;
}

/* ------------------------------ Botones --------------------- */
.btn {
    display: inline-block;
    background: var(--terracota);
    color: var(--papel) !important;
    border: 0;
    border-radius: var(--radio);
    padding: .6rem 1.2rem;
    font-size: .88rem;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    text-align: center;
    min-height: 34px;
    transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--terracota-osc); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-secundario {
    background: var(--papel);
    color: var(--terracota) !important;
    border: 1px solid var(--terracota);
}
.btn-secundario:hover { background: var(--marfil); }

.btn-peligro { background: var(--rojo); }
.btn-peligro:hover { background: #8f1d17; }

.btn-pequeno { padding: .4rem .8rem; font-size: .8rem; min-height: 30px; }

/* Deshabilitado (todas las variantes) */
.btn:disabled,
.btn-secundario:disabled,
.btn-peligro:disabled {
    background: var(--borde-fuerte);
    color: var(--tinta-2) !important;
    border-color: var(--borde-fuerte);
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* ------------------------------ Alertas --------------------- */
.alerta {
    padding: .8rem 1rem;
    border-radius: var(--radio);
    margin: 1rem 0;
    font-weight: 600;
}
.alerta-ok    { background: #e7f5ee; color: #14532d; border: 1px solid #b7e2cd; }
.alerta-error { background: #fdeceb; color: #8a1f1f; border: 1px solid #f3c0bd; }
.alerta-aviso { background: #fdf6e3; color: #7a5510; border: 1px solid #ecd9a5; }

/* Aviso emergente fijo (añadir al carrito sin recarga) */
.toast {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--wa-bottom, calc(1rem + env(safe-area-inset-bottom, 0px))) + 4.75rem); /* siempre por encima del botón de WhatsApp */
    z-index: 250;
    margin: 0;
    max-width: min(380px, calc(100vw - 2rem));
    box-shadow: var(--sombra);
    animation: aparecer .35s both ease-out;
}
.toast-enlace {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    padding: .15rem .25rem;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

/* ------------------------------ Hero ------------------------ */
.hero {
    position: relative;
    background-color: var(--tinta);
    background-image: linear-gradient(120deg, rgba(4, 120, 87, .38), transparent 62%);
    color: var(--papel);
    border-radius: var(--radio);
    padding: 2.6rem 2rem;
    margin: 1.4rem 0;
    overflow: hidden;
}
.hero h1 { margin: 0 0 .5rem; color: inherit; font-size: clamp(1.9rem, 4.5vw, 2.7rem); }
.hero p { margin: 0 0 1.3rem; max-width: 46ch; color: rgba(255, 255, 255, .82); }
.hero .btn { background: var(--papel); color: var(--tinta) !important; }
.hero .btn:hover { background: #d9ece4; }

@keyframes aparecer {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.hero h1   { animation: aparecer .5s .05s both ease-out; }
.hero p    { animation: aparecer .5s .18s both ease-out; }
.hero .btn { animation: aparecer .5s .31s both ease-out; }

/* ------------------------------ Carrusel de portadas -------- */
.carrusel { position: relative; margin: 1.4rem 0; }
.carrusel-pista {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista > .hero {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: center;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.carrusel-pista .hero h1,
.carrusel-pista .hero h2 {
    margin: 0 0 .5rem;
    color: inherit;
    font-size: clamp(1.9rem, 4.5vw, 2.7rem);
    font-weight: 800;
    line-height: 1.15;
}
.carrusel-pista .hero p { margin: 0 0 1.3rem; max-width: 46ch; color: rgba(255, 255, 255, .82); }
.carrusel-pista .hero .btn { align-self: flex-start; background: var(--papel); color: var(--tinta) !important; }
.carrusel-pista .hero .btn:hover { background: #d9ece4; }

/* Variantes de color cuando no hay imagen de fondo */
.hero--teal      { background-image: linear-gradient(120deg, rgba(15, 118, 110, .45), transparent 62%); }
.hero--esmeralda { background-image: linear-gradient(120deg, rgba(4, 120, 87, .60), transparent 62%); }

.carrusel-controles { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .9rem; }
.carrusel-flecha {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--borde-fuerte);
    background: var(--papel);
    color: var(--tinta);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.carrusel-flecha:hover { background: var(--marfil); }
.carrusel-puntos { display: flex; gap: .45rem; }
.carrusel-punto {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--borde-fuerte);
    background: var(--papel);
    padding: 0;
    cursor: pointer;
}
.carrusel-punto[aria-current="true"] { background: var(--terracota); border-color: var(--terracota); }

@media (max-width: 720px) { .carrusel-controles { display: none; } }
@media (prefers-reduced-motion: reduce) { .carrusel-pista { scroll-behavior: auto; } }

/* ------------------------------ Filtros -------------------- */
.filtros {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 1rem 0;
}

.filtros input[type="search"],
.filtros select {
    padding: .55rem .75rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    font: inherit;
    background: var(--papel);
    color: var(--tinta);
    min-height: 34px;
}
.filtros select { min-width: 11rem; }

/* Filtro de estado del panel de Pedidos: en escritorio van los chips; en móvil, el desplegable */
.filtro-estado-movil { display: none; }
.filtro-estado-movil select { min-width: 0; width: 100%; }

.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0; }
.paginacion { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: 1.2rem 0; }
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    background: var(--papel);
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    padding: .3rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tinta);
}
.chip:hover { border-color: var(--terracota); color: var(--terracota); text-decoration: none; }
.chip.activo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* ------------------------------ Rejilla productos ---------- */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.1rem;
    margin: 1rem 0 2rem;
}

.tarjeta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(2, 8, 20, .10), 0 2px 6px rgba(2, 8, 20, .05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(2, 8, 20, .14); }

.tarjeta-img {
    position: relative;
    aspect-ratio: 1;
    background-color: var(--marfil);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 3.4rem;
    color: var(--terracota);
    font-weight: 800;
    overflow: hidden;
}
.tarjeta-img > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
}
.tarjeta-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    transition: transform .3s ease;
}
.tarjeta:hover .tarjeta-img img { transform: scale(1.04); }

/* Etiqueta de categoría sobre la imagen (diseño T1) */
.etiqueta-cat {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
    background: var(--papel);
    color: var(--terracota);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .22rem .6rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(2, 8, 20, .12);
}
.etiqueta-cat.etiqueta-agotado { background: var(--rojo); color: #fff; }

.tarjeta-cuerpo {
    padding: .9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}
.tarjeta-cuerpo .nombre { font-weight: 700; color: var(--tinta); line-height: 1.35; }

/* Inicial de respaldo cuando el producto no tiene imagen */
.inicial { font-weight: 800; letter-spacing: -.02em; }
.tarjeta-cuerpo .precio {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--terracota);
    margin: 0;
}

/* Precio + botón en una fila (diseño T1) */
.fila-precio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .35rem;
}
.fila-precio .btn { border-radius: 999px; padding: .45rem .95rem; font-size: .8rem; }
.fila-precio .agotado { font-size: .78rem; }

/* ------------------------------ Ofertas --------------------- */
.precios { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.precio-antes {
    text-decoration: line-through;
    color: var(--tinta-2);
    font-weight: 600;
    font-size: .82em;
}
.etiqueta-cat.etiqueta-oferta { background: var(--terracota); color: var(--papel); }
.nav a.nav-ofertas { color: var(--terracota); }
.insignia-oferta {
    display: inline-block;
    vertical-align: middle;
    margin-left: .6rem;
    background: var(--terracota);
    color: var(--papel);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem .55rem;
    border-radius: 999px;
}
.detalle-precio .precio-antes { font-size: .55em; }
.ahorro { color: var(--terracota); font-weight: 700; margin: .1rem 0 .6rem; }
.badge-oferta {
    display: inline-block;
    background: var(--terracota);
    color: var(--papel);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 .4rem;
    border-radius: 999px;
    margin-right: .35rem;
}

/* ============ Avatar y «Mi cuenta» ============ */
.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 25%;   /* prioriza la parte alta: la cara queda centrada */
    flex: 0 0 auto;
    vertical-align: middle;
    background: var(--marfil);
}
.avatar-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--terracota);
    color: var(--papel);
    font-weight: 800;
    font-size: .95rem;
    text-transform: uppercase;
}
.nav a.nav-cuenta { display: inline-flex; align-items: center; gap: .4rem; }
.nav-cuenta .avatar { width: 28px; height: 28px; font-size: .8rem; }

.cuenta-avatar {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem;
    margin: 1rem 0 1.5rem;
}
.avatar-grande { width: 84px; height: 84px; font-size: 2rem; }
.cuenta-datos { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cuenta-nombre { margin: 0; font-weight: 800; font-size: 1.1rem; }
.cuenta-foto { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cuenta-foto input[type="file"] { max-width: 100%; }

/* Encuadre del avatar: botón en la tarjeta + ventana de ajuste */
.avatar-abrir {
    position: relative;
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.avatar-abrir .avatar { display: block; }
.avatar-abrir-pista {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--papel);
    border: 1px solid var(--borde-fuerte);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    box-shadow: 0 2px 6px rgba(2, 8, 20, .18);
}

.modal-encuadre {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(2, 8, 20, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-encuadre[hidden] { display: none; }
.modal-encuadre-caja {
    background: var(--papel);
    border-radius: var(--radio);
    padding: 1.2rem;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(2, 8, 20, .3);
}
.modal-encuadre-caja h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.modal-encuadre-acciones {
    display: flex;
    gap: .6rem;
    justify-content: center;
    margin-top: 1rem;
}
body.sin-scroll { overflow: hidden; }

/* Círculo de previsualización (se arrastra con el ratón o el dedo) */
.avatar-preview {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--papel);
    box-shadow: 0 6px 18px rgba(2, 8, 20, .18);
    background: var(--marfil);
    cursor: grab;
    touch-action: none;
    margin: 0 auto;
}
.avatar-preview.arrastrando { cursor: grabbing; }
.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.agotado { color: var(--rojo); font-weight: 700; font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; }

/* ------------------------------ Detalle producto ----------- */
.detalle {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.6rem;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.5rem;
    margin: 1rem 0;
}
.detalle-img {
    aspect-ratio: 1;
    background-color: var(--marfil);
    border-radius: var(--radio);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 5rem;
    color: var(--terracota);
    font-weight: 700;
    overflow: hidden;
}
.detalle-img img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.detalle-precio { font-size: 2rem; font-weight: 800; color: var(--terracota); margin: .4rem 0; }
.detalle .descripcion { color: var(--tinta-2); }

.cantidad-linea { display: flex; gap: .7rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.cantidad-linea input {
    width: 5rem;
    padding: .5rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    font: inherit;
    text-align: center;
    min-height: 34px;
}

/* ------------------------------ Carrito / tablas ----------- */
.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}
.tabla th, .tabla td {
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--borde);
    text-align: left;
    vertical-align: middle;
}
.tabla th {
    background: var(--tinta);
    color: var(--papel);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
}
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }

.cantidad-control { display: inline-flex; gap: .35rem; align-items: center; }
.cantidad-control input {
    width: 4.2rem;
    padding: .35rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    text-align: center;
    font: inherit;
    min-height: 32px;
}

.resumen {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-top: 4px solid var(--tinta);
    border-radius: var(--radio);
    padding: 1rem;
    margin: 1rem 0;
}
.resumen .linea { display: flex; justify-content: space-between; padding: .25rem 0; }
.resumen .total {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.25rem; font-weight: 700;
    border-top: 1px solid var(--borde);
    margin-top: .5rem; padding-top: .6rem;
}
.envio-gratis { color: var(--oliva); font-weight: 700; }

/* ------------------------------ Formularios ---------------- */
.formulario {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.4rem;
    max-width: 520px;
    margin: 1rem 0 2rem;
}
.formulario .campo { margin-bottom: .95rem; }
.formulario label { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .9rem; }
.formulario input, .formulario textarea, .formulario select {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    font: inherit;
    background: var(--papel);
    color: var(--tinta);
    min-height: 38px;
}
.formulario input:focus, .formulario textarea:focus, .formulario select:focus {
    outline: 3px solid var(--terracota);
    outline-offset: 1px;
    border-color: var(--terracota);
}
.formulario .ayuda { font-size: .84rem; color: var(--tinta-2); margin-top: .25rem; }
.formulario .ayuda-error { color: #8a1f1f; font-weight: 600; }

/* Filas de campos que se reparten en columnas según el ancho disponible */
.formulario .fila-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .9rem;
}
.formulario .fila-campos .campo { margin-bottom: .95rem; }

/* Campos cortos (p. ej. código postal): no ocupan todo el ancho */
.formulario .campo-cp { max-width: 13rem; }
.formulario .check { display: flex; gap: .5rem; align-items: center; }
.formulario .check input { width: auto; min-height: 20px; }
.ancho-completo { max-width: 760px; }

/* ------------------------------ Badges estado -------------- */
.badge-estado {
    display: inline-block;
    padding: .18rem .65rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.e-pendiente { background: #fdf6e3; color: #7a5510; }
.e-pagado    { background: #e6eefb; color: #1e3a8a; }
.e-enviado   { background: #e9e6fb; color: #4c1d95; }
.e-entregado { background: #e7f5ee; color: #14532d; }
.e-cancelado { background: #fdeceb; color: #8a1f1f; }

/* ------------------------------ Admin ---------------------- */
.admin-cuerpo { background: var(--fondo); }
.barra-admin {
    background: var(--tinta);
    color: var(--papel);
    padding: .6rem 0;
}
.barra-admin .contenedor { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.barra-admin-nav { display: contents; }
.admin-menu { display: contents; }
.barra-admin-nav .ver-tienda { margin-left: auto; }
.barra-admin a { color: rgba(255, 255, 255, .86); font-weight: 600; min-height: 24px; display: inline-flex; align-items: center; }
.barra-admin .salir { color: rgba(255, 255, 255, .86); }
.barra-admin a:hover, .barra-admin a.activo { color: var(--papel); text-decoration: none; box-shadow: inset 0 -2px 0 var(--terracota); }
.barra-admin .titulo { font-weight: 700; color: var(--papel); margin-right: .5rem; }

.tarjetas-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.stat {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-top: 4px solid var(--terracota);
    border-radius: var(--radio);
    padding: 1rem;
}
.stat .valor { font-size: 1.8rem; font-weight: 800; color: var(--tinta); }
.stat .etiqueta { color: var(--tinta-2); font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; }

.acciones { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ------------------------------ Pedido --------------------- */
.exito {
    text-align: center;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-top: 6px solid var(--oliva);
    border-radius: var(--radio);
    padding: 2rem 1rem;
    margin: 1.5rem 0;
}
.exito .icono { font-size: 3rem; }
.exito h2 { border: 0; margin-top: 0; }

/* ------------------------------ Pie ------------------------ */
.pie {
    background: var(--papel);
    border-top: 1px solid var(--borde-fuerte);
    margin-top: 2.5rem;
    padding: 1.3rem 0;
    color: var(--tinta-2);
    font-size: .92rem;
}
.pie-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pie p { margin: 0; }
.pie-legal { color: var(--oliva); font-weight: 600; }
.pie-instalar { color: var(--terracota); font-weight: 700; }

/* ------------------------------ Responsive ----------------- */
@media (max-width: 720px) {
    .nav-toggle { display: block; }
    .nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
        padding: .6rem 0;
    }
    .nav.abierto { display: flex; }
    .admin-toggle { order: 2; margin-left: auto; }
    .barra-admin .notif-grupo { order: 3; }
    .admin-menu {
        order: 4;
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: .55rem;
        padding-top: .4rem;
    }
    .admin-menu.abierto { display: flex; }
    .admin-menu .ver-tienda { margin-left: 0; }
    .detalle { grid-template-columns: 1fr; }
    .tabla { display: block; overflow-x: auto; }
    .pie-inner { flex-direction: column; }
    .hero { padding: 1.8rem 1.2rem; }
    /* Pedidos: en móvil, desplegable en vez de chips */
    .chips-escritorio { display: none; }
    .filtro-estado-movil { display: flex; }
}

/* ---------------- Tablets y móviles: 2 columnas ------------- */
@media (max-width: 900px) {
    /* Productos en 2 columnas (filas de 2) con tarjetas compactas */
    .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    .tarjeta-img { font-size: 2.3rem; }
    .etiqueta-cat { font-size: .68rem; padding: .2rem .5rem; }
    .tarjeta-cuerpo { padding: .7rem .75rem .8rem; gap: .3rem; }
    .tarjeta-cuerpo .nombre { font-size: .9rem; }
    .tarjeta-cuerpo .precio { font-size: 1.05rem; }
    .fila-precio { flex-direction: column; align-items: stretch; gap: .4rem; }
    .fila-precio .btn { width: 100%; padding: .5rem; font-size: .76rem; }
}

/* --------------------- Movimiento reducido (WCAG 2.3) ------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============ Panel: badge de pendientes y aviso ============ */
.badge-pendientes {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--terracota);
    color: var(--papel);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.6;
}

.aviso-panel {
    background: #fdf6e3;
    border: 1px solid #ecd9a5;
    border-left: 5px solid var(--terracota);
    border-radius: var(--radio);
    padding: .8rem 1rem;
    margin: 1rem 0;
    font-weight: 600;
    color: #7a5510;
}
.aviso-panel a { font-weight: 700; }

/* ============ Campanita de notificaciones (header) ============ */
.campana-notif {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--marfil);
    color: var(--tinta);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    padding: .3rem .55rem;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    min-height: 34px;
    cursor: pointer;
}
.campana-notif:hover { background: var(--papel); text-decoration: none; }
.campana-notif.campana-inactiva { opacity: .6; }
.campana-contador {
    background: var(--terracota);
    color: var(--papel);
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.6;
}
/* En la barra oscura del panel */
.barra-admin .campana-notif {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    color: var(--papel);
}
.barra-admin .campana-notif:hover { background: rgba(255, 255, 255, .22); }

/* Grupo: campanita + botón manual + popup recordatorio */
.notif-grupo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.campana-activar {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--terracota);
    color: var(--papel);
    border: 0;
    border-radius: var(--radio);
    padding: .35rem .7rem;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    min-height: 34px;
    cursor: pointer;
}
.campana-activar:hover { background: var(--terracota-osc); }
.campana-activar[hidden] { display: none; }

/* Popup recordatorio, anclado a la campanita */
.notif-popup {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 60;
    width: min(19rem, calc(100vw - 2rem));
    background: var(--papel);
    border: 1px solid var(--borde-fuerte);
    border-left: 5px solid var(--terracota);
    border-radius: var(--radio);
    box-shadow: 0 10px 24px rgba(2, 8, 20, .16);
    padding: .85rem .95rem;
    text-align: left;
}
.notif-popup[hidden] { display: none; }
.notif-popup-texto {
    margin: 0 0 .7rem;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--tinta);
}
.notif-popup-acciones { display: flex; align-items: center; gap: .5rem; }
.notif-popup-acciones .btn { flex: 1; }
.notif-popup-cerrar {
    background: none;
    border: 0;
    color: var(--tinta-2);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: .3rem .5rem;
    min-height: 34px;
}
.notif-popup-cerrar:hover { color: var(--terracota); }

/* Panel de avisos (centro de notificaciones) */
.notif-panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 61;
    width: min(20rem, calc(100vw - 2rem));
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    background: var(--papel);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    box-shadow: 0 12px 28px rgba(2, 8, 20, .18);
    text-align: left;
}
.notif-panel[hidden] { display: none; }
.notif-panel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    background: var(--papel);
}
.notif-panel-cabecera strong { font-size: .95rem; }
.notif-lista { list-style: none; margin: 0; padding: 0; }
.notif-item { border-bottom: 1px solid var(--borde); }
.notif-item:last-child { border-bottom: 0; }
.notif-item-enlace {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .6rem .8rem;
    color: var(--tinta);
    text-decoration: none;
}
.notif-item-enlace:hover { background: var(--fondo); text-decoration: none; }
.notif-item.no-leida { background: #f0f9f4; }
.notif-item.no-leida .notif-item-enlace:hover { background: #e7f5ee; }
.notif-item-icono { font-size: 1.15rem; line-height: 1.25; }
.notif-item-cuerpo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.notif-item-titulo { font-weight: 700; font-size: .88rem; line-height: 1.25; }
.notif-item-texto { font-size: .82rem; color: var(--tinta-2); }
.notif-item-fecha { font-size: .72rem; color: var(--tinta-2); opacity: .85; }
.notif-vacio { margin: 0; padding: 1.1rem .8rem; font-size: .86rem; color: var(--tinta-2); text-align: center; }
.notif-panel-enlace {
    display: block;
    padding: .6rem .8rem;
    font-weight: 700;
    font-size: .85rem;
    border-top: 1px solid var(--borde);
    color: var(--terracota);
    text-decoration: none;
}
.notif-panel-enlace:hover { background: var(--fondo); text-decoration: none; }
.notif-panel-push {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .8rem;
    border-top: 1px solid var(--borde);
    font-size: .8rem;
    color: var(--tinta-2);
}

/* ============ Botón flotante de WhatsApp ============ */
@keyframes onda {
    0%   { box-shadow: 0 0 0 0 rgba(18, 140, 75, .45), 0 8px 20px rgba(18, 140, 75, .35); }
    70%  { box-shadow: 0 0 0 16px rgba(18, 140, 75, 0), 0 8px 20px rgba(18, 140, 75, .35); }
    100% { box-shadow: 0 0 0 0 rgba(18, 140, 75, 0), 0 8px 20px rgba(18, 140, 75, .35); }
}
@keyframes mano-saludo {
    0%   { opacity: 0; transform: scale(.45) rotate(0deg); }
    3%   { opacity: 1; transform: scale(1.35) rotate(-18deg); }
    6%   { opacity: 1; transform: scale(1.32) rotate(14deg); }
    9%   { opacity: 1; transform: scale(1.30) rotate(-12deg); }
    12%  { opacity: 1; transform: scale(1.26) rotate(10deg); }
    15%  { opacity: 1; transform: scale(1.22) rotate(0deg); }
    20%  { opacity: .6; transform: scale(.85) rotate(-6deg); }
    26%  { opacity: 0; transform: scale(.35) rotate(0deg); }
    100% { opacity: 0; transform: scale(.35) rotate(0deg); }
}

.whatsapp-flotante {
    position: fixed;
    right: 1rem;
    bottom: var(--wa-bottom, calc(1rem + env(safe-area-inset-bottom, 0px)));
    z-index: 150;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #128c4b;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(18, 140, 75, .35);
    animation: onda 2.6s ease-out infinite;
    transition: transform .15s ease, background .15s ease;
}
.whatsapp-flotante:hover { background: #0f7a41; transform: translateY(-2px) scale(1.04); text-decoration: none; }
.whatsapp-flotante svg { width: 30px; height: 30px; fill: currentColor; }

/* Mano que saluda: crece, saluda y se encoge hasta desaparecer cada 3 s */
.wa-mano {
    position: absolute;
    top: -18px;
    left: -16px;
    font-size: 1.7rem;
    line-height: 1;
    transform-origin: 70% 85%;
    animation: mano-saludo 10s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(2, 8, 20, .25));
    pointer-events: none;
    will-change: transform, opacity;
}

/* Con movimiento reducido, la mano queda visible y quieta */
@media (prefers-reduced-motion: reduce) {
    .wa-mano {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============ PWA: instalar app ============ */
@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, .5); }
    50%      { box-shadow: 0 0 0 7px rgba(4, 120, 87, 0); }
}

.nav-instalar {
    background: var(--terracota);
    color: var(--papel) !important;
    border: 0;
    border-radius: var(--radio);
    padding: .45rem .9rem;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    animation: latido 1.8s ease-out infinite;
}
.nav-instalar:hover { background: var(--terracota-osc); }
.nav-instalar[hidden], .pie-instalar[hidden], .banner-instalar[hidden], .modal-instalar[hidden] { display: none; }

.pie-instalar { animation: latido 1.8s ease-out infinite; }

/* Punto pulsante en el botón hamburguesa cuando la app es instalable */
.nav-toggle { position: relative; }
.nav-toggle.tiene-instalar::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--terracota);
    animation: latido 1.8s ease-out infinite;
}

/* Banner automático de instalación */
.banner-instalar {
    position: fixed;
    left: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 240;
    max-width: min(420px, calc(100vw - 5.5rem));
    background: var(--papel);
    border: 1px solid var(--borde-fuerte);
    border-left: 5px solid var(--terracota);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    animation: aparecer .35s both ease-out;
}
.banner-instalar p { margin: 0; flex: 1 1 12rem; font-size: .92rem; }
.banner-instalar .acciones { display: flex; gap: .5rem; }

/* Modal de instrucciones (iPhone) */
.modal-instalar {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(45, 38, 32, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-instalar .caja {
    background: var(--papel);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    max-width: 430px;
    padding: 1.4rem;
}
.modal-instalar h2 { margin-top: 0; border: 0; }
.modal-instalar p { color: var(--tinta-2); }