/* =========================================================
   CatalogoWeb — sistema de diseño
   Nota: las clases con prefijo antiguo (tabla-admin, formulario,
   boton, tarjeta-producto, etc.) se mantienen para no romper el
   panel administrativo, que se rediseñará en una próxima entrega.
   ========================================================= */

:root {
    --color-primario: #4338ca;
    --color-primario-hover: #3730a3;
    --color-primario-suave: #eef2ff;
    --color-acento: #f59e0b;

    --color-texto: #1f2430;
    --color-texto-suave: #6b7280;
    --color-borde: #e5e7eb;
    --color-fondo: #f6f7fb;
    --color-superficie: #ffffff;

    --color-exito: #16a34a;
    --color-exito-fondo: #dcfce7;
    --color-peligro: #dc2626;
    --color-peligro-fondo: #fee2e2;
    --color-advertencia-fondo: #fef9c3;
    --color-advertencia-texto: #854d0e;
    --color-info-fondo: #dbeafe;
    --color-info-texto: #1e40af;

    --radio: 12px;
    --radio-sm: 8px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --sombra-hover: 0 8px 24px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 .3rem; }
h2 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 1rem; }
h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
a { color: var(--color-primario); }

.pagina-encabezado { margin-bottom: 1.5rem; }
.pagina-encabezado p { color: var(--color-texto-suave); margin: .2rem 0 0; }

/* ---------- Encabezado / menú ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #171a2b;
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.navbar {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .85rem 1.5rem;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.15rem;
    margin-right: auto;
    white-space: nowrap;
}
.nav-brand .logo-icono {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--color-primario), #7c6ef2);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
    flex-shrink: 0;
}

.nav-toggle { display: none; }
.nav-toggle-label {
    display: none;
    color: #fff;
    cursor: pointer;
    padding: .4rem;
}
.nav-toggle-label svg { display: block; }

.nav-links {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.nav-links a {
    color: rgba(255,255,255,.82);
    text-decoration: none;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.nav-links a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.nav-links a.activo { background: rgba(255,255,255,.12); color: #fff; }

.nav-links a.nav-link-icono {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.nav-cuenta {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-left: .5rem;
    padding-left: .85rem;
    border-left: 1px solid rgba(255,255,255,.15);
}
.user-email {
    color: rgba(255,255,255,.55);
    font-size: .82rem;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-links a.salir { color: rgba(255,255,255,.7); }

.badge-notificacion {
    display: inline-block;
    background: var(--color-acento);
    color: #171a2b;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    padding: .05rem .4rem;
    margin-left: .35rem;
    vertical-align: middle;
}

/* Mismo look que .badge-notificacion, para el contador del carrito. Se
   actualiza en vivo desde site.js (Agregar/Actualizar/Eliminar por AJAX),
   así que empieza oculto (display:none inline, ver el ViewComponent) y
   site.js le quita/pone ese estilo según haya o no unidades. */
.badge-carrito-nav {
    display: inline-block;
    background: var(--color-acento);
    color: #171a2b;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    padding: .05rem .4rem;
    margin-left: .35rem;
    vertical-align: middle;
}

/* ---------- Toasts (mensajes flotantes de site.js) ----------
   Progressive enhancement: las acciones AJAX del carrito no recargan la
   página, así que TempData (las .alerta de arriba de <main>) no sirve
   para avisar "agregado al carrito" — se usa este toast flotante en su
   lugar, con el mismo lenguaje visual (alerta-ok / alerta-error). */
#toast-contenedor {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(360px, calc(100vw - 2rem));
}
.toast {
    background: var(--color-superficie);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-hover);
    padding: .8rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    border-left: 4px solid var(--color-exito);
    animation: toast-entrada .2s ease-out;
}
.toast.toast-error { border-left-color: var(--color-peligro); }
@keyframes toast-entrada {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.toast.toast-saliendo { opacity: 0; transform: translateX(12px); transition: opacity .2s, transform .2s; }

@media (max-width: 880px) {
    .navbar { flex-wrap: wrap; }
    .nav-toggle-label { display: block; margin-left: auto; }
    .nav-links {
        flex-basis: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        padding-top: .6rem;
        border-top: 1px solid rgba(255,255,255,.1);
        margin-top: .6rem;
    }
    .nav-toggle:checked ~ .nav-links { display: flex; }
    .nav-links a { padding: .65rem .5rem; }
    .nav-cuenta {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 0;
        padding-left: .5rem;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.1);
        padding-top: .5rem;
        margin-top: .3rem;
        width: 100%;
    }
    .user-email { max-width: none; }
}

/* ---------- Layout general ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.alerta { padding: .8rem 1.1rem; border-radius: var(--radio-sm); margin-bottom: 1.25rem; font-size: .92rem; border: 1px solid transparent; }
.alerta-ok { background: var(--color-exito-fondo); color: #166534; border-color: #bbf7d0; }
.alerta-error { background: var(--color-peligro-fondo); color: #991b1b; border-color: #fecaca; }

/* ---------- Banner de tienda (página pública /tienda/{slug}) ---------- */
.banner-tienda {
    border-radius: var(--radio);
    background: linear-gradient(135deg, var(--color-primario), var(--color-primario-hover));
    background-size: cover;
    background-position: center;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.banner-tienda.con-portada { background-blend-mode: multiply; }
.banner-tienda-contenido {
    padding: 2.2rem 1.5rem;
    background: rgba(0, 0, 0, .18);
    color: #fff;
}
.banner-tienda h1 { color: #fff; margin: 0 0 .5rem; }
.banner-tienda-datos { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .88rem; opacity: .95; margin-bottom: 1rem; }
.banner-tienda-acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn-whatsapp, .btn-instagram {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.1rem; border-radius: 999px;
    text-decoration: none; font-weight: 700; font-size: .88rem;
}
.btn-whatsapp { background: #25d366; color: #06301b; }
.btn-instagram { background: rgba(255, 255, 255, .92); color: #1f2430; }

/* ---------- Buscador del catálogo ---------- */
.barra-busqueda-catalogo { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.barra-busqueda-catalogo input[type="search"] {
    flex: 1; min-width: 200px; padding: .65rem 1rem;
    border-radius: 999px; border: 1px solid var(--color-borde);
    background: var(--color-superficie); font-size: .92rem;
}
.barra-busqueda-catalogo button { border-radius: 999px; padding: .6rem 1.4rem; }

/* ---------- Carrusel de fotos del producto (Catalogo/Detalle) ---------- */
.carrusel-producto { position: relative; width: 100%; height: 100%; }
.carrusel-producto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrusel-producto .slider-flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, .9); cursor: pointer; font-size: 1rem;
}
.carrusel-producto .slider-flecha.prev { left: .6rem; }
.carrusel-producto .slider-flecha.next { right: .6rem; }
.carrusel-miniaturas { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.carrusel-miniatura {
    width: 56px; height: 56px; object-fit: cover; border-radius: var(--radio-sm);
    cursor: pointer; border: 2px solid transparent; opacity: .7;
}
.carrusel-miniatura.activa { border-color: var(--color-primario); opacity: 1; }

/* ---------- Galería de fotos (admin) ---------- */
.galeria-admin-checks { display: flex; flex-wrap: wrap; gap: .8rem; margin: .5rem 0 1rem; }
.galeria-admin-item {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    font-size: .78rem; color: var(--color-texto-suave);
}
.galeria-admin-item .miniatura-admin { width: 70px; height: 70px; object-fit: cover; border-radius: var(--radio-sm); }

/* ---------- Filtros de categoría ---------- */
.filtros-categoria { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.filtros-categoria a {
    display: inline-block;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: all .15s;
}
.filtros-categoria a:hover { border-color: var(--color-primario); color: var(--color-primario); }
.filtros-categoria a.activo { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }

/* ---------- Grid de productos (cliente) ---------- */
.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem;
}
.tarjeta-producto {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    text-decoration: none;
    color: inherit;
    display: block;
    overflow: hidden;
    box-shadow: var(--sombra);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tarjeta-producto:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); border-color: #d9dcf5; }

.producto-imagen {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--color-primario-suave), #f5f3ff);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.producto-imagen img { width: 100%; height: 100%; object-fit: cover; }
.producto-imagen .producto-imagen-icono { color: #a5add9; }

.tarjeta-producto .cuerpo { padding: 1rem 1.1rem 1.1rem; }
.tarjeta-producto h3 { margin: 0 0 .25rem; font-size: 1rem; }
.tarjeta-producto .categoria {
    color: var(--color-texto-suave); font-size: .78rem; margin: 0 0 .6rem;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.tarjeta-producto .fila-precio { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tarjeta-producto .precio { font-weight: 800; font-size: 1.05rem; margin: 0; }
.tarjeta-producto .precio span { font-weight: 500; font-size: .72rem; color: var(--color-texto-suave); display: block; }

.badge-stock {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .74rem; font-weight: 700; padding: .25rem .55rem; border-radius: 999px;
}
.badge-stock.disponible { background: var(--color-exito-fondo); color: #166534; }
.badge-stock.agotado { background: var(--color-peligro-fondo); color: #991b1b; }

.vacio {
    background: var(--color-superficie);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--color-texto-suave);
}
.vacio a { font-weight: 600; }

/* ---------- Paginación del catálogo ---------- */
.paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .35rem;
    margin: 2.5rem 0 1rem;
    flex-wrap: wrap;
}
.paginacion-numero, .paginacion-flecha {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: border-color .15s, color .15s, background .15s;
}
.paginacion-numero:hover, .paginacion-flecha:hover { border-color: var(--color-primario); color: var(--color-primario); }
.paginacion-numero.activo {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
    cursor: default;
}
.paginacion-flecha.deshabilitado {
    opacity: .4;
    pointer-events: none;
}
.paginacion-puntos { color: var(--color-texto-suave); padding: 0 .15rem; }

/* ---------- Detalle de producto ---------- */
.producto-detalle {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 2.5rem;
    align-items: start;
}
.producto-detalle-imagen {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radio);
    background: linear-gradient(135deg, var(--color-primario-suave), #f5f3ff);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 1px solid var(--color-borde);
}
.producto-detalle-imagen img { width: 100%; height: 100%; object-fit: cover; }
.cinta-descuento {
    position: absolute; top: .8rem; left: .8rem; z-index: 2;
    background: var(--color-peligro); color: #fff;
    font-size: .8rem; font-weight: 800; padding: .3rem .65rem; border-radius: 999px;
    box-shadow: var(--sombra);
}
.producto-detalle-info .categoria {
    color: var(--color-primario); font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .3rem;
}
.titulo-fila { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.titulo-fila h1 { margin: 0; }
.producto-detalle-info .descripcion { color: var(--color-texto-suave); margin: .5rem 0 1.5rem; }
.meta-producto { color: var(--color-texto-suave); font-size: .8rem; margin-top: 1rem; }
/* ---------- Atributos de una variante: swatch de color, badge de
   talla y texto simple para marca/modelo — reemplaza los chips grises
   idénticos que hacían ver cualquier variante igual de "seca". ---------- */
.atributos-variante { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 0 0 .6rem; }
.atributo-texto { font-size: .85rem; color: var(--color-texto-suave); }
.atributo-color { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--color-texto); font-weight: 600; }
.swatch-color {
    width: 17px; height: 17px; border-radius: 50%; display: inline-block;
    border: 1px solid rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px var(--color-superficie);
}
.badge-talla {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 .4rem;
    border: 1.5px solid var(--color-borde); border-radius: 7px;
    font-size: .8rem; font-weight: 700; color: var(--color-texto);
}
.etiqueta-mini-oferta {
    background: var(--color-acento); color: #1f2430; font-size: .7rem; font-weight: 800;
    padding: .18rem .55rem; border-radius: 999px;
}
.tarjeta-presentacion .atributos-variante { padding: 0 1.1rem; margin: -.3rem 0 .6rem; }

/* Utilidad genérica de pastilla pequeña — pedidos y notificaciones. */
.chip {
    display: inline-block;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    font-size: .76rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
}

/* ---------- Disponibilidad (punto de estado) ---------- */
.disponibilidad { display: flex; align-items: center; gap: .45rem; font-size: .85rem; margin: 0 0 1rem; }
.disponibilidad.en-stock { color: #166534; }
.disponibilidad.agotado { color: #991b1b; }
.punto-estado { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---------- Panel de compra (una presentación = un producto) ---------- */
.panel-compra { max-width: 420px; }
.precio-fila-grande { display: flex; align-items: baseline; gap: .6rem; margin: .5rem 0 .4rem; }
.precio-grande { font-size: 1.9rem; font-weight: 800; }
.precio-tachado-grande { font-size: 1.1rem; color: var(--color-texto-suave); text-decoration: line-through; font-weight: 500; }
.formulario-compra { display: flex; gap: .6rem; align-items: center; }
.formulario-compra .input-cantidad { width: 70px; }
.formulario-compra .btn { flex: 1; }

/* ---------- Sugerencias (debajo del bloque foto + info, ancho completo) ---------- */
.sugerencias-titulo { margin: 2.5rem 0 1rem; font-size: 1.15rem; }
.slider-sugerencias-envoltorio { position: relative; }
.slider-sugerencias {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .2rem .2rem 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.slider-sugerencias::-webkit-scrollbar { display: none; }
.slider-sugerencias-item {
    scroll-snap-align: start;
    flex: 0 0 230px;
}
.slider-sugerencias-item .tarjeta-producto { height: 100%; }


/* ---------- Botones ---------- */
.btn, .boton, .formulario button, .formulario-inline button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: var(--color-primario);
    color: #fff;
    border: none;
    padding: .65rem 1.15rem;
    border-radius: var(--radio-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, transform .05s;
}
.btn:hover, .boton:hover, .formulario button:hover, .formulario-inline button:hover { background: var(--color-primario-hover); }
.btn:active, .formulario button:active { transform: translateY(1px); }
.btn-full { width: 100%; }
.btn-outline {
    background: transparent;
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
}
.btn-outline:hover { background: var(--color-primario-suave); }
.btn-sm { padding: .4rem .75rem; font-size: .82rem; }
.btn-block { display: flex; width: 100%; }

.enlace-volver {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--color-texto-suave); text-decoration: none;
    font-size: .88rem; font-weight: 600; margin-bottom: 1rem;
}
.enlace-volver:hover { color: var(--color-primario); }

/* ---------- Formularios ---------- */
.formulario, .form-card { max-width: 420px; display: flex; flex-direction: column; gap: .3rem; }
.formulario label, .form-card label { font-weight: 600; margin-top: .8rem; font-size: .88rem; }
.formulario input, .formulario select, .formulario textarea,
.form-card input, .form-card select, .form-card textarea {
    padding: .65rem .75rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    font: inherit;
    background: var(--color-superficie);
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus,
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-suave);
}
.formulario button, .form-card button { margin-top: 1.25rem; }
.error, .field-error { color: var(--color-peligro); font-size: .82rem; }
.texto-ayuda { color: var(--color-texto-suave); font-size: .82rem; margin: .2rem 0 0; }

.tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.5rem;
    box-shadow: var(--sombra);
}

/* ---------- Autenticación ---------- */
.auth-envoltorio {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}
.auth-tarjeta {
    width: 100%;
    max-width: 400px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 2rem;
    text-align: center;
}
.auth-tarjeta h1 { text-align: center; }
.auth-tarjeta .formulario { max-width: none; text-align: left; margin-top: 1.25rem; }
.auth-tarjeta .subenlace { margin-top: 1.25rem; font-size: .9rem; color: var(--color-texto-suave); }

/* ---------- Carrito ---------- */
.lista-carrito { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.5rem; }
.item-carrito {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1rem 1.2rem;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 1rem;
    align-items: center;
    box-shadow: var(--sombra);
}
.item-carrito .info-producto strong { display: block; margin-bottom: .15rem; }
.item-carrito .info-producto .chips-variante { margin: 0; }
.item-carrito .precio-unitario { color: var(--color-texto-suave); font-size: .85rem; white-space: nowrap; }
.item-carrito .subtotal-item { font-weight: 700; white-space: nowrap; }

.resumen-carrito {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: var(--sombra);
}

@media (max-width: 640px) {
    .item-carrito { grid-template-columns: 1fr; text-align: left; }
}

/* ---------- Pedidos ---------- */
.lista-pedidos { display: flex; flex-direction: column; gap: .85rem; }
.tarjeta-pedido {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sombra);
    transition: box-shadow .15s, border-color .15s;
}
.tarjeta-pedido:hover { box-shadow: var(--sombra-hover); border-color: #d9dcf5; }
.tarjeta-pedido .numero-pedido { font-weight: 800; font-size: 1rem; }
.tarjeta-pedido .fecha-pedido { color: var(--color-texto-suave); font-size: .85rem; }
.tarjeta-pedido .total-pedido { font-weight: 700; }

.ficha-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.ficha-info .dato { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-sm); padding: .85rem 1rem; }
.ficha-info .dato .etiqueta { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-suave); font-weight: 700; margin-bottom: .25rem; }

/* ---------- Estados (pedido / pago / movimiento) ---------- */
.etiqueta-estado, .etiqueta-pago, .etiqueta-movimiento {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
}
.etiqueta-estado.pendiente, .etiqueta-pago.pendiente { background: var(--color-advertencia-fondo); color: var(--color-advertencia-texto); }
.etiqueta-estado.asignado { background: var(--color-info-fondo); color: var(--color-info-texto); }
.etiqueta-estado.encamino { background: #ede9fe; color: #5b21b6; }
.etiqueta-estado.entregado, .etiqueta-pago.pagado { background: var(--color-exito-fondo); color: #166534; }
.etiqueta-estado.aprobado { background: var(--color-exito-fondo); color: #166534; }
.etiqueta-estado.cancelado, .etiqueta-pago.cancelado, .etiqueta-pago.rechazado { background: var(--color-peligro-fondo); color: #991b1b; }
.etiqueta-estado.rechazado { background: var(--color-peligro-fondo); color: #991b1b; }
.etiqueta-pago.pendienteaprobacion { background: var(--color-info-fondo); color: var(--color-info-texto); }
.etiqueta-movimiento.entrada { background: var(--color-exito-fondo); color: #166534; }
.etiqueta-movimiento.salida { background: var(--color-peligro-fondo); color: #991b1b; }

/* ---------- Notificaciones ---------- */
.lista-notificaciones { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.lista-notificaciones li {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-left: 3px solid var(--color-primario);
    border-radius: var(--radio-sm);
    padding: .9rem 1.1rem;
}
.lista-notificaciones li.no-leida { border-left-color: var(--color-acento); background: #fffbeb; }
.lista-notificaciones p { margin: 0 0 .35rem; }
.nota { color: var(--color-texto-suave); font-size: .82rem; }

/* ---------- Comprobantes ---------- */
.tarjeta-comprobante {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra);
}
.imagen-comprobante {
    max-width: 300px;
    max-height: 300px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde);
    margin-top: .5rem;
}

/* =========================================================
   Compatibilidad con el panel administrativo (sin rediseñar aún)
   ========================================================= */
.tabla-admin, .tabla-presentaciones { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--color-superficie); border-radius: var(--radio-sm); overflow: hidden; box-shadow: var(--sombra); }
.tabla-admin th, .tabla-admin td, .tabla-presentaciones th, .tabla-presentaciones td {
    text-align: left;
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--color-borde);
}
.tabla-admin th, .tabla-presentaciones th { background: #fafafa; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-texto-suave); }
.tabla-admin a { margin-right: .6rem; }

.resumen-estados { list-style: none; padding: 0; }
.resumen-estados li {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    padding: .6rem 1rem;
    margin-bottom: .5rem;
}

.inline { display: inline; }
.link-boton {
    background: none;
    border: none;
    color: var(--color-primario);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.formulario-inline { display: flex; gap: .5rem; align-items: center; }
.input-cantidad { width: 60px; padding: .4rem; border: 1px solid var(--color-borde); border-radius: var(--radio-sm); }

.acciones-pedido { display: flex; gap: 1.25rem; margin-top: 1.5rem; flex-wrap: wrap; }
.acciones-pedido > div {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1rem;
    flex: 1;
    min-width: 250px;
}
.total { font-size: 1.15rem; margin-top: 1rem; font-weight: 700; }
.detalle-presentacion { color: var(--color-texto-suave); font-size: .85rem; }

/* --- Miniatura de imagen en tablas de admin --- */
.miniatura-admin {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-borde, #e5e7eb);
}

/* --- Miniatura de imagen en el carrito --- */
.miniatura-carrito {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-borde, #e5e7eb);
}

/* ---------- Slider de destacados (catálogo público) ---------- */
.slider-destacados-envoltorio { position: relative; margin: 0 auto 1.5rem; max-width: 900px; }
.slider-destacados {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .2rem .2rem .5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.slider-destacados::-webkit-scrollbar { display: none; }
.slide-destacado {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: min(220px, 62vw);
    background: linear-gradient(135deg, var(--color-primario) 0%, #6d28d9 100%);
    border-radius: var(--radio-sm);
    padding: .65rem;
    color: #fff;
    display: flex;
    gap: .6rem;
    align-items: center;
    text-decoration: none;
    box-shadow: var(--sombra);
}
.slide-destacado:hover { text-decoration: none; filter: brightness(1.04); }
.slide-destacado-imagen {
    width: 52px; height: 52px; flex: 0 0 auto; border-radius: 8px;
    background: rgba(255,255,255,.15); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.slide-destacado-imagen img { width: 100%; height: 100%; object-fit: cover; }
.slide-destacado-info { min-width: 0; }
.slide-destacado-etiqueta {
    display: inline-block; background: var(--color-acento); color: #1f2430;
    font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    padding: .1rem .4rem; border-radius: 999px; margin-bottom: .25rem;
}
.slide-destacado h3 {
    color: #fff; margin: 0 0 .1rem; font-size: .8rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slide-destacado .precio-slide { font-weight: 800; font-size: .85rem; margin: 0; }
.slide-destacado .precio-tachado { text-decoration: line-through; opacity: .7; font-weight: 500; font-size: .68rem; margin-right: .3rem; }
.slider-flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-borde);
    background: var(--color-superficie); box-shadow: var(--sombra); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--color-texto);
    z-index: 2;
}
.slider-flecha.prev { left: -10px; }
.slider-flecha.next { right: -10px; }
@media (max-width: 640px) { .slider-flecha { display: none; } }

.slider-puntos { display: flex; justify-content: center; gap: .35rem; margin-top: .5rem; }
.slider-punto {
    width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
    background: var(--color-borde); cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.slider-punto.activo { background: var(--color-primario); transform: scale(1.25); }

/* ---------- Grilla del catálogo: una tarjeta por presentación ---------- */
.tarjeta-presentacion .chips-variante { padding: 0 1.1rem; margin-top: -.3rem; }
.tarjeta-presentacion .cuerpo { display: flex; flex-direction: column; gap: .5rem; }
.tarjeta-presentacion .fila-precio .precio-tachado { text-decoration: line-through; color: var(--color-texto-suave); font-weight: 500; font-size: .78rem; margin-right: .35rem; }
.tarjeta-presentacion .etiqueta-destacado-mini {
    position: absolute; top: .6rem; left: .6rem; background: var(--color-acento); color: #1f2430;
    font-size: .68rem; font-weight: 800; text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px;
    z-index: 1;
}
.tarjeta-presentacion { position: relative; }
.tarjeta-presentacion form.formulario-inline { padding: 0 1.1rem 1.1rem; margin: 0; }
.tarjeta-presentacion form.formulario-inline button { margin: 0; }

/* ---------- Elegir cómo registrar un negocio ---------- */
.opciones-registro { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.opcion-registro {
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    padding: 1.5rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .6rem;
}
.opcion-registro h3 { margin: 0; }
.opcion-registro p { color: var(--color-texto-suave); margin: 0; flex: 1; font-size: .9rem; }
.opcion-registro .badge-plan {
    align-self: flex-start; font-size: .7rem; font-weight: 700; text-transform: uppercase;
    padding: .2rem .55rem; border-radius: 999px; background: var(--color-primario-suave); color: var(--color-primario);
}

/* ---------- Bloqueo de trial vencido ---------- */
.bloqueo-trial {
    max-width: 520px; margin: 3rem auto; text-align: center; background: var(--color-superficie);
    border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 2.5rem 2rem; box-shadow: var(--sombra);
}
.bloqueo-trial .icono-bloqueo { font-size: 2.5rem; margin-bottom: .5rem; }

/* ---------- Home: elegir tipo de acceso ---------- */
.opciones-acceso { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.opcion-acceso {
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    padding: 1.75rem; text-align: center; text-decoration: none; color: var(--color-texto); box-shadow: var(--sombra);
    transition: transform .15s ease, box-shadow .15s ease;
}
.opcion-acceso:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); text-decoration: none; }
.opcion-acceso .icono-acceso { font-size: 2rem; margin-bottom: .6rem; display: block; }
.opcion-acceso h3 { margin: 0 0 .3rem; }
.opcion-acceso p { color: var(--color-texto-suave); font-size: .85rem; margin: 0; }

/* ---------- Landing page (Home/Index) ---------- */
.landing-hero {
    text-align: center;
    max-width: 720px;
    margin: 1.5rem auto 3rem;
}
.landing-eyebrow {
    display: inline-block;
    background: var(--color-primario-suave);
    color: var(--color-primario);
    font-size: .8rem;
    font-weight: 700;
    padding: .35rem .85rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}
.landing-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 .9rem;
}
.landing-hero .landing-subheadline {
    font-size: 1.05rem;
    color: var(--color-texto-suave);
    margin: 0 auto 1.75rem;
    max-width: 560px;
}
.landing-cta-grupo {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.landing-nota-trial {
    margin-top: .9rem;
    font-size: .82rem;
    color: var(--color-texto-suave);
}

.landing-seccion {
    max-width: 1080px;
    margin: 0 auto 3.5rem;
}
.landing-seccion-titulo {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 2rem;
}
.landing-seccion-titulo h2 { font-size: 1.6rem; margin: 0 0 .5rem; }
.landing-seccion-titulo p { color: var(--color-texto-suave); margin: 0; }

.landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}
.landing-feature-card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
}
.landing-feature-card .icono { font-size: 1.6rem; display: block; margin-bottom: .6rem; }
.landing-feature-card h3 { margin: 0 0 .4rem; font-size: 1rem; }
.landing-feature-card p { margin: 0; font-size: .88rem; color: var(--color-texto-suave); }

.landing-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    counter-reset: paso;
}
.landing-paso { text-align: center; }
.landing-paso .numero-paso {
    counter-increment: paso;
    width: 42px; height: 42px;
    border-radius: 999px;
    background: var(--color-primario);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    margin: 0 auto .9rem;
}
.landing-paso .numero-paso::before { content: counter(paso); }
.landing-paso h3 { margin: 0 0 .4rem; font-size: 1rem; }
.landing-paso p { margin: 0; font-size: .88rem; color: var(--color-texto-suave); }

.landing-precio-card { max-width: 380px; margin: 0 auto; background: var(--color-superficie); border: 2px solid var(--color-primario); border-radius: var(--radio); box-shadow: var(--sombra-hover); padding: 2rem; text-align: center; }
.landing-precio-badge { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primario); }
.landing-precio-monto { font-size: 2.4rem; font-weight: 800; margin: .5rem 0 0; }
.landing-precio-monto span { font-size: 1rem; font-weight: 500; color: var(--color-texto-suave); }
.landing-precio-lista {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    font-size: .9rem;
}
.landing-precio-lista li::before { content: "✓ "; color: var(--color-exito); font-weight: 800; }

.landing-faq { max-width: 720px; margin: 0 auto; }
.landing-faq details {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    padding: 1rem 1.25rem;
    margin-bottom: .75rem;
}
.landing-faq summary {
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: "+"; float: right; font-weight: 800; color: var(--color-primario); }
.landing-faq details[open] summary::after { content: "−"; }
.landing-faq p { margin: .75rem 0 0; color: var(--color-texto-suave); font-size: .9rem; }

.landing-cta-final {
    text-align: center;
    background: var(--color-primario);
    color: #fff;
    border-radius: var(--radio);
    padding: 3rem 2rem;
    max-width: 1080px;
    margin: 0 auto 3.5rem;
}
.landing-cta-final h2 { margin: 0 0 .6rem; color: #fff; }
.landing-cta-final p { margin: 0 0 1.5rem; opacity: .9; }
.landing-cta-final .btn { background: #fff; color: var(--color-primario); }
.landing-cta-final .btn:hover { background: #f3f4f6; }

/* ---------- Admin: selector de apariencia/branding ---------- */
.tarjeta-tema {
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    padding: 1rem; box-shadow: var(--sombra); cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: .6rem; font: inherit; color: var(--color-texto);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta-tema:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.tema-swatches { display: flex; gap: .3rem; }
.tema-swatches i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); display: block; }

.preview-apariencia { border: 1px dashed var(--color-borde); border-radius: var(--radio); padding: 2rem; transition: background .15s ease; }
.preview-tarjeta {
    max-width: 260px; background: var(--color-superficie); border-radius: var(--radio); padding: 1.1rem;
    box-shadow: var(--sombra); position: relative;
}
.preview-etiqueta {
    position: absolute; top: -10px; left: 1rem; color: #1f2430; font-size: .68rem; font-weight: 800;
    text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; transition: background .15s ease;
}
.preview-tarjeta h3 { margin: .6rem 0 .3rem; }
.preview-precio { font-weight: 800; font-size: 1.1rem; margin: 0 0 .8rem; transition: color .15s ease; }
.preview-boton {
    width: 100%; border: none; color: #fff; padding: .6rem; border-radius: var(--radio-sm);
    font-weight: 600; cursor: pointer; transition: background .15s ease;
}

/* ---------- Campanita de notificaciones (_Layout) ---------- */
.campanita-notificaciones { position: relative; text-decoration: none; font-size: 1.1rem; display: inline-flex; align-items: center; }
.badge-notificacion {
    position: absolute; top: -6px; right: -8px; background: var(--color-peligro); color: #fff;
    font-size: .62rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ---------- Dashboard: caja del link de la tienda ---------- */
.caja-link-tienda {
    background: var(--color-primario-suave); border: 1px solid var(--color-borde); border-radius: var(--radio);
    padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
}
.caja-link-tienda .etiqueta { display: block; font-size: .75rem; color: var(--color-texto-suave); margin-bottom: .3rem; }
.caja-link-tienda code {
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 6px;
    padding: .35rem .6rem; font-size: .85rem; display: inline-block; word-break: break-all;
}
.caja-link-tienda-botones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Pie de página de la tienda ---------- */
.pie-tienda { margin-top: 3rem; padding: 2.2rem 1.5rem 1.2rem; background: #1f2430; color: #cfd3e6; }
.pie-tienda-contenido {
    max-width: 1100px; margin: 0 auto; display: grid;
    grid-template-columns: 2fr 1fr 1fr; gap: 1.5rem; padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.pie-tienda-columna h3 { color: #fff; margin: 0 0 .4rem; font-size: 1rem; }
.pie-tienda-columna p { margin: 0 0 .4rem; font-size: .85rem; line-height: 1.5; }
.pie-tienda-enlaces { display: flex; flex-direction: column; gap: .4rem; }
.pie-tienda-enlaces a { color: #cfd3e6; text-decoration: none; font-size: .85rem; }
.pie-tienda-enlaces a:hover { color: #fff; text-decoration: underline; }
.pie-tienda-copyright { max-width: 1100px; margin: 1rem auto 0; font-size: .75rem; opacity: .7; text-align: center; }
@media (max-width: 640px) { .pie-tienda-contenido { grid-template-columns: 1fr; } }