/* =========================================================
   FARMAVITAE MARKETPLACE — SISTEMA DE DISEÑO
   Panel de vendedores + Panel de admin
   Farmacia / bienestar: confianza clínica + calidez humana.
   Todas las variables y clases usadas por script.js / admin.js
   se mantienen (ver comentarios "usado por JS").
   ========================================================= */

/* @import TIENE que ser lo primero del archivo (solo @charset/@layer
   pueden ir antes) — estaba después del bloque :root de abajo, así
   que el navegador lo ignoraba por completo y "Plus Jakarta Sans"
   (--fv-font) NUNCA se llegaba a cargar; todo lo que la usa caía en
   system-ui sin que se notara a simple vista. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* --- Paleta base (usada por JS inline y por toda la hoja) --- */
    --ink:        #0A1E3C;
    --ink-light:  #3A5478;
    --ink-muted:  #6A85A0;   /* usado por JS: mensajes "Cargando…" */
    --ink-subtle: #C2D4E8;
    --surface:    #F5FAFE;
    --surface-2:  #EBF4FB;
    --surface-3:  #DDF0F5;
    --white:      #FFFFFF;
    --brand:      #005BAA;
    --brand-mid:  #1472C4;
    --brand-dark: #062544;
    --accent:     #19D3D3;
    --accent-dim: rgba(25,211,211,.12);
    --error:      #C0392B;
    --success:    #19D3D3;
    --warning:    #E67E22;

    /* --- Sidebar (nuevo, para el shell de navegación) --- */
    --sidebar-1:      #08192F;
    --sidebar-2:      #0F2E56;
    --sidebar-text:   rgba(255,255,255,.68);
    --sidebar-text-hi:#FFFFFF;
    --sidebar-active: rgba(25,211,211,.16);

    /* --- Tipografía --- */
    --font:          'Poppins', sans-serif;
    --font-display:  'Manrope', sans-serif;
    --text-xs:    0.72rem;
    --text-sm:    0.85rem;
    --text-base:  1rem;
    --text-md:    1.125rem;
    --text-lg:    1.35rem;
    --text-xl:    1.75rem;
    --text-2xl:   2.25rem;

    /* --- Espaciado (usado por JS inline: --space-2, --space-4) --- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;

    --r-sm:  8px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-full: 9999px;

    --shadow-sm: 0 2px 8px rgba(13,31,53,.07);
    --shadow-md: 0 6px 20px rgba(13,31,53,.08);
    --shadow-lg: 0 16px 40px rgba(8,25,47,.16);
    --ease: .25s cubic-bezier(.4,0,.2,1);

    /* =====================================================
       SISTEMA VISUAL NUEVO (rediseño móvil) — se agrega SIN
       quitar las variables de arriba: Marketplace, Distribución,
       Fábrica y Perfil de tienda siguen usando --brand/--ink/etc.
       hasta que les toque su propio rediseño. Página por página,
       a medida que se migra, se reemplaza el uso de las variables
       viejas por estas.
       ===================================================== */
    --fv-blue:    #0B57A4;
    --fv-ink:     #0B2545;
    --fv-body:    #41566E;
    --fv-muted:   #5A6B80;
    --fv-soft:    #8494A8;
    --fv-border:  #E9EEF3;
    --fv-surface: #F2F5F9;
    --fv-teal:    #4CE0D0;
    --fv-red:     #E4462B;
    --fv-green:   #12A05C;

    --fv-r-sm: 8px; --fv-r-md: 12px; --fv-r-lg: 14px; --fv-r-xl: 18px; --fv-r-pill: 999px;
    --fv-s-1: 4px; --fv-s-2: 8px; --fv-s-3: 12px; --fv-s-4: 16px; --fv-s-5: 22px; --fv-s-6: 32px;

    --fv-tap: 44px;
    --fv-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}


* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Bloquea de raíz cualquier "espacio en blanco a la derecha" en celular
   causado por algún elemento decorativo (círculos borrosos del hero,
   filas con scroll horizontal, etc.) que se salga del ancho real de la
   pantalla — sin esto, ESE elemento suelto estira todo el documento y
   dejaba ese espacio vacío aunque cada sección por separado se viera
   bien ajustada. */
html, body { overflow-x: hidden; max-width: 100vw; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1100px 560px at 8% -8%, rgba(0,91,170,.07), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(25,211,211,.09), transparent 55%),
        var(--surface);
    min-height: 100vh;
}

::selection { background: var(--accent-dim); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--brand-mid);
    outline-offset: 2px;
    border-radius: 4px;
}

* { scrollbar-width: thin; scrollbar-color: var(--ink-subtle) transparent; }
*::-webkit-scrollbar { height: 6px; width: 6px; }
*::-webkit-scrollbar-thumb { background: var(--ink-subtle); border-radius: var(--r-full); }

/* =========================================================
   BANNER DE PRUEBA
   ========================================================= */
.banner-prueba {
    background: var(--warning);
    color: var(--white);
    text-align: center;
    font-size: var(--text-xs);
    padding: var(--space-2);
    font-weight: 600;
    letter-spacing: .04em;
}

/* =========================================================
   TOPBAR
   ========================================================= */
header.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 20;
}

header.topbar .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--brand);
    letter-spacing: -.01em;
}
header.topbar .logo img { height: 34px; width: auto; display: block; }
header.topbar .logo span { color: var(--ink-muted); font-weight: 600; font-size: var(--text-sm); }

.topbar-acciones { display: flex; align-items: center; gap: 10px; }

/* ============ BANNER "INSTALAR APP" — sitio público ============ */
.banner-instalar-app-publico {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 498;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 12px 32px -8px rgba(10,30,60,.28);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 420px;
    margin: 0 auto;
    animation: banner-instalar-entrada .3s ease;
}
@keyframes banner-instalar-entrada { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.banner-instalar-app-publico img { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; }
.banner-instalar-texto { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.banner-instalar-texto strong { font-size: 13.5px; color: var(--ink); }
.banner-instalar-texto span { font-size: 11.5px; color: var(--ink-muted); }
.btn-instalar-app-generico {
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-full);
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.btn-cerrar-banner-instalar-generico {
    background: none;
    border: none;
    color: var(--ink-muted);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px;
}
/* Arriba de la barra inferior móvil (62px) para no taparla — y del
   widget de WhatsApp, que en celular queda a la izquierda. */
@media (max-width: 640px) {
    .banner-instalar-app-publico { bottom: 74px; }
}

/* ============ PIN DE ACCESO LOCAL — pantalla de bloqueo ============ */
.overlay-pin-acceso {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: linear-gradient(160deg, var(--brand-dark, #06305c), var(--brand));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.pin-acceso-caja {
    background: var(--white);
    border-radius: 20px;
    padding: var(--space-6) var(--space-5);
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.pin-acceso-logo { height: 46px; margin-bottom: 18px; }
.pin-acceso-caja h2 { margin: 0 0 6px; font-size: 19px; }
.pin-acceso-caja p { margin: 0 0 var(--space-4); font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
.pin-acceso-caja input {
    width: 100%;
    text-align: center;
    font-size: 24px;
    letter-spacing: 8px;
    padding: 12px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--surface-3);
    margin-bottom: 10px;
}
/* El tamaño y espaciado grande es para los puntitos del PIN ya
   escrito — el placeholder (todavía sin escribir nada) es texto
   normal, así que necesita su propio tamaño de letra, mucho más chico,
   o el texto de ejemplo se ve gigante y desbordado. */
.pin-acceso-caja input::placeholder {
    font-size: 14px;
    letter-spacing: normal;
    color: var(--ink-muted);
}
.pin-acceso-caja button {
    width: 100%;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    margin-top: 6px;
}
.pin-acceso-caja button:disabled { opacity: .6; }
#pin-acceso-error { color: var(--error); font-size: 12.5px; margin-top: 10px; }
/* Doble clase a propósito: ".pin-acceso-caja button" (más específica
   que ".pin-acceso-olvide-link" sola) le estaba ganando a esta regla y
   el link terminaba viéndose como un botón azul sólido idéntico a
   "Continuar", en vez del texto discreto que debía ser. */
.pin-acceso-caja .pin-acceso-olvide-link {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 14px;
    padding: 4px;
}

.fila-reportes-rapidos { display: flex; flex-direction: column; gap: var(--space-2); }
.reporte-rapido-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 10px 14px;
    flex-wrap: wrap;
}
.reporte-rapido-icono { font-size: 20px; flex-shrink: 0; }
.reporte-rapido-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 160px; }
.reporte-rapido-info strong { font-size: 13.5px; color: var(--ink); }
.reporte-rapido-info span { font-size: 11.5px; color: var(--ink-muted); }

/* ============ CENTRO DE NOTIFICACIONES — campanita 🔔 ============ */
.notif-campana-wrap { position: relative; }
#btn-notif-campana {
    position: relative;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    line-height: 1;
}
#btn-notif-campana:hover { background: var(--surface-2); }
.notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--error);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}
.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-width: 90vw;
    max-height: 480px;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 32px -8px rgba(10,30,60,.22);
    z-index: 500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notif-panel-cabecera { padding: 10px 12px; border-bottom: 1px solid var(--surface-3); display: flex; flex-direction: column; gap: 8px; }
.notif-panel-tabs { display: flex; gap: 6px; }
.notif-panel-tabs button {
    background: var(--surface-2);
    border: none;
    border-radius: var(--r-full);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
}
.notif-panel-tabs button.activa { background: var(--brand); color: #fff; }
#btn-notif-marcar-todas {
    background: none;
    border: none;
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: right;
    padding: 0;
}
#notif-panel-lista { overflow-y: auto; flex: 1; }
.notif-vacio { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--ink-muted); margin: 0; }
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--surface-2);
    padding: 10px 12px;
    cursor: pointer;
    position: relative;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.no-leida { background: var(--accent-dim); }
.notif-item-icono { font-size: 17px; flex-shrink: 0; }
.notif-item-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.notif-item-texto strong { font-size: 12.5px; color: var(--ink); }
.notif-item-texto span { font-size: 11.5px; color: var(--ink-muted); }
.notif-item-fecha { font-size: 10px !important; color: var(--ink-muted) !important; margin-top: 2px; }
.notif-item-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 4px; }
#btn-notif-cargar-mas {
    width: 100%;
    background: var(--surface-2);
    border: none;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
}
#btn-instalar-pwa-admin, #btn-instalar-pwa-vendedor, #btn-activar-push-admin, #btn-activar-push-vendedor {
    background: var(--accent-dim);
    color: var(--brand);
    border: none;
    border-radius: var(--r-full);
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.btn-manual-descarga {
    background: none;
    border: 1px solid var(--ink-subtle);
    color: var(--ink-light);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--ease);
    display: inline-flex;
    align-items: center;
}
.btn-manual-descarga:hover { background: var(--surface-2); border-color: var(--ink-muted); color: var(--ink); }

#logout-btn, #btn-cambiar-tienda {
    background: none;
    border: 1px solid var(--ink-subtle);
    color: var(--ink-light);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--ease);
}
#logout-btn:hover, #btn-cambiar-tienda:hover { background: var(--surface-2); border-color: var(--ink-muted); color: var(--ink); }

/* =========================================================
   LAYOUT GENERAL
   ========================================================= */
main {
    max-width: 1160px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-5);
}

.card.auth-card,
.narrow-card {
    max-width: 460px;
    margin: 0 auto;
}

.card {
    background: var(--white);
    border: 1px solid rgba(10,30,60,.05);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

/* Tarjetas de Distribución (panel de admin) — mismo patrón desplegable
   que Promociones: inicia comprimida, mostrando solo foto + nombre +
   precio, y se abre para ver/editar los precios por escala. */
.tarjeta-distribucion-admin-resumen::-webkit-details-marker { display: none; }
.tarjeta-distribucion-admin-resumen::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex-shrink: 0;
    margin-left: auto;
}
.tarjeta-distribucion-admin[open] .tarjeta-distribucion-admin-resumen::after { transform: rotate(-135deg); }

/* Modal obligatorio de renovación de contraseña — sin botón de cerrar
   a propósito, no se puede pasar de largo sin actualizarla. */
.modal-renovacion-password-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(10, 30, 60, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.modal-renovacion-password-caja {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: var(--space-6);
    max-width: 380px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}
.modal-renovacion-password-caja h2 { margin: 0 0 var(--space-2); font-size: 19px; }
.modal-renovacion-password-caja p { margin: 0 0 var(--space-4); font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; }
.modal-renovacion-password-caja label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.modal-renovacion-password-caja input { width: 100%; margin-bottom: var(--space-3); box-sizing: border-box; }
.modal-renovacion-password-caja .btn-primary { width: 100%; }
.modal-renovacion-password-caja .mensaje.error { color: var(--error); font-size: 13px; margin-bottom: var(--space-2); }

/* Botón "✕" flotante para quitar una vista previa de imagen — ver
   agregarBotonQuitarImagen en farmavitae-utils.js. */
.preview-imagen-wrap { position: relative; display: inline-block; }
.btn-quitar-imagen-preview {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(10, 30, 60, .72);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}
.btn-quitar-imagen-preview:hover { background: var(--error); }
.btn-recortar-imagen-preview {
    position: absolute;
    top: 4px;
    right: 30px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(10, 30, 60, .72);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}
.btn-recortar-imagen-preview:hover { background: var(--brand); }


h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-2xl);
    letter-spacing: -.01em;
    margin: 0 0 var(--space-2);
    color: var(--ink);
}

h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    margin: 0 0 var(--space-4);
    color: var(--ink);
}

p.subtitle {
    color: var(--ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
    margin: 0 0 var(--space-6);
}

.pulso {
    display: block;
    width: 100%;
    max-width: 220px;
    height: 26px;
    margin: 0 0 var(--space-4);
}
.pulso path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: dibujar-pulso 1.4s .1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes dibujar-pulso { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .pulso path { animation: none; stroke-dashoffset: 0; }
}

/* =========================================================
   FORMULARIOS
   ========================================================= */
/* .etiqueta-seccion: mismo look que <label>, para texto que encabeza
   un GRUPO de campos (una galería de fotos, una lista de checkboxes,
   una lista de cuentas bancarias) en vez de un solo input puntual —
   un <label> ahí no tiene un "for" real al que apuntar (name/accesibilidad
   avisan "label no asociado a un campo"), así que se usa un <p> con
   esta clase en su lugar. */
label, .etiqueta-seccion {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-light);
    margin-bottom: var(--space-1);
    margin-top: var(--space-4);
}

input, textarea, select {
    width: 100%;
    padding: var(--space-3);
    border: 1.5px solid var(--ink-subtle);
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-size: var(--text-base);
    background: var(--surface);
    color: var(--ink);
    transition: var(--ease);
}
input:hover, textarea:hover, select:hover { border-color: var(--ink-muted); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand-mid);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(20,114,196,.10);
}
input:disabled { color: var(--ink-muted); background: var(--surface-2); }
/* El padding de 12px de la regla de arriba, aplicado a un <input
   type="color">, aplastaba el cuadrito de color real hasta dejarlo como
   una línea delgada casi invisible (el navegador reserva muy poca altura
   por defecto para este tipo de campo). Ancho/alto fijos y padding
   mínimo para que el color elegido se vea de verdad. */
input[type="color"] { width: 64px; height: 42px; padding: 3px; cursor: pointer; }

input[type="checkbox"] {
    width: auto;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

textarea { resize: vertical; min-height: 80px; }

input[type="file"] {
    padding: var(--space-2);
    border: 1.5px dashed var(--ink-subtle);
    font-size: var(--text-sm);
    color: var(--ink-light);
}
input[type="file"]:hover { border-color: var(--brand-mid); background: var(--surface-2); }

.btn-primary {
    width: 100%;
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--brand);
    color: var(--white);
    border: none;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: var(--ease);
    box-shadow: 0 6px 16px rgba(0,91,170,.22);
}
.btn-primary:hover { background: var(--brand-mid); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,91,170,.28); }

/* =========================================================
   INVENTARIO — tarjetas de estadísticas y de producto, con más
   jerarquía visual que las cajas genéricas de resumen (medallas para
   el top 3, franja de stock a color, chips en vez de texto separado
   por "·"). Compartido entre el panel de vendedor y el de admin.
   ========================================================= */
.inventario-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
    /* El contenedor del grid también necesita poder encogerse — si el
       padre es un flex/grid más amplio (como en el panel de admin), sin
       esto el grid completo se empuja hacia afuera de la pantalla en
       vez de respetar el ancho disponible. */
    min-width: 0;
}
@media (min-width: 860px) {
    .inventario-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* La fila de las 2 tarjetas grandes (sin stock / total) — SIN
   depender de @media, porque el ancho de VENTANA no es lo mismo que el
   ancho de CONTENEDOR disponible (en el panel de admin, descontando el
   menú lateral, puede quedar angosto aunque la ventana se vea ancha).
   flex-basis:0 hace que ambas tarjetas terminen exactamente del mismo
   tamaño sin importar cuánto texto tenga cada una adentro — antes
   "Productos sin stock" salía más angosta que "Total de productos"
   porque esta regla nunca llegaba a aplicarse. */
.inventario-stats-grid .inventario-kpi-fila { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3); }
.inventario-stats-grid .inventario-kpi-fila .inventario-kpi-destacado { flex: 1 1 0; min-width: 0; min-height: 84px; }
.inventario-stat-card {
    /* min-width: 0 es la parte clave — los elementos de grid/flex por
       defecto tienen min-width:auto, así que aunque el texto de adentro
       tenga "text-overflow: ellipsis", el navegador igual reserva el
       ancho COMPLETO del texto sin cortar como mínimo del contenedor,
       y eso es lo que empujaba estas tarjetas fuera de la pantalla
       (sobre todo en admin, donde el área disponible es más angosta
       por el menú lateral). Con esto, la tarjeta sí se achica y el
       texto de adentro es el que se corta con "...", no el layout. */
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    padding: var(--space-4);
    box-shadow: 0 2px 10px -6px rgba(10,30,60,.1);
}
.inventario-stat-cabecera { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-3); }
.inventario-stat-icono {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    background: var(--accent-dim);
}
.inventario-stat-titulo { font-weight: 800; font-size: 14px; color: var(--ink); line-height: 1.3; }
.inventario-stat-nota { font-size: 10.5px; color: var(--ink-muted); margin-top: 1px; }

.inventario-ranking-fila { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--surface-2); min-width: 0; }
.inventario-ranking-fila:last-child { border-bottom: none; }
.inventario-ranking-pos {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 800;
    flex-shrink: 0;
    background: var(--surface-2); color: var(--ink-muted);
}
.inventario-ranking-pos.oro { background: #FCE8B2; color: #92660A; }
.inventario-ranking-pos.plata { background: #E4E7EC; color: #4B5563; }
.inventario-ranking-pos.bronce { background: #F3D5B5; color: #92400E; }
.inventario-ranking-nombre { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventario-ranking-valor { font-weight: 800; font-size: 12.5px; color: var(--brand); flex-shrink: 0; }
.inventario-ranking-vacio { font-size: 12.5px; color: var(--ink-muted); padding: 4px 0; }

.inventario-kpi-destacado {
    background: linear-gradient(135deg, var(--brand) 0%, #06305c 100%);
    border-radius: var(--r-lg);
    padding: var(--space-4);
    color: #fff;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
}
.inventario-stats-grid .inventario-kpi-destacado:first-of-type { margin-top: 0; }
.inventario-kpi-destacado.ok { background: linear-gradient(135deg, #0F7A7A 0%, #0a4f4f 100%); }
.inventario-kpi-icono { font-size: 30px; flex-shrink: 0; }
.inventario-kpi-numero { font-size: 32px; font-weight: 800; font-family: var(--font-display); line-height: 1; }
.inventario-kpi-etiqueta { font-size: 12.5px; opacity: .92; margin-top: 3px; }

.inventario-producto-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.inventario-producto-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.inventario-producto-img-vacia { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.inventario-producto-info { flex: 1; min-width: 160px; }
.inventario-producto-nombre { font-weight: 700; font-size: 14px; color: var(--ink); }
.inventario-producto-tienda { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; }
.inventario-producto-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.inventario-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--ink-muted);
    background: var(--surface-2);
    padding: 3px 9px; border-radius: var(--r-full);
}
/* Envuelve el badge (solo lectura) + el mini-form de "Actualizar" que
   aparece debajo cuando el producto está "bajo pedido" — antes el badge
   era hijo directo de la fila; ahora necesita un contenedor propio para
   apilar ambos sin romper el resto del layout de la tarjeta. */
.inventario-producto-stock-badge-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.inventario-producto-actualizar-stock-real { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; width: auto !important; }
.inventario-producto-actualizar-stock-real input { width: 100% !important; min-width: 68px; }
.inventario-producto-stock-badge {
    flex-shrink: 0;
    text-align: center;
    min-width: 68px;
    padding: 7px 10px;
    border-radius: var(--r-md);
}
.inventario-producto-stock-badge .num { display: block; font-weight: 800; font-size: 18px; line-height: 1.1; }
.inventario-producto-stock-badge .lbl { display: block; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-top: 1px; }
.inventario-producto-stock-badge.ok { background: var(--accent-dim); color: var(--brand); }
.inventario-producto-stock-badge.bajo { background: rgba(230,126,34,.14); color: var(--warning); }
.inventario-producto-stock-badge.agotado { background: rgba(192,57,43,.1); color: var(--error); }
.inventario-producto-stock-badge.pendiente-aprobacion { background: rgba(230,126,34,.14); color: var(--warning); }
.inventario-producto-stock-badge.rechazado-inv { background: rgba(192,57,43,.14); color: var(--error); }
.inventario-producto-actualizar { flex-shrink: 0; display: flex; align-items: center; gap: 6px; width: 100%; border-top: 1px solid var(--surface-2); padding-top: var(--space-2); margin-top: 4px; }
@media (min-width: 680px) {
    .inventario-producto-actualizar { width: auto; border-top: none; padding-top: 0; margin-top: 0; }
}
.inventario-producto-actualizar input {
    width: 92px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--surface-3);
    font-size: 13px;
}

/* =========================================================
   VISTA "INICIO" DEL DASHBOARD DE VENDEDOR
   ========================================================= */
.inicio-resumen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-5);
}
/* Encabezado de sección DENTRO del mismo grid — ocupa todo el ancho,
   para agrupar las tarjetas en bloques con sentido (qué pagó el
   cliente / qué le toca al vendedor / qué gana Farmavitae) en vez de
   una sola lista plana de números sueltos, sin ningún criterio. */
.reporte-seccion-titulo {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: var(--space-3);
    padding-bottom: 4px;
    border-bottom: 2px solid var(--surface-3);
}
.reporte-seccion-titulo:first-child { margin-top: 0; }
.reporte-seccion-titulo strong { font-size: 13.5px; color: var(--ink); font-family: var(--font-display); }
.reporte-seccion-titulo span { font-size: 11.5px; color: var(--ink-muted); }
@media (min-width: 640px) {
    .inicio-resumen-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Tabla de referencia "qué va en cada columna" del CSV de carga masiva
   de productos (vendedor, Agregar producto → Carga masiva). */
.tabla-notas-csv { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-notas-csv td { padding: 8px 10px; border-bottom: 1px solid var(--surface-3); vertical-align: top; color: var(--ink-light); }
.tabla-notas-csv tr:last-child td { border-bottom: none; }
.tabla-notas-csv td:first-child { white-space: nowrap; font-weight: 700; color: var(--ink); width: 1%; }
.tabla-notas-csv code { background: var(--surface-2); padding: 2px 6px; border-radius: 4px; font-size: 12.5px; }

.inicio-resumen-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: var(--ease);
}
/* Envoltorio de una tarjeta de Inicio que puede desplegar una
   ventanilla con varios vendedores (cuando el número de "pendientes"
   no basta para saber A QUIÉN corresponde). Solo necesita position:
   relative para que la ventanilla se ancle debajo de la tarjeta. */
.inicio-resumen-item-wrap { position: relative; }
.inicio-selector-vendedor-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-1, #fff);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    z-index: 20;
    max-height: 240px;
    overflow-y: auto;
}
.inicio-selector-vendedor-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ink);
    background: none;
    border: none;
    border-bottom: 1px solid var(--surface-2);
    cursor: pointer;
}
.inicio-selector-vendedor-item:last-child { border-bottom: none; }
.inicio-selector-vendedor-item:hover { background: var(--surface-2); }
.inicio-resumen-item:hover {
    background: var(--surface-3);
    border-color: var(--brand-light, var(--brand));
    transform: translateY(-1px);
}
.inicio-resumen-item:active { transform: translateY(0); }

.inicio-resumen-pendientes {
    font-size: var(--text-sm);
    color: var(--warning);
    background: rgba(230,126,34,.1);
    border: 1px solid rgba(230,126,34,.25);
    border-radius: var(--r-md);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0 var(--space-5);
}
.inicio-resumen-pendientes:not(.con-pendientes) {
    color: #0f7a7a;
    background: var(--accent-dim);
    border-color: transparent;
}

/* Aviso de "acción requerida" — envío gratis rechazado, esperando que
   el vendedor decida. Un botón completo (no solo texto), para que se
   note que hay que hacer algo, no solo leerlo. */
.inicio-alerta-accion {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 10%, transparent) 0%, color-mix(in srgb, var(--warning) 4%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    border-radius: var(--r-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    cursor: pointer;
    font-family: var(--font);
    transition: var(--ease);
}
.inicio-alerta-accion:hover { border-color: var(--warning); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.inicio-alerta-accion-ico { font-size: 22px; flex-shrink: 0; }
.inicio-alerta-accion-texto { flex: 1; font-size: 13.5px; color: var(--ink-light); line-height: 1.5; }
.inicio-alerta-accion-texto strong { color: var(--warning); }
.inicio-alerta-accion-flecha { font-size: 18px; color: var(--warning); flex-shrink: 0; }

/* Misma tarjeta, tono azul/informativo — para sugerencias opcionales
   (ej. completar logo/portada) que no requieren una acción urgente. */
.inicio-alerta-accion.inicio-alerta-info {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent) 0%, color-mix(in srgb, var(--brand) 4%, transparent) 100%);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
.inicio-alerta-info:hover { border-color: var(--brand); }
.inicio-alerta-info .inicio-alerta-accion-texto strong { color: var(--brand); }
.inicio-alerta-info .inicio-alerta-accion-flecha { color: var(--brand); }

/* Nota chica debajo de una sección de resumen, para avisos que no
   necesitan un botón propio (a diferencia de la alerta de arriba). */
.inicio-resumen-nota {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-2);
    border-radius: var(--r-sm);
}

.inicio-resumen-seccion { margin-bottom: var(--space-6); }
.inicio-resumen-seccion:last-child { margin-bottom: 0; }
.inicio-resumen-titulo {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 var(--space-3);
}
.inicio-resumen-item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.inicio-resumen-valor {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-2xl);
    color: var(--brand-dark);
}
.inicio-resumen-valor.dot-pendiente,
.inicio-resumen-valor.dot-cambios { color: var(--warning); }
.inicio-resumen-valor.dot-aprobado { color: var(--accent); }
.inicio-resumen-valor.dot-rechazado { color: var(--error); }
.inicio-resumen-valor.dot-sinstock { color: var(--error); }
.inicio-resumen-valor.dot-baja { color: var(--ink-muted); }
.inicio-resumen-valor.dot-todos { color: var(--brand); }
.inicio-resumen-valor.dot-promo { color: var(--brand-mid); }
.inicio-resumen-etiqueta {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secundario {
    background: none;
    border: 1.5px solid var(--brand);
    color: var(--brand);
    font-weight: 700;
    font-size: var(--text-sm);
    padding: 10px 20px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.btn-secundario:hover { background: var(--brand); color: var(--white); }
.btn-secundario:disabled { opacity: .55; cursor: not-allowed; }

.multimarca-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--r-full);
    margin: var(--space-2) 0 var(--space-3);
}
.multimarca-estado:empty { display: none; }
.multimarca-estado.estado-pendiente { background: rgba(230,126,34,.12); color: var(--warning); }
.multimarca-estado.estado-aprobado { background: var(--accent-dim); color: #0f7a7a; }
.multimarca-estado.estado-rechazado { background: rgba(192,57,43,.1); color: var(--error); }

.btn-link {
    background: none;
    border: none;
    color: var(--brand-mid);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-top: var(--space-4);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.btn-link:hover { color: var(--brand); }

.mensaje {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
    display: none;
    line-height: 1.5;
}
.mensaje.error { background: rgba(192,57,43,.08); color: var(--error); display: block; border: 1px solid rgba(192,57,43,.18); }
.mensaje.exito { background: var(--accent-dim); color: #0f7a7a; display: block; border: 1px solid rgba(25,211,211,.3); }
/* Para avisos "en curso" (cargando/procesando) — antes se dejaba la
   clase base ".mensaje" (display:none) mientras algo tardaba, así que
   el texto de progreso nunca se veía hasta que terminaba. */
.mensaje.info { background: rgba(20,114,196,.08); color: var(--brand); display: block; border: 1px solid rgba(20,114,196,.18); }
/* FIX: el banner de comentario del admin (perfil y producto) no se veía:
   tenía la clase base ".mensaje" (display:none) y ".comentario-admin" nunca
   forzaba display:block, así que quitarle "oculto" no lo mostraba. */
.mensaje.comentario-admin { display: block; }

/* =========================================================
   APP SHELL (sidebar + contenido)
   ========================================================= */
.app-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: stretch;
}

.app-sidebar {
    width: 100%;
    background: linear-gradient(160deg, var(--sidebar-1), var(--sidebar-2));
    border-radius: var(--r-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.app-sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px 220px at 100% 0%, rgba(25,211,211,.14), transparent 70%);
    pointer-events: none;
}

.app-sidebar-kicker {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent);
    position: relative;
}

.app-sidebar-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-xl);
    color: var(--sidebar-text-hi);
    margin: var(--space-2) 0 var(--space-1);
    letter-spacing: -.01em;
    position: relative;
}
.app-sidebar-title span { color: var(--accent); }

.app-sidebar-subtitle {
    font-size: var(--text-sm);
    color: var(--sidebar-text);
    line-height: 1.55;
    margin: 0 0 var(--space-4);
    position: relative;
}

.app-nav {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: 2px;
    position: relative;
}

.app-content { flex: 1; min-width: 0; }

/* Cualquier tabla dentro del panel (admin o vendedor) — varias se
   generan con JS sin ningún contenedor con scroll propio, y en
   celular sus columnas (montos, fechas, nombres largos) no caben en
   375px de ancho. En vez de arreglar cada tabla una por una, esta
   regla las convierte a su propio contenedor de scroll horizontal
   suave en celular, sin tener que tocar cada lugar donde se genera
   una tabla nueva — cualquier tabla futura queda cubierta también. */
@media (max-width: 640px) {
    .app-content table, .subpanel-reportes table, #vista-panel table, #vista-dashboard table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

@media (min-width: 900px) {
    .app-shell { flex-direction: row; align-items: flex-start; gap: var(--space-6); }
    .app-sidebar { width: 264px; flex-shrink: 0; position: sticky; top: calc(var(--space-6) + 64px); }
    .app-nav { flex-direction: column; overflow-x: visible; }
}

/* =========================================================
   PANEL DE ADMIN/VENDEDOR EN CELULAR — que se sienta como una
   app nativa, no como el escritorio apretado en una pantalla chica.
   La navegación (antes una fila de pastillas oscuras con scroll
   horizontal, difícil de recorrer con tantos módulos) pasa a ser un
   menú de cajón que se abre con "☰", igual patrón que el panel de
   filtros del Marketplace.
   ========================================================= */
.btn-menu-movil-panel { display: none; }
@media (max-width: 899px) {
    .btn-menu-movil-panel {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        border-radius: 10px;
        border: none;
        background: var(--surface-2);
        font-size: 19px;
        cursor: pointer;
        flex-shrink: 0;
        margin-right: 4px;
    }
    header.topbar { padding: var(--space-3) var(--space-4); gap: 10px; }
    header.topbar .logo span { display: none; } /* "Admin"/"Vendedores" ya se sabe una vez adentro — sobra en la barra angosta */

    .app-shell { gap: 0; }
    .app-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(82vw, 300px);
        z-index: 1400;
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        border-radius: 0;
        box-shadow: 10px 0 30px rgba(0,0,0,.2);
    }
    .app-sidebar.menu-abierto-movil { transform: translateX(0); }
    .app-sidebar-fondo-movil {
        position: fixed;
        inset: 0;
        background: rgba(10,30,60,.5);
        z-index: 1399;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    .app-sidebar-fondo-movil.visible { opacity: 1; pointer-events: auto; }
    .app-nav { flex-direction: column; overflow-x: visible; }
    .app-nav .tab { padding: 12px var(--space-4); font-size: 14px; } /* más alto = más fácil de tocar con el dedo */

    /* Tarjetas y contenido con menos relleno lateral — en el
       escritorio el "aire" extra se siente premium, en una pantalla
       de 360-400px de ancho solo resta espacio útil. */
    .app-content { padding: 0 2px; }
    .card { padding: var(--space-3); margin-bottom: var(--space-3); border-radius: 14px; }
    .content-heading { margin-bottom: var(--space-3); }
    .content-heading h2 { font-size: 19px; }
    .content-heading p { font-size: 13px; }

    /* Botones de acción de ancho completo — más fáciles de tocar que
       una fila apretada de botones chicos, y es el patrón esperado en
       una app de celular. */
    .acciones { flex-direction: column; }
    .acciones button, .acciones .btn-aprobar, .acciones .btn-rechazar, .acciones .btn-editar { width: 100%; }
}

.app-nav .tab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--sidebar-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: normal;
    line-height: 1.25;
    text-align: left;
    box-shadow: none;
}
.app-nav .tab:hover { background: rgba(255,255,255,.1); color: var(--sidebar-text-hi); }
.app-nav .tab.activa {
    background: var(--sidebar-active);
    border-color: var(--accent);
    color: var(--sidebar-text-hi);
    box-shadow: inset 3px 0 0 var(--accent);
}
.app-nav .tab .nav-ico { flex-shrink: 0; display: flex; }
.app-nav .tab .nav-ico svg { width: 18px; height: 18px; }

.content-heading { margin-bottom: var(--space-2); }
.content-heading h2 { margin-bottom: var(--space-1); }
.content-heading p { color: var(--ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); }

/* =========================================================
   TABS (filtros dentro del contenido)
   ========================================================= */
.tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0;
    flex-wrap: wrap;
    padding: 6px;
    background: var(--surface-2);
    border: 1px solid rgba(10,30,60,.06);
    border-radius: var(--r-lg);
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--ink-light);
    padding: 10px 18px;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: var(--ease);
    white-space: nowrap;
}
.tab:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.tab.activa {
    background: var(--white);
    color: var(--brand-dark);
    box-shadow: var(--shadow-sm);
}

/* Puntos de color que identifican cada estado dentro de los filtros */
.tabs .tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: .5;
    transition: var(--ease);
}
.tabs .tab.activa .tab-dot { opacity: 1; }
.tab-dot.dot-todos       { background: var(--brand); }
.tab-dot.dot-pendiente   { background: var(--warning); }
.tab-dot.dot-cambios     { background: var(--warning); }
.tab-dot.dot-aprobado    { background: var(--accent); }
.tab-dot.dot-rechazado   { background: var(--error); }
.tab-dot.dot-baja        { background: var(--ink-muted); }
.tab-dot.dot-sinstock    { background: var(--error); }

/* Tarjeta contenedora exclusiva para los filtros (separada de la lista) */
.card.card-filtros {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

/* Fila de filtros por mes / fecha específica (Promociones) */
.filtro-fecha-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(10,30,60,.06);
}
.filtro-fecha-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.filtro-fecha-campo label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--ink-light);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.filtro-fecha-campo input {
    width: auto;
    padding: 8px 12px;
}
.filtro-fecha-row .btn-link {
    padding-bottom: 9px;
}

/* =========================================================
   LISTAS DE PRODUCTOS — vendedor
   ========================================================= */
.producto-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    margin-bottom: var(--space-2);
    background: var(--white);
    transition: var(--ease);
}
.producto-item:hover { box-shadow: var(--shadow-sm); border-color: var(--ink-subtle); }
/* Encabezado: checkbox + miniatura + info + badge, en fila — igual que
   antes, pero ya sin las acciones (destacar/editar/dar de baja), que
   ahora van en su propia fila abajo (.producto-item-pie). Antes todo
   iba junto en una sola fila que se envolvía sola (flex-wrap), lo cual
   dejaba muy poco ancho para el texto de "info" — con las acciones
   afuera, el texto respira mucho mejor. */
.producto-item-encabezado {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.producto-item-encabezado .info { flex: 1; min-width: 220px; }
.producto-item-pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-3);
}
.producto-item .info { flex: 1; min-width: 0; }
/* Misma especificidad que ".producto-item-encabezado .info" de arriba
   (2 clases cada una) — por orden en el archivo, esta ganaba y
   pisaba el min-width:220px con min-width:0, dejando el texto sin
   ancho mínimo real. En pantallas angostas, la columna de texto podía
   quedar comprimida a casi nada, envolviendo cada palabra en su
   propia línea (bug real, confirmado con capturas). Se refuerza acá,
   después, para que sí gane siempre. */
.producto-item-encabezado .info { min-width: 220px; }
.producto-item .nombre { font-weight: 700; font-size: var(--text-sm); }
.producto-item .detalle { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 2px; }

/* Info del producto (categoría, stock, costo, precio) — antes era una
   sola oración larga separada por "·", con etiquetas técnicas ("Tu
   costo (sin IVA):") todas del mismo peso visual que el resto. Ahora
   cada dato resalta solo su VALOR en negrita — a propósito SIN fondo,
   borde ni forma de píldora: con esa forma se confundía con los badges
   de estado ("Aprobado") y los botones de acción ("Editar", "Dar de
   baja"), que si son clickeables. Esto es texto, no un botón. */
.producto-item-chips { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; line-height: 1.6; }
/* nowrap por chip: si no cabe, se mueve ENTERO a la siguiente línea (el
   punto separador es donde el texto puede cortar) — sin esto, un chip
   largo como "Público: $4.35 +IVA → $5.00" partía justo a la mitad,
   dejando el precio final huérfano en su propia línea. */
.chip-info { display: inline-block; white-space: nowrap; }
.chip-info:not(:last-child)::after { content: '·'; margin: 0 7px; color: var(--surface-3); }
.chip-info strong { color: var(--ink-light); font-weight: 700; }
.chip-info.chip-info-precio strong { color: var(--brand); }

/* Variante DESPLEGABLE (<details>) — usada en la lista de Promociones
   del panel de vendedor, que tiene mucha información por tarjeta.
   Empieza comprimida, mostrando solo nombre + estado; al tocarla se
   abre el resto (etiquetas, precios, avisos, botones). */
.producto-item.plegable {
    display: block;
    padding: 0;
    overflow: hidden;
}
.producto-item-resumen {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
}
.producto-item-resumen .miniatura { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.producto-item-resumen .nombre { flex: 1; min-width: 0; }
.producto-item-resumen::-webkit-details-marker { display: none; }
.producto-item-resumen::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.producto-item.plegable[open] .producto-item-resumen::after { transform: rotate(-135deg); }
.producto-item-resumen:hover { background: var(--surface-2); }
.producto-item-resumen .nombre { font-weight: 700; font-size: var(--text-sm); }
.producto-item.plegable .producto-item-cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--surface-3);
}

/* =========================================================
   BADGES DE ESTADO
   ========================================================= */
.badge {
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--r-full);
    white-space: nowrap;
}
.badge.pendiente { background: rgba(230,126,34,.12); color: var(--warning); }
.badge.aprobado { background: var(--accent-dim); color: #0f7a7a; }
.badge.rechazado { background: rgba(192,57,43,.1); color: var(--error); }
.badge.suspendido { background: rgba(192,57,43,.16); color: var(--error); font-weight: 800; }
.badge.cancelada { background: rgba(120,120,120,.14); color: var(--ink-muted); }
.badge.cambios_solicitados { background: rgba(230,126,34,.12); color: var(--warning); }
.badge.dado_de_baja { background: var(--surface-2); color: var(--ink-muted); }
.badge.sin_stock { background: rgba(192,57,43,.1); color: var(--error); }
.badge.acumulado { background: rgba(20,114,196,.12); color: var(--brand); }

/* ============ Vista previa de logo de fundación — marco premium ============ */
.fundacion-logo-preview-marco {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1.5px solid var(--surface-3);
    box-shadow: 0 4px 12px -4px rgba(10,30,60,.12);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Cuando se agregan los botones "✕"/"✏️" (agregarBotonQuitarImagen /
   agregarBotonRecortarImagen), esas funciones insertan automáticamente
   un .preview-imagen-wrap entre el marco y la imagen — sin esta regla,
   ese contenedor nuevo (inline-block, sin tamaño propio) colapsaría en
   vez de llenar el marco de 68x68. */
.fundacion-logo-preview-marco .preview-imagen-wrap { width: 100%; height: 100%; display: block; }
.fundacion-logo-preview-marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge-conteo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-full);
    background: var(--error);
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    margin-left: 4px;
}

.aviso-despachar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(230,126,34,.12);
    color: var(--warning);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 10px 14px;
    border-radius: var(--r-md);
    margin-bottom: var(--space-3);
}
.info-despacho-vendedor {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.6;
    background: var(--white);
    border-radius: var(--r-sm);
    padding: 8px 10px;
}
.info-despacho-vendedor strong { color: var(--warning); font-weight: 700; }
.pedido-grupo { margin-bottom: var(--space-6); }
.pedido-grupo-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--ink);
    margin: 0 0 var(--space-3);
    flex-wrap: wrap;
}
.pedido-grupo-titulo span { font-size: var(--text-xs); color: var(--ink-muted); font-weight: 500; }
.pedido-linea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-3);
    flex-wrap: wrap;
}
.pedido-linea:last-child { border-bottom: none; }
.pedido-linea-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.pedido-linea-info strong { font-size: var(--text-sm); color: var(--ink); }
.pedido-linea-info span { font-size: var(--text-xs); color: var(--ink-muted); }
.pedido-linea-precio { font-weight: 700; color: var(--brand); white-space: nowrap; flex-shrink: 0; }
.pedido-linea-precio-sin-dato { font-weight: 500; color: var(--ink-muted); font-size: var(--text-sm); font-style: italic; }
/* Ícono/logo del "transportista por defecto" en Configuración — mismo
   cuadro 44x44 que ya usan las tarjetas de transportistas reales: el
   emoji 🚚 se ve solo mientras no hay logo subido (la imagen tiene
   "oculto" hasta que sí lo hay), sin JS aparte para alternar entre los
   dos, ya que la función que sube/recorta el logo es genérica y
   compartida con otros campos del panel. Esa función envuelve la imagen
   en su propio .preview-imagen-wrap (para los botones de quitar/recortar)
   — mismo ajuste de tamaño que ya usa fundacion-logo-preview-marco.*/
#config-transportista-logo-marco .preview-imagen-wrap { width: 100%; height: 100%; display: block; }
#config-transportista-logo-marco:has(#config-transportista-logo-preview:not(.oculto)) #config-transportista-default-icono-emoji { display: none; }
/* Los botones de quitar/recortar vienen pensados para previews grandes
   (80px+) — a 44px los dos de tamaño normal se encimaban y se salían
   del cuadro, así que acá se ven más chicos. */
#config-transportista-logo-marco .btn-quitar-imagen-preview,
#config-transportista-logo-marco .btn-recortar-imagen-preview { width: 16px; height: 16px; font-size: 9px; top: 2px; }
#config-transportista-logo-marco .btn-quitar-imagen-preview { right: 2px; }
#config-transportista-logo-marco .btn-recortar-imagen-preview { right: 20px; }

/* Contenedor con scroll propio para listas largas dentro de una
   tarjeta (ej. suscriptores del newsletter) — antes crecían sin límite
   y volvían la página entera eterna de bajar. */
.lista-scroll { max-height: 480px; overflow-y: auto; border: 1px solid var(--surface-3); border-radius: var(--r-md); padding: 0 var(--space-3); }

/* Barra de "seleccionar todos / eliminar seleccionados" sobre una
   lista con checkboxes — mismo patrón reusable para cualquier lista
   con selección masiva. */
.lista-barra-seleccion { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.lista-barra-seleccion label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.tag-campana-enviada { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #0f7a7a; background: var(--accent-dim); border-radius: 999px; padding: 2px 9px; }
.tag-campana-enviada.tag-sin-bienvenida { color: var(--ink-muted); background: var(--surface-2); }

/* "Pagos a realizar por vendedor" (Reportes) — antes era una fila
   plana de texto (nombre + badge + monto), poco clara entre varios
   vendedores seguidos. Una tarjeta por vendedor, con inicial en
   círculo, se lee más rápido de un vistazo — mismo patrón que otras
   listas de "una fila = una entidad" del panel. */
.fila-pago-vendedor {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 10px 12px; border: 1px solid var(--surface-3); border-radius: var(--r-lg);
    margin-bottom: 8px; background: var(--surface-1, #fff);
}
.fila-pago-vendedor:last-child { margin-bottom: 0; }
.fila-pago-vendedor-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-dim, #E6F7F7); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.fila-pago-vendedor-info { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; flex-wrap: wrap; }
.fila-pago-vendedor-info .btn-link { margin: 0; font-weight: 700; font-size: var(--text-sm); }
.fila-pago-vendedor-monto { font-weight: 800; color: var(--brand); font-size: var(--text-md); white-space: nowrap; flex-shrink: 0; }

.fila-filtros-pedidos { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.fila-filtros-pedidos select { flex: 1; min-width: 200px; }

/* =========================================================
   LISTAS DE PRODUCTOS Y PERFILES — admin
   ========================================================= */
.producto-item-admin {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    margin-bottom: var(--space-4);
    background: var(--white);
    transition: var(--ease);
}
.producto-item-admin:hover { box-shadow: var(--shadow-md); border-color: var(--ink-subtle); }

/* Encabezado: foto + nombre/negocio + badge de estado, todo alineado arriba */
.producto-cabecera {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.producto-cabecera .miniatura { width: 72px; height: 72px; }
.producto-titulo-wrap { flex: 1; min-width: 0; }
.producto-item-admin .nombre { font-weight: 700; font-size: var(--text-md); line-height: 1.3; overflow-wrap: break-word; word-break: break-word; }
.producto-item-admin .detalle { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 2px; }
.producto-cabecera .badge { flex-shrink: 0; margin-top: 2px; }

/* Sin esto, en celular la fila entera (foto + texto + insignia de
   estado) se apretaba en una sola línea — el texto quedaba comprimido
   a una columna mínima, con la insignia "Pendiente" cortando la
   descripción a la mitad. Va DESPUÉS de las reglas base de arriba a
   propósito: puestas antes (aunque dentro de un @media), perdían por
   orden de aparición contra ".producto-titulo-wrap { min-width: 0 }". */
@media (max-width: 640px) {
    .producto-cabecera { flex-wrap: wrap; }
    .producto-titulo-wrap { min-width: 60%; }
    .producto-cabecera .badge { margin-left: auto; }
}

/* Variante DESPLEGABLE (<details> en vez de <div>) — usada solo en la
   lista de Promociones, que tiene mucha información por tarjeta.
   Empieza comprimida (sin el atributo "open"), mostrando solo foto +
   nombre + estado; al tocarla se abre el resto (etiquetas, margen,
   vigencia, botones). Sobrescribe el padding/flex de la clase base,
   que no aplican bien a un <details>. */
.producto-item-admin.plegable {
    display: block;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.producto-item-admin.plegable summary.producto-cabecera {
    align-items: center;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
}
/* Checkbox de selección en lote (Pedidos/Promociones) — vive FUERA de
   <summary> a propósito (un <input> dentro de <summary> no es válido
   para accesibilidad: "Interactive element inside of a <summary>
   element"). Al ser hijo directo de <details> pero no el <summary>, el
   navegador lo oculta solo cuando la tarjeta está cerrada — se fuerza
   a visible siempre y se posiciona encima del encabezado con
   posicionamiento absoluto, en vez de vivir en el flujo normal. */
.producto-item-admin.plegable > .producto-item-checkbox-lote {
    display: block !important;
    position: absolute;
    top: var(--space-4);
    left: var(--space-5);
    z-index: 2;
    margin: 0;
}
/* Solo las tarjetas que SÍ tienen el checkbox (Pedidos/Promociones)
   necesitan el espacio extra a la izquierda — el resto de tarjetas
   .plegable (Productos, Distribución, etc.) no lo tienen y no deben
   moverse. */
.producto-item-admin.plegable:has(> .producto-item-checkbox-lote) summary.producto-cabecera {
    padding-left: calc(var(--space-5) + 26px);
}
.producto-item-admin.plegable summary.producto-cabecera::-webkit-details-marker { display: none; }
.producto-item-admin.plegable summary.producto-cabecera::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex-shrink: 0;
    margin-left: 4px;
}
.producto-item-admin.plegable[open] summary.producto-cabecera::after { transform: rotate(-135deg); }
.producto-item-admin.plegable summary.producto-cabecera:hover { background: var(--surface-2); }
.producto-item-cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--surface-3);
}

/* Envuelve el badge de estado de pago y el total juntos, apilados uno
   debajo del otro (antes iban lado a lado en la misma fila) — así el
   total queda visualmente asociado al estado de pago, justo debajo. */
.pedido-cabecera-estado-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Total del pedido, con más protagonismo que el resto de datos de la
   cabecera (fecha, cliente, método de pago) — antes iba mezclado en la
   misma línea de texto chico junto con todo lo demás, ahora tiene su
   propio bloque, más grande y en el color de marca. */
.pedido-total-destacado {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    color: var(--brand);
    margin-top: 1px;
    white-space: nowrap;
}
@media (max-width: 640px) { .pedido-total-destacado { font-size: 16px; } }

/* Descripción justo debajo del nombre, en su propio bloque legible */
.producto-item-admin .descripcion {
    font-size: var(--text-sm);
    color: var(--ink-light);
    line-height: 1.6;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
}

/* Panel de precios/margen, agrupado visualmente aparte */
.producto-panel-precios {
    font-size: var(--text-sm);
    color: var(--ink-light);
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: var(--space-3);
    line-height: 1.75;
}
.promo-productos-relacionados { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.promo-producto-relacionado-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-light);
}
.promo-producto-relacionado-item img { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; border: 1px solid var(--surface-3); }

/* Margen actual vs. propuesto, cuando el vendedor pide que Farmavitae
   asuma una parte del descuento. */
.bloque-margen-compartido { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.fila-margen-compartido {
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
    border-radius: var(--r-md);
    padding: var(--space-4);
    font-size: 13px;
}
.fila-margen-compartido-cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.fila-margen-compartido-cabecera strong { font-size: 14px; }
.fila-margen-compartido-propuesta { margin: 0 0 var(--space-3); font-size: 12.5px; color: var(--ink-light); line-height: 1.6; }
.fila-margen-compartido-propuesta strong { color: var(--ink); }
.tabla-margen-compartido { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: var(--space-2); }
.tabla-margen-compartido th { text-align: right; font-weight: 700; color: var(--ink-muted); padding: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.tabla-margen-compartido th:first-child { text-align: left; }
.tabla-margen-compartido td { padding: 6px 8px; text-align: right; border-top: 1px solid var(--surface-3); }
.tabla-margen-compartido td:first-child { text-align: left; color: var(--ink-light); }
.tabla-margen-compartido tr:first-child td { border-top: none; }
.fila-margen-compartido-destacada td { font-weight: 800; background: color-mix(in srgb, var(--brand) 5%, transparent); }
.fila-margen-compartido-destacada td:first-child { border-radius: 6px 0 0 6px; }
.fila-margen-compartido-destacada td:last-child { border-radius: 0 6px 6px 0; color: var(--brand); }
.fila-margen-compartido-alerta { margin: 0 0 var(--space-2); color: var(--error); font-weight: 700; font-size: 12.5px; }
.fila-margen-compartido-botones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fila-margen-compartido-botones button { flex: 1; min-width: 140px; }

/* Lista de "qué incluye esta promoción" — antes era una sola línea
   larga separada por "·" (descuento, envío gratis, 2x1, descuento
   adicional, todo junto), difícil de leer de un vistazo. Ahora cada
   cosa es su propia línea/chip, con el estado (aprobado/pendiente/no
   aprobado) bien resaltado cuando aplica. */
.lista-detalle-promo { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.chip-detalle-promo {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ink-light);
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 5px 10px;
    width: fit-content;
    max-width: 100%;
}
.chip-detalle-promo-estado {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--r-full);
}
.chip-detalle-promo-estado.pendiente { background: color-mix(in srgb, #F5A623 18%, transparent); color: #92660a; }
.chip-detalle-promo-estado.aprobado { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.chip-detalle-promo-estado.rechazado { background: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); }
.detalle-vendedor-promo, .detalle-fechas-promo { font-size: 12.5px; color: var(--ink-muted); margin: 2px 0; }
.lista-productos-regalo { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.fila-producto-regalo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--ink);
}
.fila-producto-regalo img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: var(--white); flex-shrink: 0; }
.fila-producto-regalo-nombre { flex: 1; font-weight: 600; }
.fila-producto-regalo-minimo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.fila-producto-regalo-minimo input { width: 80px; padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--surface-3); font-size: 13px; }
.fila-producto-regalo button {
    border: none;
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    padding: 2px 6px;
    flex-shrink: 0;
}
.fila-producto-regalo button:hover { color: var(--error); }
.fila-margen-compartido-botones .boton-estado-activo {
    opacity: 1 !important;
    cursor: default;
    font-weight: 800;
    box-shadow: inset 0 0 0 2px currentColor;
}
.fila-margen-compartido-botones .btn-aprobar.boton-estado-activo { background: var(--accent-dim); color: #0f7a7a; }
.fila-margen-compartido-botones .btn-rechazar.boton-estado-activo { background: rgba(192,57,43,.1); color: var(--error); }

/* Bloque de decisión de envío gratis en el panel de admin — separado
   de aprobar/rechazar la promoción en sí, con sus 2 propios botones. */
.bloque-envio-gratis-solicitado {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 15%, transparent);
    border-radius: var(--r-sm);
    padding: var(--space-3);
    margin-top: var(--space-3);
    font-size: 13px;
}
.bloque-envio-gratis-nota { width: 100%; margin: 0; font-size: 12px; color: var(--warning); font-weight: 600; }
.badge-envio-gratis { font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); font-size: 11.5px; }
.badge-envio-gratis.pendiente { background: color-mix(in srgb, #F5A623 15%, transparent); color: #92660a; }
.badge-envio-gratis.aprobado { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.badge-envio-gratis.rechazado { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }

/* Aviso de "acción requerida" en el panel del vendedor, cuando
   Farmavitae aprobó la promoción pero no el envío gratis. */
.aviso-decision-envio-gratis {
    background: linear-gradient(135deg, color-mix(in srgb, #F5A623 8%, var(--white)) 0%, color-mix(in srgb, #F5A623 3%, var(--white)) 100%);
    border: 1px solid color-mix(in srgb, #F5A623 22%, transparent);
    border-radius: var(--r-md);
    padding: var(--space-4);
    margin-top: var(--space-3);
}
.aviso-decision-envio-gratis p { margin: 0 0 var(--space-3); font-size: 13px; color: #7a5709; line-height: 1.6; }
.aviso-decision-envio-gratis-botones { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.aviso-decision-envio-gratis-botones .btn-primary {
    width: auto;
    margin-top: 0;
    padding: 8px 16px;
    border-radius: var(--r-md);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none;
    line-height: 1.3;
}
.aviso-decision-envio-gratis-botones .btn-primary:hover { transform: none; box-shadow: none; }
.aviso-decision-envio-gratis-botones .btn-pedido-link { font-size: 12.5px; line-height: 1.3; }
.aviso-envio-gratis-confirmado {
    font-size: 12.5px;
    color: var(--success);
    font-weight: 600;
    margin-top: var(--space-2);
}

/* Resumen compacto de una línea en la lista de perfiles (para que la lista
   no se vuelva eterna con muchos vendedores); el detalle completo se
   despliega con el botón "Ver toda la información". */
.perfil-resumen {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    margin-top: 2px;
}

/* Panel donde se despliega el formulario de perfil en solo lectura,
   dentro de una tarjeta de producto o de perfil ya existente. */
.perfil-detalle-form {
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    padding: var(--space-5);
    margin-top: var(--space-2);
}
.perfil-detalle-form input:disabled,
.perfil-detalle-form select:disabled,
.perfil-detalle-form textarea:disabled {
    background: var(--white);
    color: var(--ink);
    opacity: 1;
}

/* Detalle del perfil de vendedor (admin): cada sección en su propio bloque,
   separado por una línea, para que se note que hay 3 grupos de información
   y nada quede oculto. */
.perfil-detalle-secciones,
.detalle-perfil-vendedor {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.perfil-detalle-bloque {
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--ink-subtle);
}
.perfil-detalle-bloque:last-child { padding-bottom: 0; border-bottom: none; }
.perfil-detalle-bloque strong {
    display: block;
    margin-bottom: 4px;
    color: var(--brand-dark);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.producto-item-admin .archivos-producto { margin-top: 0; }

/* Confirmación de veracidad del vendedor */
.producto-declaracion {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: #0f7a7a;
}
.producto-declaracion svg { width: 14px; height: 14px; flex-shrink: 0; }
.producto-declaracion.faltante { color: var(--ink-muted); }

/* Pie de acciones, siempre separado del contenido por una línea */
.producto-item-admin .acciones {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-3);
}

/* Acciones de un pedido: en grupos claros en vez de un solo montón de
   botones — el pago junto, despachar aparte y más grande, y lo
   secundario/destructivo (comentar, cancelar, eliminar) visualmente más
   discreto y separado abajo. */
.acciones-pedido {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    border-top: 1px solid var(--surface-3);
}
.acciones-pedido-grupo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.acciones-pedido-etiqueta {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-muted);
    margin-right: 2px;
}
.btn-despachar {
    align-self: flex-start;
    border: none;
    border-radius: var(--r-full);
    padding: 8px 16px;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    background: var(--brand);
    color: var(--white);
    transition: var(--ease);
}
.btn-despachar:hover:not(:disabled) { background: var(--brand-mid, var(--brand)); transform: translateY(-1px); }
.btn-despachar:disabled { background: var(--surface-2); color: var(--ink-muted); cursor: default; }
.acciones-pedido-secundarias {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px dashed var(--surface-3);
}

/* Tabla compacta para el estado de despacho por vendedor, cuando un
   pedido tiene varios — una fila chica por cada uno, en vez de una caja
   completa repetida (con 10 vendedores, 10 cajas se veía pesado). */
.tabla-estado-vendedores {
    margin-top: 6px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.tabla-estado-vendedores-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    font-size: 12.5px;
}
.tabla-estado-vendedores-fila:nth-child(even) { background: var(--surface-2); }
.tabla-estado-vendedores-fila span:first-child {
    color: var(--ink-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-nombre-vendedor-pedido {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--brand);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-nombre-vendedor-pedido:hover { text-decoration: underline; }
.btn-pedido-link {
    border: none;
    background: none;
    color: var(--ink-muted);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: var(--ease);
}
.btn-pedido-link:hover { background: var(--surface-2); color: var(--ink); }
.btn-pedido-link-peligro:hover { background: rgba(192,57,43,.1); color: var(--error); }

.producto-item-admin.estado-aprobado { border-left: 4px solid var(--success); }
.producto-item-admin.estado-pendiente { border-left: 4px solid var(--warning); }
.producto-item-admin.estado-cambios_solicitados { border-left: 4px solid var(--warning); }
.producto-item-admin.estado-rechazado { border-left: 4px solid var(--error); }
.producto-item-admin.estado-dado_de_baja { border-left: 4px solid var(--ink-subtle); opacity: .75; }

.btn-aprobar, .btn-rechazar {
    border: none;
    border-radius: var(--r-full);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: var(--ease);
}
.btn-aprobar { background: var(--accent-dim); color: #0f7a7a; }
.btn-aprobar[disabled] { background: var(--surface-2); color: var(--ink-muted); cursor: not-allowed; opacity: .7; }
.btn-aprobar:hover { background: var(--accent); color: var(--white); }
.btn-rechazar { background: rgba(192,57,43,.1); color: var(--error); }
.btn-rechazar:hover { background: var(--error); color: var(--white); }

/* Color propio para "No pagado" en Estado de pago — antes usaba la
   misma clase que "Pagado" (btn-editar comparte estilo con
   btn-aprobar), así que ambos botones se veían del mismo color verde y
   eran difíciles de distinguir a simple vista dentro de un pedido. */
.btn-no-pagado {
    border: none;
    border-radius: var(--r-full);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: var(--ease);
    background: rgba(140,140,150,.14);
    color: #5a5a66;
}
.btn-no-pagado:hover { background: #5a5a66; color: var(--white); }

.preview-imagen {
    display: block;
    max-width: 140px;
    max-height: 140px;
    object-fit: cover;
    border-radius: var(--r-sm);
    margin-top: var(--space-3);
    border: 1px solid var(--surface-3);
}

/* Imagen de perfil (logo) y portada de la tienda, en el panel del vendedor */
.campo-imagen-tienda-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.preview-logo-circular {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--surface-3);
    background: var(--surface-2);
    order: -1;
}
.preview-logo-circular img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-portada-ancha {
    order: -1;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid var(--surface-3);
    background: var(--surface-2);
    margin-top: 0;
}
.btn-quitar-portada { align-self: flex-start; }

/* ============ MODAL: recorte/posicionamiento de imagen ============ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,25,47,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: 1000;
}
.modal-recorte-caja {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    max-width: 520px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}
.modal-recorte-caja h3 { margin: 0 0 var(--space-2); }
.modal-recorte-ayuda { color: var(--ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); line-height: 1.5; }
.modal-recorte-contenedor {
    width: 100%;
    height: 320px;
    background: var(--surface-2);
    border-radius: var(--r-md);
    overflow: hidden;
}
.modal-recorte-contenedor img { max-width: 100%; display: block; }
.modal-recorte-acciones {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.miniatura {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    border: 1px solid var(--surface-3);
}

/* Tarjeta del cálculo automático (precio con IVA + margen) en el
   formulario de Agregar/Editar producto — antes eran 2 líneas de texto
   plano sueltas; ahora es una tarjeta con etiqueta + valor destacado,
   mismo lenguaje visual que el resto de cajas de cálculo del sitio. */
.calculo-precio-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
}
.calculo-precio-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 1.4em;
}
.calculo-precio-fila:empty { display: none; }
.calculo-precio-etiqueta { font-size: 12.5px; color: var(--ink-muted); font-weight: 600; }
.calculo-precio-valor { font-size: 16px; font-weight: 800; color: var(--brand); white-space: nowrap; }
.calculo-precio-pct { font-size: 11.5px; font-weight: 700; color: #0f7a7a; background: var(--accent-dim); border-radius: 999px; padding: 1px 8px; margin-left: 2px; }
.calculo-precio-fila.negativo .calculo-precio-etiqueta { color: var(--error); font-weight: 700; }

.detalle-precios {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    margin-top: 2px;
    line-height: 1.6;
}
.margen-positivo { color: #0f7a7a; font-weight: 600; }
.margen-negativo { color: var(--error); font-weight: 600; }

/* Detalle de precios en la tarjeta de promociones del vendedor — con
   etiquetas claras en vez de una sola línea corrida, para que se
   entienda de un vistazo qué está pidiendo la promoción. */
.detalle-precios-promo {
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.detalle-precios-promo-fila { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; }
.detalle-precios-promo-fila span:first-child { color: var(--ink-muted); }
.detalle-precios-promo-fila strong { white-space: nowrap; }
.precio-tachado { text-decoration: line-through; color: var(--ink-muted); font-weight: 400; margin-right: 2px; }
.detalle-precios-promo-nota { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; }

.comentario-admin { background: rgba(230,126,34,.12); color: var(--warning); border: 1px solid rgba(230,126,34,.25); }

.comentario-inline {
    font-size: var(--text-sm);
    color: var(--warning);
    background: rgba(230,126,34,.1);
    border-radius: var(--r-sm);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
}

/* Chat admin↔vendedor — lista de burbujas + formulario de envío.
   Reutilizado igual en el panel de admin (dentro de un hilo) y en el
   panel de vendedor (su único hilo con Farmavitae). */
.chat-mensajes-lista {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 420px;
    overflow-y: auto;
    padding: var(--space-3);
    background: var(--surface-2);
    border-radius: var(--r-md);
    margin-top: var(--space-3);
}
/* Separador "Hoy" / "Ayer" / fecha entre grupos de mensajes de días
   distintos — una línea fina con la etiqueta centrada encima. */
.chat-separador-dia { display: flex; align-items: center; justify-content: center; margin: var(--space-3) 0 6px; }
.chat-separador-dia:first-child { margin-top: 2px; }
.chat-separador-dia span {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-muted);
    background: color-mix(in srgb, var(--surface-2) 100%, var(--white) 0%);
    border: 1px solid var(--surface-3);
    border-radius: 999px;
    padding: 2px 12px;
}
.chat-burbuja {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    margin-top: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* Burbuja "agrupada" — mismo remitente que la de arriba, seguida sin
   interrupción: se acerca a la anterior (como WhatsApp) en vez de
   repetir el mismo espaciado que si fuera de alguien distinto. */
.chat-burbuja.chat-burbuja-agrupada { margin-top: 2px; }
.chat-burbuja-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-burbuja-fecha { font-size: 10.5px; margin-top: 3px; opacity: .7; }
.chat-burbuja-otro {
    align-self: flex-start;
    background: var(--surface-1, #fff);
    border: 1px solid var(--surface-3);
    color: var(--ink);
    border-bottom-left-radius: 4px;
}
.chat-burbuja-otro.chat-burbuja-agrupada { border-top-left-radius: 4px; }
.chat-burbuja-propia {
    align-self: flex-end;
    background: var(--brand);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-burbuja-propia.chat-burbuja-agrupada { border-top-right-radius: 4px; }
.chat-form-enviar {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: var(--space-3);
}
.chat-form-enviar textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    min-height: 22px;
    max-height: 120px;
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid var(--surface-3);
    background: var(--surface-2);
    font-family: var(--font);
    line-height: 1.4;
}
.chat-form-enviar textarea:focus { background: var(--white); }
/* .btn-primary por defecto es width:100% (pensado para formularios
   normales, un botón solo en su propia fila) — acá compite por
   espacio con el textarea dentro de la misma fila, así que se anula
   ese ancho y el margen superior que traía de fábrica. Botón redondo
   con un ícono de enviar, en vez del botón de texto genérico. */
.chat-form-enviar .btn-primary {
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    margin-top: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
}
.chat-form-enviar .btn-primary svg { width: 18px; height: 18px; transform: translateX(-1px); }

/* Lista de conversaciones (panel de admin) — una fila = un vendedor,
   con inicial en círculo + último mensaje + hora, estilo app de
   mensajería, en vez de la tarjeta genérica de productos que usaba
   antes (mucho padding, sin foco en "conversación"). */
.chat-hilo-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--surface-3);
    background: none;
    font-family: var(--font);
    transition: var(--ease);
}
.chat-hilo-item:last-child { border-bottom: none; }
.chat-hilo-item:hover { background: var(--surface-2); border-radius: var(--r-md); }
.chat-hilo-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-dim, #E6F7F7); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.chat-hilo-info { flex: 1; min-width: 0; }
.chat-hilo-nombre { font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.chat-hilo-preview { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.chat-hilo-item .badge { flex-shrink: 0; }

/* Encabezado de un hilo abierto — avatar + nombre a la izquierda,
   acción de eliminar como ícono chico a la derecha (antes era un
   botón rojo grande, competía visualmente con el nombre). */
.chat-hilo-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.chat-hilo-header .chat-hilo-avatar { width: 44px; height: 44px; font-size: 17px; }
.chat-hilo-header h3 { margin: 0; }
.chat-hilo-header-acciones { margin-left: auto; flex-shrink: 0; }
.btn-chat-eliminar-icono {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--surface-3);
    background: var(--white); color: var(--ink-muted); display: flex; align-items: center;
    justify-content: center; cursor: pointer; transition: var(--ease);
}
.btn-chat-eliminar-icono:hover { background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.3); color: var(--error); }
.btn-chat-eliminar-icono svg { width: 16px; height: 16px; }

/* Datos de pago (banco del vendedor) — filas etiqueta/valor en vez de
   un párrafo largo separado por "·", para que un dato puntual se
   pueda ubicar de un vistazo en lugar de tener que leer todo seguido.
   Reutilizado en el panel de admin (perfil completo) y en el panel
   del vendedor (Datos de pago). */
.caja-datos-pago {
    border-radius: var(--r-md);
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
}
.caja-datos-pago-aprobado { background: var(--accent-dim); border-color: color-mix(in srgb, var(--brand) 15%, transparent); }
.caja-datos-pago-pendiente { background: rgba(230,126,34,.08); border-color: rgba(230,126,34,.2); }
.caja-datos-pago-titulo { margin: 0 0 var(--space-2); font-weight: 800; font-size: 14px; color: var(--ink); }
.fila-dato-pago {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-size: 13.5px;
}
.fila-dato-pago:last-of-type { border-bottom: none; }
.fila-dato-pago-etiqueta { color: var(--ink-muted); flex-shrink: 0; }
.fila-dato-pago-valor { font-weight: 700; color: var(--ink); text-align: right; }

/* Barra de "seleccionar todas / eliminar seleccionadas" — reutilizable
   en cualquier lista con selección en lote (por ahora, Promociones
   Finalizadas/Rechazadas en el panel de admin). */
.barra-acciones-lote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.barra-acciones-lote .checkbox-inline { font-weight: 600; font-size: var(--text-sm); }

/* Aviso de que un producto tiene una promoción aprobada vigente hoy,
   con sus fechas y los precios nuevos ya aprobados. */
.promo-activa-banner {
    font-size: var(--text-sm);
    color: #0f7a7a;
    background: var(--accent-dim);
    border: 1px solid rgba(25,211,211,.3);
    border-radius: var(--r-sm);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    line-height: 1.6;
}
/* Detalle del producto BENEFICIADO cuando la promoción es "descuento en
   producto adicional" — con imagen, para no tener que adivinar de qué
   producto se trata solo por el nombre. */
.promo-activa-banner-beneficiado {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-2);
}
.promo-activa-banner-beneficiado img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(25,211,211,.3);
    flex-shrink: 0;
}

/* Aviso de que una promoción ya fue aprobada pero su fecha de vigencia
   ya pasó: sigue aprobada en la base de datos, pero ya no se aplica a
   los clientes. Se muestra tanto en el panel del vendedor como en admin. */
.promo-finalizada-nota {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    line-height: 1.6;
}

.caja-comentario { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.caja-comentario textarea { min-height: 60px; }

.detalle-perfil-vendedor {
    font-size: var(--text-sm);
    color: var(--ink-light);
    background: var(--surface);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
}
.btn-enviar-comentario, .btn-pedir-cambios, .btn-editar {
    border: none;
    border-radius: var(--r-full);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: var(--ease);
}
.btn-enviar-comentario { align-self: flex-start; background: var(--brand); color: var(--white); }
.btn-enviar-comentario:hover { background: var(--brand-mid); }
.btn-pedir-cambios { background: rgba(230,126,34,.12); color: var(--warning); }
.btn-pedir-cambios:hover { background: var(--warning); color: var(--white); }
.btn-editar { background: var(--accent-dim); color: #0f7a7a; flex-shrink: 0; }
.btn-editar:hover { background: var(--accent); color: var(--white); }

/* =========================================================
   FOTOS MÚLTIPLES + REGISTRO SANITARIO
   ========================================================= */
.ayuda-fotos {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: 1.55;
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    background: var(--surface-2);
    border-radius: var(--r-sm);
}

/* =========================================================
   DECLARACIÓN DE VERACIDAD (checkbox obligatorio)
   ========================================================= */
.declaracion-legal {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--surface-2);
    border: 1.5px solid var(--ink-subtle);
    border-radius: var(--r-md);
    transition: var(--ease);
}
.declaracion-legal:focus-within { border-color: var(--brand-mid); }
.declaracion-legal-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}
.declaracion-legal-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--brand);
    cursor: pointer;
}
.declaracion-legal-label span {
    font-size: var(--text-sm);
    color: var(--ink-light);
    line-height: 1.6;
}
.declaracion-legal-label strong { color: var(--ink); }

/* Checkbox simple en línea (p. ej. "Bajo pedido" en el formulario de producto) */
.checkbox-inline {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    cursor: pointer;
    font-weight: 400;
}
.checkbox-inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--brand);
    cursor: pointer;
}
.checkbox-inline span {
    font-size: var(--text-sm);
    color: var(--ink-light);
    line-height: 1.5;
}

/* Vista previa de una promoción: imagen del producto + comparación de
   precio para el cliente y de costo para Farmavitae (el vendedor asume
   el descuento, así que su costo también baja durante la promoción). */
.promo-preview {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
}
.promo-preview .miniatura {
    width: 72px;
    height: 72px;
}
.promo-preview-datos {
    flex: 1;
    min-width: 0;
}
.promo-preview-nombre {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-2);
}
.promo-preview-fila {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-light);
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.promo-preview-fila .precio-anterior {
    text-decoration: line-through;
    color: var(--ink-muted);
}
.promo-preview-fila .precio-nuevo {
    font-weight: 700;
    color: var(--brand-dark);
    font-size: var(--text-base);
}
.promo-preview-fila .flecha { color: var(--ink-muted); }
.promo-preview-costo {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--surface-3);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.5;
}
.promo-preview-costo strong { color: var(--ink-light); }
.promo-preview-adicionales { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.promo-preview-adicionales span {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
}

/* Casillas de "Envío gratis" y "2x1" en el formulario de promociones —
   independientes del tipo de descuento de arriba, se pueden combinar
   con cualquiera (o entre ellas). */
.promo-adicional-card {
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
}
.promo-adicional-detalle { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--surface-3); }
.promo-adicional-detalle input[type="number"] { max-width: 140px; }
.aviso-envio-gratis-pendiente {
    font-size: 12.5px;
    color: #92660a;
    background: color-mix(in srgb, #F5A623 14%, transparent);
    border: 1px solid color-mix(in srgb, #F5A623 30%, transparent);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    margin: var(--space-2) 0 0;
    line-height: 1.5;
}
.promo-2x1-campos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.promo-2x1-campos-fila input[type="number"] { max-width: none; width: 100%; }

.opcional-tag {
    text-transform: none;
    font-weight: 400;
    color: var(--ink-muted);
}

.requerido-tag {
    color: var(--error);
    font-weight: 800;
}

.leyenda-campos-obligatorios {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin: 0 0 var(--space-4);
}
.leyenda-campos-obligatorios .requerido-tag { margin-right: 2px; }

#tabs-modo-agregar { margin-bottom: var(--space-5); }

/* Sugerencia de dimensiones bajo el label de logo/portada de la tienda */
.dimension-hint {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--ink-muted);
    margin-top: -2px;
}

/* =========================================================
   CARGA MASIVA DE PRODUCTOS (CSV)
   ========================================================= */
/* Tabs para alternar entre carga individual y carga masiva, dentro de "Agregar producto" */
.pasos-carga-masiva {
    margin: 0 0 var(--space-4);
    padding-left: 1.25em;
    color: var(--ink-light);
    font-size: var(--text-sm);
    line-height: 1.6;
}
.pasos-carga-masiva li { margin-bottom: 2px; }

.csv-resultado-lista {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.csv-resultado-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    border: 1px solid var(--surface-3);
}
.csv-resultado-item.csv-ok {
    background: var(--accent-dim);
    color: #0f7a7a;
    border-color: rgba(25,211,211,.3);
}
.csv-resultado-item.csv-error {
    background: rgba(192,57,43,.08);
    color: var(--error);
    border-color: rgba(192,57,43,.18);
}
.csv-resultado-resumen {
    font-weight: 700;
    color: var(--ink);
}

/* =========================================================
   SECCIONES DE FORMULARIO (perfil del vendedor)
   ========================================================= */
.form-section {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--surface-3);
}
.form-section:first-of-type {
    margin-top: var(--space-2);
    padding-top: 0;
    border-top: none;
}
.form-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.form-section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-base);
    color: var(--brand-dark);
    letter-spacing: -.005em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-section-title .form-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r-full);
    background: var(--accent-dim);
    color: #0f7a7a;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.form-section-tag {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.form-section-tag.tag-obligatoria { color: var(--brand-mid); }
.campo-marcado-tag {
    display: inline-block;
    margin-left: 8px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--error);
    background: rgba(192,57,43,.08);
    border: 1px solid rgba(192,57,43,.25);
    border-radius: var(--r-full);
    padding: 1px 8px;
    vertical-align: middle;
}
.form-section-hint {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    margin: var(--space-1) 0 0;
    line-height: 1.5;
}

/* Aviso: qué campos alimentan el buscador del Marketplace (form de
   agregar / editar producto en el panel de vendedor). */
.form-ayuda-buscador {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    background: var(--accent-dim);
    border: 1px solid rgba(25,211,211,.3);
    border-radius: var(--r-md, 12px);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0 var(--space-4);
}
.form-ayuda-buscador svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: #0f7a7a;
    margin-top: 1px;
}
.form-ayuda-buscador strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}
.form-ayuda-buscador p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-muted);
}
.form-ayuda-buscador b { color: var(--ink); font-weight: 700; }

.etiqueta-buscador {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #0f7a7a;
    background: var(--accent-dim);
    border-radius: var(--r-full, 999px);
    padding: 1px 7px;
    vertical-align: middle;
}
.admin-agregar-correo-fila {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-3);
}
.admin-agregar-correo-fila input[type="email"],
.admin-agregar-correo-fila input[type="file"] { flex: 1; margin: 0; }

/* Grilla de 2 columnas en pantallas anchas para no hacer el formulario
   eterno; cada label+input ocupa una celda. */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-4);
}
@media (min-width: 640px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-grid > .campo-ancho { grid-column: 1 / -1; }
}

/* Labels dentro de estas grillas de 2 columnas (perfil del vendedor):
   más pequeñas y livianas para que quepan cómodas en la columna angosta
   y no se vean apretadas contra el campo, incluso con textos largos como
   "Nombre de persona de contacto (opcional)". */
.form-grid label {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 6px;
}
.form-grid label .opcional-tag {
    font-size: var(--text-xs);
    font-weight: 400;
}

/* Cada campo (y su comentario, si lo tiene) vive dentro de una sola celda
   de la grilla. Antes el campo y su caja de comentario eran dos elementos
   independientes dentro de .form-grid, así que al aparecer un comentario
   se corría el conteo de celdas y todos los campos siguientes saltaban de
   columna. Envolviéndolos juntos, mostrar/ocultar el comentario solo
   cambia el alto de esa celda, nunca el orden de las demás. */
.campo-perfil-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.campo-perfil-item.campo-ancho { grid-column: 1 / -1; }

/* Envoltorio de cada campo del perfil (label + input), permite
   mostrar/ocultar un campo individual cuando el admin solo pide
   corregir algunos y no todo el formulario. */
.campo-perfil label {
    margin-top: 0;
    margin-bottom: 6px;
    display: block;
    font-size: var(--text-xs);
    line-height: 1.4;
}
.campo-perfil label .opcional-tag {
    display: inline-block;
    font-size: var(--text-xs);
}

.campo-perfil.campo-a-corregir label { color: var(--error); }
.campo-perfil.campo-a-corregir input,
.campo-perfil.campo-a-corregir select,
.campo-perfil.campo-a-corregir textarea {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(192,57,43,.10);
}
.campo-a-corregir-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--error);
    vertical-align: middle;
}

/* Comentario específico de un campo marcado, mostrado justo al lado de
   su casilla (formulario del vendedor), en vez de un banner genérico
   con todo mezclado arriba del formulario. */
.campo-comentario-vendedor {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(192,57,43,.06);
    border: 1px solid rgba(192,57,43,.2);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    color: var(--error);
    line-height: 1.45;
}

.aviso-campos-parciales { background: var(--accent-dim); color: #0f7a7a; border: 1px solid rgba(25,211,211,.3); }

/* Campos clicables del panel de admin (vista "Ver toda la información"):
   tocar la caja de un campo lo marca en rojo; el comentario es opcional
   y aparece en un bloque propio, ordenado, justo debajo del campo. */
.campo-perfil-clicable {
    cursor: pointer;
    border-radius: var(--r-sm);
    padding: var(--space-2);
    transition: var(--ease);
}
.campo-perfil-clicable:hover { background: var(--surface-2); }
.campo-perfil-clicable input,
.campo-perfil-clicable select,
.campo-perfil-clicable textarea {
    pointer-events: none;
}
.campo-perfil-clicable.campo-a-corregir { background: rgba(192,57,43,.06); }

.campo-comentario-corregir {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-2);
    border-left: 3px solid rgba(192,57,43,.35);
}
.campo-comentario-corregir-caja {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.campo-comentario-corregir-etiqueta {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--error);
}
.campo-comentario-corregir textarea {
    min-height: 40px;
    max-height: 90px;
    padding: 6px var(--space-2);
    font-size: var(--text-xs);
    font-style: italic;
    line-height: 1.4;
    color: var(--ink-light);
    background: rgba(192,57,43,.05);
    border: 1.5px dashed rgba(192,57,43,.4);
    border-radius: 6px;
    box-shadow: none;
}
.campo-comentario-corregir textarea:focus {
    font-style: normal;
    color: var(--ink);
    background: var(--white);
    border-style: solid;
}
.btn-toggle-comentario-campo {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--error);
    text-decoration: underline;
    cursor: pointer;
}

.acciones-perfil-completo {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--surface-3);
}
.acciones-perfil-completo .btn-primary { width: auto; }

/* Casillas del admin para marcar qué campos debe corregir el vendedor */
.caja-comentario-hint {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.5;
}
.campos-a-corregir {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    padding: var(--space-3);
}
.campos-a-corregir-grupo-titulo {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
    margin-bottom: var(--space-1);
}
.campos-a-corregir-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.campo-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-light);
    background: var(--white);
    border: 1.5px solid var(--ink-subtle);
    border-radius: var(--r-full);
    padding: 6px 14px;
    cursor: pointer;
    transition: var(--ease);
    font-family: var(--font);
}
.campo-chip:hover { border-color: var(--error); color: var(--error); }
.campo-chip.campo-chip-seleccionado {
    background: rgba(192,57,43,.08);
    border-color: var(--error);
    color: var(--error);
    font-weight: 700;
}

.archivo-nombre {
    font-size: var(--text-sm);
    color: var(--ink-light);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--surface-3);
}

.archivos-producto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.archivos-producto a {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-mid);
    background: var(--surface-2);
    border: 1px solid var(--ink-subtle);
    padding: 4px 10px;
    border-radius: var(--r-full);
    text-decoration: none;
    transition: var(--ease);
}
.archivos-producto a:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.archivos-producto .archivo-faltante {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--error);
    background: rgba(192,57,43,.08);
    padding: 4px 10px;
    border-radius: var(--r-full);
}
.archivos-producto .archivo-ok {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-muted);
    background: var(--surface-2);
    padding: 4px 10px;
    border-radius: var(--r-full);
}

.oculto { display: none !important; }

/* =========================================================
   LINK "VER MI TIENDA PÚBLICA" — dashboard de vendedor
   Añadido, no reemplaza ninguna regla existente.
   ========================================================= */
.link-tienda-publica {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    margin: 0 0 var(--space-4);
    position: relative;
    padding: 6px 14px;
    border: 1px solid rgba(25,211,211,.35);
    border-radius: var(--r-full);
    transition: var(--ease);
}
.link-tienda-publica:hover { background: rgba(25,211,211,.12); color: var(--sidebar-text-hi); }
.detalle-sin-stock { color: var(--error); font-weight: 600; }
.acciones-sin-stock {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.input-reponer-stock {
    width: 120px;
    padding: 8px 10px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    font-family: inherit;
}

.campana-preview {
    margin-top: var(--space-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--white);
}
.campana-preview-logo { text-align: center; padding: var(--space-4) var(--space-4) 0; }
.campana-preview-logo img { height: 40px; width: auto; }
.campana-preview-intro { color: var(--ink-light); font-size: var(--text-sm); text-align: center; line-height: 1.6; margin: 0 0 var(--space-4); }
.campana-preview-firma { color: var(--ink-muted); font-size: 12px; text-align: center; line-height: 1.6; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--surface-3); }
.campana-preview-header {
    background: var(--brand);
    color: var(--white);
    padding: var(--space-4);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-md);
}
.campana-preview-cuerpo { padding: var(--space-5); }
.campana-preview-img {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: var(--surface-2);
    border-radius: var(--r-md);
    display: block;
    margin: 0 auto var(--space-4);
}
.campana-preview-nombre { font-family: var(--font-display); font-size: var(--text-lg); text-align: center; margin: 0 0 6px; color: var(--ink); }
.campana-preview-detalle { color: var(--ink-muted); text-align: center; font-size: var(--text-sm); margin: 0 0 var(--space-3); line-height: 1.6; }
.campana-preview-precio { text-align: center; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--brand); margin-bottom: var(--space-4); }
.campana-preview-precio-antes { text-decoration: line-through; color: var(--ink-muted); font-size: var(--text-md); font-weight: 500; margin-right: 8px; }
.campana-preview-cta {
    display: block;
    text-align: center;
    background: var(--brand);
    color: var(--white);
    font-weight: 700;
    padding: 12px;
    border-radius: var(--r-full);
    text-decoration: none;
    max-width: 240px;
    margin: 0 auto;
}

.tab-pedido-estado {
    border: 1px solid var(--surface-3);
    background: var(--white);
    color: var(--ink-muted);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 9px 18px;
    border-radius: var(--r-full);
    cursor: pointer;
    transition: var(--ease);
    margin-right: 8px;
}
.tab-pedido-estado:hover { border-color: var(--brand); color: var(--brand); }
.tab-pedido-estado.activo { background: var(--brand); border-color: var(--brand); color: var(--white); }

/* Los 4 pasos del recorrido de un pedido (Pedidos → Solicitud de
   despacho → Entrega a cliente → Finalizado) se veían como simples
   pestañas de filtro, sin ninguna pista de que son pasos en orden —
   alguien nuevo no tenía por qué saber que hay que ir de izquierda a
   derecha. El número + la flecha lo dejan explícito de un vistazo.
   "Archivados" no es un paso del recorrido (es la papelera), así que
   va aparte con un separador — pero SIN margin-left:auto, que cuando
   la fila no alcanzaba y "4 Finalizado" pasaba a una segunda línea,
   dejaba a "Archivados" solo, empujado al borde derecho de esa segunda
   línea, con un salto raro. Ahora los 4 pasos viven en su propia fila
   que nunca se parte (scroll horizontal si hace falta) y "Archivados"
   siempre queda pegado justo después, con un separador fino. Bug de
   diseño real encontrado 2026-09-22 (captura del usuario). */
.fila-flujo-pedidos-contenedor { display: flex; align-items: center; flex-wrap: nowrap; }
.fila-flujo-pedidos-pasos {
    display: flex; align-items: center; gap: 7px;
    overflow-x: auto; flex: 1 1 auto; min-width: 0; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    /* El texto de un paso que no alcanza se corta justo en el borde del
       celular, sin ningún indicio de que se puede deslizar para verlo —
       se ve cortado/roto en vez de "hay más, desliza". Mismo degradado
       que ya usan las tiras de categorías scrolleables del sitio. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
}
.fila-flujo-pedidos-divisor { width: 1px; align-self: stretch; background: var(--surface-3); flex-shrink: 0; margin: 0 2px; }
.tab-pedido-flujo { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.tab-pedido-flujo-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    font-size: 11px; font-weight: 800;
    background: var(--surface-2); color: var(--ink-muted);
}
.tab-pedido-flujo.activo .tab-pedido-flujo-num { background: var(--white); color: var(--brand); }
.tab-pedido-flujo-flecha { color: var(--ink-muted); font-size: 13px; align-self: center; flex-shrink: 0; }
.tab-pedido-estado-aparte { flex-shrink: 0; }
@media (max-width: 780px) {
    .tab-pedido-flujo-flecha { display: none; }
    .fila-flujo-pedidos-contenedor { flex-wrap: wrap; }
    .fila-flujo-pedidos-divisor { display: none; }
    .tab-pedido-estado-aparte { margin-top: 8px; }
}

/* Sub-filtro dentro de una pestaña (ej. Pagado/Contra entrega dentro de
   Finalizado) — visualmente más chico y discreto que las pestañas
   principales, para que no se confundan al primer vistazo. */
.subfiltro-pedido-estado {
    border: 1px solid var(--surface-3);
    background: var(--surface-2);
    color: var(--ink-muted);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: var(--r-full);
    cursor: pointer;
    transition: var(--ease);
    margin-right: 6px;
}
.subfiltro-pedido-estado:hover { border-color: var(--brand-mid); color: var(--brand); }
.subfiltro-pedido-estado.activo { background: var(--white); border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }

/* ============ SELECTOR BUSCABLE (reemplaza selects largos por un buscador con foto) ============ */
.selector-buscable-wrap { position: relative; }
.selector-buscable-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--surface-3);
    font-family: var(--font);
    font-size: var(--text-sm);
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A85A0' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
.selector-buscable-input:focus { outline: none; border-color: var(--brand); }
.selector-buscable-resultados {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0; right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
}
.selector-buscable-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--ink);
}
.selector-buscable-item:hover { background: var(--surface-2); }
.selector-buscable-item img, .selector-buscable-item-sin-img {
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--surface-2);
    flex-shrink: 0;
}
.selector-buscable-vacio { padding: 12px; color: var(--ink-muted); font-size: var(--text-sm); text-align: center; }

.acceso-secciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

/* ============ SECCIONES PLEGABLES DEL ADMIN (Categorías / Destacados) ============ */
.admin-seccion-plegable summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
}
.admin-seccion-plegable summary::-webkit-details-marker { display: none; }
.admin-seccion-plegable summary h2, .admin-seccion-plegable summary h3 { margin: 0; }
.admin-seccion-flecha {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--ink-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}
.admin-seccion-plegable[open] .admin-seccion-flecha { transform: rotate(180deg); }
.admin-seccion-contenido { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--surface-3); }

/* Cada campo de imagen de Configuración (logo, imagen de Inicio,
   carrusel de testimonios) en su propio bloque separado, con su
   etiqueta, texto de ayuda y vista previa siempre en el mismo formato
   — antes cada uno tenía un estilo ligeramente distinto, escrito en
   línea. */
.campo-imagen-admin { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px dashed var(--surface-3); }
.campo-imagen-admin:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.campo-imagen-admin > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.campo-imagen-admin-ayuda { margin: 0 0 var(--space-3); font-size: 13px; color: var(--ink-muted); }
.campo-imagen-admin-fila { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.campo-imagen-admin-fila input[type="file"] { flex: 1; min-width: 200px; }
.campo-imagen-admin-preview {
    max-width: 160px;
    max-height: 72px;
    object-fit: contain;
    border: 1px solid var(--surface-3);
    border-radius: 8px;
    padding: 6px;
    background: #fff;
}
.grid-testimonios-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); }
.campo-imagen-admin-slot { display: flex; flex-direction: column; gap: 6px; }
.campo-imagen-admin-slot span { font-size: 11px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; }
.campo-imagen-admin-slot input[type="file"] { font-size: 12px; }
.campo-imagen-admin-slot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--surface-3); }

/* ---- Selector de emoji para el ícono de categoría ---- */
.btn-selector-emoji {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--surface-3);
    background: var(--surface-2);
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-selector-emoji:hover { background: var(--surface-3); }
.btn-selector-emoji span { font-size: 18px; }
.panel-selector-emoji {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 280px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.panel-selector-emoji button {
    border: none;
    background: none;
    font-size: 20px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}
.panel-selector-emoji button:hover { background: var(--surface-2); }
/* =========================================================
   OPTIMIZACIÓN MÓVIL — reduce el padding fijo de .card en
   pantallas angostas (afecta admin.html y cualquier página que
   solo cargue este archivo; el Marketplace público además tiene
   su propio ajuste más específico en mercado.css).
   ========================================================= */
@media (max-width: 640px) {
    .card { padding: var(--space-4); margin-bottom: var(--space-4); }
}

/* =========================================================
   TAMAÑO DE TEXTO ESTÁNDAR EN MÓVIL — igual al párrafo "En Farmavitae
   creemos que el bienestar no debe..." (--text-sm, 13.6px). Se aplica
   como base a todo párrafo de texto corrido en cualquier página; los
   textos con su propio tamaño explícito (badges, precios, botones,
   etiquetas) no se ven afectados porque sus selectores son más
   específicos que el simple "p" de aquí.
   ========================================================= */
@media (max-width: 640px) {
    p { font-size: var(--text-sm); }
}

/* =========================================================
   PANEL DE ADMIN Y VENDEDOR — BOTONES MÁS FÁCILES DE TOCAR EN CELULAR
   ---------------------------------------------------------------------
   .btn-pedido-link, .btn-aprobar/.btn-rechazar, .btn-despachar y
   .btn-editar se usan en decenas de acciones (Comentario, Contactar
   por WhatsApp, Pagado/Contra entrega, Marcar listo, etc.) — en
   escritorio su tamaño compacto está bien, pero en celular quedan
   demasiado chicos para tocar cómodo con el dedo. Se agrandan solo
   en pantallas angostas, sin tocar cómo se ven en escritorio.
   ========================================================= */
@media (max-width: 640px) {
    .btn-pedido-link {
        font-size: 13px;
        padding: 9px 14px;
        min-height: 36px;
    }
    .btn-aprobar, .btn-rechazar, .btn-editar {
        font-size: 13px;
        padding: 8px 14px;
        min-height: 34px;
    }
    .btn-despachar {
        font-size: 13.5px;
        padding: 11px 18px;
        min-height: 40px;
    }
    /* Los grupos de botones de acción (Estado de pago, Despacho) pasan a
       ocupar todo el ancho disponible en vez de quedar apretados en una
       sola fila angosta — más fácil de leer y de tocar. */
    .acciones-pedido-grupo { display: flex; flex-wrap: wrap; gap: 6px; }
    .acciones-pedido-grupo button { flex: 1; min-width: 100px; }
}

/* =========================================================
   WIDGETS COMPARTIDOS (accesibilidad + WhatsApp flotante)
   ---------------------------------------------------------------------
   Antes vivían solo en mercado.css, aunque las 6 páginas públicas
   los activan (window.FarmavitaeUtils.iniciarWidgetAccesibilidad() /
   iniciarWidgetWhatsapp()) — en las otras 5, aparecían sin ningún
   estilo. Se mueven aquí, al archivo que comparten todas.
   ========================================================= */
/* ============ WIDGET DE ACCESIBILIDAD ============ */
.a11y-btn {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 500;
    width: 52px; height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
    border: none;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ease);
}
.a11y-btn:hover { transform: translateY(-2px) scale(1.05); background: var(--brand-dark); }
.a11y-btn svg { width: 26px; height: 26px; }
.a11y-panel {
    position: fixed;
    left: 20px;
    bottom: 144px;
    z-index: 500;
    width: 280px;
    max-width: calc(100vw - 40px);
    /* Límite de altura + scroll propio — sin esto, si el contenido
       crecía (por ejemplo con el tamaño de letra agrandado), el panel
       se extendía hacia arriba y se salía de la pantalla en celular,
       dejando el botón para volver a "Normal" fuera de alcance y sin
       manera de bajarlo de nuevo. */
    max-height: calc(100vh - 160px);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--surface-3);
    padding: var(--space-4);
    display: none;
    box-sizing: border-box;
}
.a11y-panel.a11y-abierto { display: block; }
.a11y-panel h3 { margin: 0 0 var(--space-3); font-size: var(--text-base); font-family: var(--font-display); }
.a11y-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--surface-3); }
.a11y-fila:first-of-type { border-top: none; }
.a11y-fila span { font-size: var(--text-sm); color: var(--ink); flex: 1; min-width: 0; }
.a11y-tamano-btns { display: flex; gap: 4px; flex-shrink: 0; }
.a11y-tamano-btns button {
    min-width: 44px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--surface-3);
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}
.a11y-tamano-btns button:hover, .a11y-tamano-btns button.a11y-activo { background: var(--brand); color: var(--white); border-color: var(--brand); }
.a11y-switch {
    position: relative;
    width: 40px; height: 22px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--ease);
}
.a11y-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--white);
    transition: var(--ease);
    box-shadow: var(--shadow-sm);
}
.a11y-switch.a11y-activo { background: var(--brand); }
.a11y-switch.a11y-activo::after { transform: translateX(18px); }
.a11y-restablecer { width: 100%; margin-top: var(--space-3); padding: 8px; border-radius: var(--r-md); border: 1px solid var(--surface-3); background: var(--surface-2); color: var(--ink-muted); font-size: var(--text-xs); cursor: pointer; }
.a11y-restablecer:hover { background: var(--surface-3); }

/* ---- Tamaño de letra ----
   Se escala SOLO la raíz (rem/em crecen con ella y el diseño mantiene
   sus proporciones). Los aumentos son moderados a propósito: subir el
   texto un +50 % en un layout con muchos anchos fijos siempre termina
   descuadrando algo. Con estos 3 pasos + las reglas de abajo (que dejan
   respirar botones, filas y tarjetas) el diseño se adapta sin romperse.
   --a11y-mult lo usan más abajo los componentes que tienen su tamaño
   en px fijo, para que crezcan en la misma proporción que el resto. */
html.a11y-texto-125 { font-size: 113%; --a11y-mult: 1.13; }
html.a11y-texto-150 { font-size: 126%; --a11y-mult: 1.26; }
html.a11y-texto-200 { font-size: 142%; --a11y-mult: 1.42; }

html[class*="a11y-texto-"] { text-wrap: pretty; }
html[class*="a11y-texto-"] body {
    overflow-wrap: break-word;
    word-break: normal;
}
/* Deja que cualquier control con texto crezca en alto en vez de
   recortarlo, y que las palabras largas no empujen el ancho. */
html[class*="a11y-texto-"] .btn-mkt-primary,
html[class*="a11y-texto-"] .btn-mkt-secundario,
html[class*="a11y-texto-"] .btn-primary,
html[class*="a11y-texto-"] .btn-secundario,
html[class*="a11y-texto-"] .fv-btn,
html[class*="a11y-texto-"] .app-nav .tab,
html[class*="a11y-texto-"] .tabs .tab,
html[class*="a11y-texto-"] .chip-categoria,
html[class*="a11y-texto-"] .ini-tab-catalogo {
    height: auto;
    min-height: fit-content;
    white-space: normal;
}
/* Filas "etiqueta + control/valor" que comparten una sola línea: con
   letra grande se apilan en vez de aplastarse. */
html[class*="a11y-texto-"] .fila-dato-pago,
html[class*="a11y-texto-"] .campo-perfil,
html[class*="a11y-texto-"] .campo-perfil-item,
html[class*="a11y-texto-"] .barra-confianza-inner,
html[class*="a11y-texto-"] .content-heading h2 {
    flex-wrap: wrap;
}
/* Ningún hijo de flex/grid debe forzar scroll horizontal. */
html[class*="a11y-texto-"] .app-content > *,
html[class*="a11y-texto-"] .card > *,
html[class*="a11y-texto-"] .mercado-main > *,
html[class*="a11y-texto-"] .inicio-resumen-item,
html[class*="a11y-texto-"] .producto-card-mkt { min-width: 0; }
/* Controles que son un ícono dentro de un círculo/cuadrado de tamaño
   fijo — nunca cambian de tamaño con la letra (el ícono no es texto). */
html[class*="a11y-texto-"] .a11y-btn {
    width: 52px !important; height: 52px !important; min-height: 52px !important; flex-shrink: 0 !important;
}
html[class*="a11y-texto-"] .btn-nav-carrito {
    width: 40px !important; height: 40px !important; min-height: 40px !important; flex-shrink: 0 !important;
}

/* Barra inferior fija de celular: es el elemento más ajustado del
   sitio. Su texto crece un poco pero se recorta con "…" antes que
   romper la barra. */
html[class*="a11y-texto-"] .barra-inferior-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* El propio panel de accesibilidad: cada fila se apila para que la
   etiqueta y los controles tengan el ancho completo. */
html[class*="a11y-texto-"] .a11y-fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
html[class*="a11y-texto-"] .a11y-fila span { flex: none; width: 100%; }
html[class*="a11y-texto-"] .a11y-tamano-btns,
html[class*="a11y-texto-"] .a11y-tema-btns { width: 100%; }
html[class*="a11y-texto-"] .a11y-tamano-btns button,
html[class*="a11y-texto-"] .a11y-tema-btns button { flex: 1; }

/* Tarjetas de producto: con letra grande crecen en alto lo que haga
   falta para que nombre, precio y botones sigan visibles. */
html[class*="a11y-texto-"] .producto-card-mkt {
    height: auto !important;
    min-height: 340px;
    overflow: visible !important;
}
/* La descripción de producto YA tiene alto fijo + scroll propio en todos
   los contextos (ver mercado.css/inicio.css). Con letra agrandada solo
   hace falta que su tamaño de fuente (que está en px fijo) crezca en la
   misma proporción que el resto — el "max-height" va en em, así que el
   recuadro sigue mostrando el mismo número de líneas. */
html[class*="a11y-texto-"] .producto-card-descripcion,
html[class*="a11y-texto-"] .grid-productos .producto-card-descripcion,
html[class*="a11y-texto-"] #grid-ofertas .producto-card-descripcion,
html[class*="a11y-texto-"] #grid-novedades .producto-card-descripcion,
html[class*="a11y-texto-"] #grid-mas-vendidos .producto-card-descripcion,
html[class*="a11y-texto-"] #grid-productos-inicio .producto-card-descripcion {
    font-size: calc(11.5px * var(--a11y-mult, 1)) !important;
    max-height: 6.2em !important;   /* un poco más de aire con letra grande */
    overflow-y: auto !important;
}

/* Componentes con el tamaño de fuente en px fijo (no heredan el escalado
   de la raíz): se agrandan en la misma proporción que el resto usando
   --a11y-mult (1 cuando no hay nivel activo). Una sola regla por
   elemento en vez de una por nivel. */
html[class*="a11y-texto-"] .pin-acceso-caja h2 { font-size: calc(20px * var(--a11y-mult, 1)) !important; }
html[class*="a11y-texto-"] .pin-acceso-caja p { font-size: calc(13.5px * var(--a11y-mult, 1)) !important; }
html[class*="a11y-texto-"] .pin-acceso-caja button { font-size: calc(16px * var(--a11y-mult, 1)) !important; }
html[class*="a11y-texto-"] .notif-item-texto strong,
html[class*="a11y-texto-"] .notif-panel-tabs button,
html[class*="a11y-texto-"] #btn-notif-marcar-todas { font-size: calc(13.5px * var(--a11y-mult, 1)) !important; }
html[class*="a11y-texto-"] .notif-item-texto span { font-size: calc(12px * var(--a11y-mult, 1)) !important; }
html[class*="a11y-texto-"] .titulo-movil-compacto strong,
html[class*="a11y-texto-"] .banner-instalar-texto strong { font-size: calc(15px * var(--a11y-mult, 1)) !important; }
html[class*="a11y-texto-"] .titulo-movil-compacto span,
html[class*="a11y-texto-"] .banner-instalar-texto span { font-size: calc(12px * var(--a11y-mult, 1)) !important; }
html[class*="a11y-texto-"] .app-nav .tab { font-size: calc(14px * var(--a11y-mult, 1)) !important; }
html[class*="a11y-texto-"] .impacto-social-titulo,
html[class*="a11y-texto-"] .impacto-social-cifra-fila,
html[class*="a11y-texto-"] .impacto-social-fundacion-info strong { font-size: calc(15px * var(--a11y-mult, 1)) !important; }
html[class*="a11y-texto-"] .impacto-social-mensaje,
html[class*="a11y-texto-"] .impacto-social-sin-costo { font-size: calc(13px * var(--a11y-mult, 1)) !important; }

/* ---- Alto contraste ---- */
html.a11y-alto-contraste {
    --ink: #000000;
    --ink-light: #000000;
    --ink-muted: #2b2b2b;
    --surface: #FFFFFF;
    --surface-2: #FFFFFF;
    --surface-3: #000000;
    --white: #FFFFFF;
    --brand: #003399;
    --brand-mid: #003399;
    --brand-dark: #001a4d;
    --accent: #006666;
    --accent-dim: #FFFFFF;
}
html.a11y-alto-contraste .cuerpo-mercado {
    background: var(--white) !important;
    background-attachment: initial;
}
html.a11y-alto-contraste .cuerpo-mercado::before { display: none; }
/* Antes se quitaba el fondo (background-image) de TODO el sitio con un
   selector universal — eso rompía cualquier elemento pensado para verse
   con texto claro sobre fondo oscuro (el pie de página, botones con
   degradado): el fondo desaparecía pero el texto seguía blanco, y
   quedaba blanco sobre blanco, invisible. Ahora cada tipo de elemento
   tiene su propio reemplazo explícito, seguro para su combinación de
   colores. */
html.a11y-alto-contraste .card,
html.a11y-alto-contraste .producto-card-mkt,
html.a11y-alto-contraste .tienda-card,
html.a11y-alto-contraste .testimonio-card,
html.a11y-alto-contraste .porque-card,
html.a11y-alto-contraste .categoria-hero-item {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 2px solid #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html.a11y-alto-contraste a { text-decoration: underline; }
html.a11y-alto-contraste .btn-mkt-primary,
html.a11y-alto-contraste .btn-mkt-secundario,
html.a11y-alto-contraste .btn-agregar-carrito,
html.a11y-alto-contraste .btn-primary,
html.a11y-alto-contraste .btn-secundario {
    background: #003399 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/* Pie de página: se queda oscuro a propósito (así ya tiene buen
   contraste con el texto blanco) — solo se refuerza el color de los
   enlaces y se quita el degradado sutil, que no hace falta aquí. */
html.a11y-alto-contraste .footer-inicio {
    background: #000d26 !important;
    background-image: none !important;
}
html.a11y-alto-contraste .footer-inicio * { color: #FFFFFF !important; text-shadow: none !important; }
html.a11y-alto-contraste .footer-inicio a:hover { color: #7fd4ff !important; }

/* ---- Subrayar enlaces (ayuda a distinguirlos del texto normal) ---- */
html.a11y-subrayar a:not(.btn-mkt-primary):not(.btn-mkt-secundario):not(.logo-sitio):not(.tienda-card):not(.producto-card-mkt) { text-decoration: underline !important; }

/* ---- Foco visible al navegar con teclado (antes muchos elementos no lo mostraban) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 640px) {
    /* En celular estos 2 círculos quedan fijos sobre CUALQUIER contenido
       que caiga en la esquina inferior izquierda (botón "Filtros", precio
       de una tarjeta, nombre de un testimonio, un campo de formulario,
       etc.) — antes se veían siempre al 100% de opacidad, tapando texto
       y botones todo el tiempo. Ahora, en reposo, quedan más chicos y
       semi-transparentes; al tocarlos (o si el dedo pasa cerca) recuperan
       su tamaño y opacidad completos, así siguen siendo fáciles de
       encontrar y usar sin bloquear la lectura del resto de la página. */
    .a11y-btn {
        left: 8px;
        bottom: 122px;
        width: 34px;
        height: 34px;
        opacity: .55;
        transform: scale(.92);
        transition: opacity .2s ease, transform .2s ease, background .2s ease;
    }
    .a11y-btn svg { width: 18px; height: 18px; }
    .a11y-btn:hover,
    .a11y-btn:focus-visible,
    .a11y-btn:active,
    .a11y-btn[aria-expanded="true"] { opacity: 1; transform: scale(1); }
    .a11y-panel { left: 12px; bottom: 238px; max-height: calc(100vh - 258px); }
}

/* ---- Modo daltonismo (filtros SVG, ver el <svg> oculto en el body) ---- */
html.a11y-daltonismo-protanopia { filter: url(#a11y-filtro-protanopia); }
html.a11y-daltonismo-deuteranopia { filter: url(#a11y-filtro-deuteranopia); }
html.a11y-daltonismo-tritanopia { filter: url(#a11y-filtro-tritanopia); }

.a11y-fila-columna { flex-direction: column; align-items: flex-start; gap: 6px; }
#a11y-select-daltonismo { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--surface-3); font-size: var(--text-sm); background: var(--surface-2); }

/* ============ MODO OSCURO ============ */
/* La primera versión intentaba oscurecer tarjeta por tarjeta, pero el
   sitio tiene demasiados componentes distintos (secciones con fondo
   claro que no estaban en la lista se quedaban con letras claras sobre
   fondo claro = invisibles). Esta versión invierte los colores de TODA
   la página de una sola vez — así ningún componente queda afuera — y
   luego "des-invierte" las fotos, logos e íconos para que se sigan
   viendo con sus colores reales en vez de como un negativo. */
html.a11y-tema-oscuro {
    background: #0b1220;
    filter: invert(1) hue-rotate(180deg);
}
html.a11y-tema-oscuro img,
html.a11y-tema-oscuro video,
html.a11y-tema-oscuro .tienda-portada,
html.a11y-tema-oscuro .a11y-btn,
html.a11y-tema-oscuro .logo-sitio img {
    filter: invert(1) hue-rotate(180deg);
}
/* Las decoraciones de fondo (resplandores, textura de grano) se
   apagan: al invertir dos veces se ven demasiado marcadas y no aportan
   nada en modo oscuro. */
html.a11y-tema-oscuro .cuerpo-mercado::before,
html.a11y-tema-oscuro .hero-mercado-wrap::before,
html.a11y-tema-oscuro .hero-mercado-wrap::after,
html.a11y-tema-oscuro .seccion-destacados-glow {
    display: none;
}

.a11y-tema-btns { display: flex; gap: 4px; flex-shrink: 0; }
.a11y-tema-btns button {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--surface-3);
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
}
.a11y-tema-btns button:hover, .a11y-tema-btns button.a11y-activo { background: var(--brand); color: var(--white); border-color: var(--brand); }

/* ---- Enlace "Saltar al contenido" (WCAG 2.4.1) — compartido, movido
   aquí desde inicio.css para que también funcione en mercado.html y
   tienda.html, que no cargan inicio.css. ---- */
.ini-skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    background: var(--brand);
    color: var(--white);
    padding: 10px 18px;
    border-radius: var(--r-full);
    z-index: 2000;
    font-weight: 700;
    font-size: var(--text-sm);
}
.ini-skip-link:focus {
    left: var(--space-4);
    top: var(--space-4);
}

/* ---- Aviso de bienvenida de accesibilidad (primera visita) ---- */
.a11y-aviso-bienvenida {
    position: fixed;
    left: 20px;
    bottom: 144px;
    z-index: 600;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    display: flex;
    gap: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
}
.a11y-aviso-bienvenida.a11y-visible { opacity: 1; transform: translateY(0); }
.a11y-aviso-bienvenida-icono {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.a11y-aviso-bienvenida-icono svg { width: 20px; height: 20px; }
.a11y-aviso-bienvenida-texto h4 { margin: 0 0 4px; font-size: var(--text-sm); font-family: var(--font-display); }
.a11y-aviso-bienvenida-texto p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.a11y-aviso-bienvenida-cerrar {
    border: none;
    background: var(--surface-2);
    color: var(--ink-muted);
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
}
.a11y-aviso-bienvenida-cerrar:hover { background: var(--surface-3); color: var(--ink); }
@media (max-width: 640px) {
    .a11y-aviso-bienvenida { left: 12px; bottom: 242px; width: calc(100vw - 24px); }
    /* Este botón de cerrar es de los más críticos del sitio en celular:
       es lo primero que ve alguien al entrar, y si falla el toque queda
       "atrapado" con el aviso encima del contenido. A 24x24px era muy
       chico para el dedo — se agranda al mínimo táctil recomendado. */
    .a11y-aviso-bienvenida-cerrar { width: 40px; height: 40px; font-size: 17px; }
}

/* ============ WIDGET FLOTANTE DE WHATSAPP ============ */
.whatsapp-btn {
    position: fixed;
    left: 20px;
    bottom: 82px;
    z-index: 499;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #25D366;
    color: var(--white);
    border: none;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: var(--ease);
}
.whatsapp-btn:hover { transform: translateY(-2px) scale(1.05); background: #1ebe5b; }
.whatsapp-btn svg { width: 28px; height: 28px; position: relative; left: 1px; }
@media (max-width: 640px) {
    .whatsapp-btn {
        left: 8px;
        bottom: 76px;
        width: 34px;
        height: 34px;
        opacity: .55;
        transform: scale(.92);
        transition: opacity .2s ease, transform .2s ease, background .2s ease;
    }
    .whatsapp-btn svg { width: 17px; height: 17px; }
    .whatsapp-btn:hover, .whatsapp-btn:focus-visible, .whatsapp-btn:active { opacity: 1; transform: scale(1); }
}

/* Widget flotante del carrito — aparece al hacer scroll, del lado
   derecho (los otros 2 botones flotantes, accesibilidad y WhatsApp,
   están a la izquierda). Solo en escritorio — ver
   iniciarWidgetCarritoFlotante en farmavitae-carrito.js. */
.widget-carrito-flotante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 498;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 14px;
    border-radius: var(--r-full);
    border: none;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--brand) 55%, transparent), var(--shadow-lg);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, box-shadow .25s ease;
    opacity: 1;
    transform: translateY(0) scale(1);
}
.widget-carrito-flotante.oculto {
    /* No se usa display:none a propósito — así la animación de
       entrada/salida se puede transicionar en vez de aparecer de golpe. */
    display: flex;
    opacity: 0;
    transform: translateY(16px) scale(.9);
    pointer-events: none;
}
.widget-carrito-flotante:hover { box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--brand) 65%, transparent), var(--shadow-lg); transform: translateY(-3px) scale(1.02); }
.widget-carrito-flotante svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.widget-carrito-flotante-texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.widget-carrito-flotante-texto strong { font-family: var(--font); font-size: 13px; font-weight: 800; }
.widget-carrito-flotante-texto span { font-family: var(--font-display); font-size: 14.5px; font-weight: 800; }

/* Resalta el elemento que se está leyendo en voz alta */
.a11y-leyendo { outline: 3px solid var(--accent) !important; outline-offset: 2px; border-radius: 4px; }


/* =========================================================
   BARRA INFERIOR FIJA (celular, todas las páginas públicas)
   ========================================================= */
/* ========================================================================
   BARRA INFERIOR FIJA (solo celular) — mismo patrón que Amazon/Temu/Shein:
   lo esencial siempre al alcance del pulgar, sin tener que subir hasta el
   header cada vez.
   ======================================================================== */
.barra-inferior-movil { display: none; }
@media (max-width: 640px) {
    body { padding-bottom: 62px; } /* deja aire para que la barra no tape el final del contenido */
    .barra-inferior-movil {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 40;
        background: var(--white);
        border-top: 1px solid var(--surface-3);
        box-shadow: 0 -6px 20px rgba(0,0,0,.08);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .barra-inferior-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: var(--ink-muted);
        text-decoration: none;
        font-family: var(--font);
        font-size: 9px; /* con 6 botones (antes 5) hay menos ancho por cada uno */
        font-weight: 600;
        padding: 6px 1px;
        cursor: pointer;
        position: relative;
        white-space: nowrap;
    }
    .barra-inferior-item svg {
        width: 20px; height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .barra-inferior-item.activo { color: var(--brand); }
    .barra-inferior-item:active { opacity: .6; }
    .badge-carrito-movil {
        position: absolute;
        top: 0; right: 18%;
        background: #C9430F;
        color: white;
        font-size: 9px;
        font-weight: 800;
        min-width: 15px;
        height: 15px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
    }
}

/* =========================================================
   MINI-BUSCADOR FLOTANTE (celular) — ventana chica y translúcida que
   reemplaza al panel de filtros completo; se abre desde "Buscar" en la
   barra inferior.
   ========================================================= */
.mini-buscador-fondo {
    display: none;
}
@media (max-width: 640px) {
    .mini-buscador-fondo {
        display: flex;
        position: fixed;
        inset: 0;
        background: rgba(10,30,60,.35);
        z-index: 70;
        align-items: flex-start;
        justify-content: center;
        padding: 18vh 20px 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .mini-buscador-fondo.visible { opacity: 1; pointer-events: auto; }
    .mini-buscador-caja {
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 16px;
        padding: 6px 6px 6px 16px;
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 420px;
        box-shadow: 0 20px 50px rgba(0,0,0,.25);
    }
    .mini-buscador-caja input {
        flex: 1;
        border: none;
        background: none;
        font-size: 16px; /* nunca menos de 16px: por debajo de eso, el celular hace zoom solo al tocar el campo */
        padding: 10px 4px;
        color: var(--ink);
    }
    .mini-buscador-caja input:focus { outline: none; }
    .mini-buscador-caja button {
        flex-shrink: 0;
        background: var(--surface-2);
        border: none;
        border-radius: 50%;
        width: 34px; height: 34px;
        font-size: 15px;
        color: var(--ink-muted);
        cursor: pointer;
    }

    /* Envoltorio: agrupa la caja de búsqueda y el panel de sugerencias
       para que ambos compartan el mismo ancho, uno debajo del otro. */
    .mini-buscador-envoltorio {
        width: 100%;
        max-width: 420px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .mini-buscador-envoltorio .mini-buscador-caja { max-width: none; }

    /* Panel de sugerencias — antes no tenía NINGÚN estilo, así que la
       imagen de cada producto se mostraba a su tamaño real (a veces
       enorme) y rompía todo el diseño de la ventana. */
    .mini-buscador-sugerencias {
        display: none;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 14px;
        max-height: 48vh;
        overflow-y: auto;
        box-shadow: 0 16px 40px rgba(0,0,0,.2);
    }
    .mini-buscador-sugerencias.visible { display: block; }
    .mini-buscador-sugerencia {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        text-decoration: none;
        color: var(--ink);
        border-bottom: 1px solid var(--surface-2);
    }
    .mini-buscador-sugerencia:last-child { border-bottom: none; }
    .mini-buscador-sugerencia img {
        width: 44px;
        height: 44px;
        min-width: 44px;
        object-fit: cover;
        border-radius: 8px;
        background: var(--white);
        display: block;
    }
    .mini-buscador-sugerencia-texto {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .mini-buscador-sugerencia-nombre {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mini-buscador-sugerencia-sub {
        font-size: 11.5px;
        color: var(--ink-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mini-buscador-sugerencia-promo {
        display: inline-block;
        width: fit-content;
        font-size: 9.5px;
        font-weight: 700;
        color: var(--error);
        background: color-mix(in srgb, var(--error) 10%, transparent);
        border-radius: var(--r-full);
        padding: 1px 7px;
        margin-top: 2px;
    }
    .mini-buscador-sugerencia-precios {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .mini-buscador-sugerencia-precio {
        font-size: 13px;
        font-weight: 700;
        color: var(--brand);
    }
    .mini-buscador-sugerencia-precio-antes {
        font-size: 10.5px;
        font-weight: 400;
        color: var(--ink-muted);
        text-decoration: line-through;
    }
    .mini-buscador-sugerencias-vacio {
        padding: 16px;
        font-size: 13px;
        color: var(--ink-muted);
        text-align: center;
        margin: 0;
    }
}

/* El menú de arriba (hamburguesa + enlaces) ya no hace falta en celular
   — la barra inferior cubre la navegación principal (Marketplace,
   Distribución, Fábrica, Carrito, Buscar).
   OJO: se usa !important a propósito — mercado.css e inicio.css tienen
   sus propias reglas para estos mismos elementos (con la misma
   especificidad), y como se cargan DESPUÉS de este archivo, ganaban
   ellas y estas reglas nunca se aplicaban de verdad. */
@media (max-width: 640px) {
    .btn-menu-movil, .nav-sitio-links { display: none !important; }
}

/* En celular, el carrito ya vive en la barra inferior — el ícono de
   arriba (junto al logo) queda redundante, así que se oculta solo ahí.
   Mismo motivo del !important que arriba: mercado.css lo redefine sin
   estar dentro de ningún media query, y como se carga después, ganaba
   siempre. */
@media (max-width: 640px) {
    .btn-nav-carrito { display: none !important; }
}

/* =========================================================
   PULIDO ESTÉTICO GENERAL — CELULAR
   ---------------------------------------------------------------------
   Ajustes finos para que el sitio se sienta más cuidado y profesional
   en pantallas chicas: sombras más suaves (las de escritorio se sienten
   "pesadas" en celular), scroll más suave, y un poco más de aire donde
   hacía falta sin volver a agregar espacio de más.
   ========================================================= */
@media (max-width: 640px) {
    html { scroll-behavior: smooth; }

    /* ---------------------------------------------------------------
       PANELES DE ADMIN Y VENDEDOR — responsive
       --------------------------------------------------------------- */
    /* Formularios de 2/3 columnas (Impacto Social, Fundaciones,
       Configuración, etc.) — antes quedaban fijos en 2 o 3 columnas
       aunque no cupieran, apretando cada campo a un ancho angosto e
       incómodo de usar con el teclado del celular. */
    .grid-responsive-2col, .grid-responsive-3col { grid-template-columns: 1fr !important; }

    /* La barra superior (logo + notificaciones + instalar app + manual
       + cerrar sesión) creció bastante durante esta sesión — sin esto,
       en una pantalla angosta los botones se apretaban o se salían del
       borde. Se envuelve en varias líneas si hace falta, y cada botón
       de texto se acorta a solo su ícono. */
    .topbar { flex-wrap: wrap; gap: 8px; row-gap: 8px; }
    .topbar-acciones { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .btn-manual-descarga, #btn-instalar-pwa-admin, #btn-instalar-pwa-vendedor, #btn-activar-push-admin, #btn-activar-push-vendedor {
        font-size: 0;
        padding: 8px;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .btn-manual-descarga::before { content: '📘'; font-size: 16px; }
    #btn-instalar-pwa-admin::before, #btn-instalar-pwa-vendedor::before { content: '📲'; font-size: 16px; }
    #btn-activar-push-admin::before, #btn-activar-push-vendedor::before { content: '🔔'; font-size: 16px; }

    /* El panel de notificaciones (campanita) — en celular se ancla
       FIJO a la pantalla (no ya relativo al botón que lo abre), para
       que su posición nunca dependa de dónde termine cayendo ese
       botón dentro de la barra superior — si esa barra se envuelve en
       más de una fila (pasa cuando hay varios botones a la vez, como
       el de instalar app), el panel podía terminar desplazado o
       parcialmente fuera de la pantalla, con el ancho de escritorio
       (max-width:90vw calculado sobre una base equivocada) — de ahí
       que el cuadro se viera enorme y los botones "Todas"/"No leídas"
       quedaran fuera de la vista. */
    .notif-panel {
        position: fixed;
        top: 58px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: min(480px, 65vh);
    }

    /* Las tablas de reportes (pagos a vendedores, impacto social, etc.)
       se salen del ancho de pantalla en celular — se les da scroll
       horizontal propio en vez de aplastar las columnas o desbordar
       toda la página.
       "display:block" acá era el bug: convierte la tabla en una caja de
       bloque normal, que SÍ respeta un width:100% en línea aunque el
       contenido no quepa — el navegador aplastaba las columnas en vez
       de darles scroll. Con "display:table" (el que le corresponde a
       una tabla), el layout automático prioriza el contenido y el
       ancho real supera al del contenedor cuando hace falta — eso es
       lo que .tabla-margen-compartido-scroll necesita para envolverla
       y darle scroll de verdad. Bug real encontrado 2026-09-22. */
    .tabla-margen-compartido { display: table; width: auto; overflow-x: auto; white-space: nowrap; }
    .tabla-margen-compartido-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Sombras más discretas — en una pantalla chica, con tarjetas más
       juntas, las sombras grandes de escritorio se ven recargadas. */
    .card { box-shadow: var(--shadow-sm); border-radius: 16px; }
    .producto-card-mkt, .testimonio-card, .tienda-card {
        box-shadow: 0 3px 10px rgba(13,31,53,.06);
    }

    /* Los enlaces "Ver todos" / "Ver más" quedan con más espacio de
       toque — antes eran casi solo el texto, sin margen alrededor. */
    .btn-mkt-link { padding: 6px 2px; }

    /* Botones principales: un poco menos de padding horizontal para
       que quepan bien sin verse apretados junto a otro botón. */
    .btn-mkt-primary, .btn-mkt-secundario {
        padding: 12px var(--space-4);
        font-size: 13.5px;
    }

    /* Las etiquetas pequeñas tipo "eyebrow" (arriba de cada título de
       sección) quedan más discretas — en escritorio funcionan como
       acento, pero en celular competían en tamaño con el título mismo. */
    .ini-seccion-eyebrow, .destacados-eyebrow {
        letter-spacing: .04em;
        font-weight: 700;
    }
}

/* Modal de zoom de imagen — panel de admin, sección Productos. Clic en
   la miniatura de cualquier tarjeta la abre en grande. */
.modal-zoom-admin {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(6,37,68,.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    cursor: zoom-out;
}
.modal-zoom-admin img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--r-md);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.modal-zoom-admin-cerrar {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: none;
    color: var(--white);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-zoom-admin-cerrar:hover { background: rgba(255,255,255,.25); }
.producto-cabecera .miniatura { cursor: zoom-in; }
/* =========================================================
   COMPONENTES BASE — SISTEMA VISUAL NUEVO (--fv-*)
   ---------------------------------------------------------
   Página por página, a medida que cada sección se rediseña,
   usa estas clases en vez de las viejas (.btn-mkt-primary,
   .card, etc.). No se eliminan las viejas: las páginas que
   todavía no migran las siguen necesitando.
   ========================================================= */

/* ---- Botón ---- */
.fv-btn {
    height: var(--fv-tap);
    padding: 0 var(--fv-s-4);
    border-radius: var(--fv-r-md);
    font-family: var(--fv-font);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    transition: var(--ease);
    white-space: nowrap;
}
.fv-btn-primario { background: var(--fv-blue); color: #fff; }
.fv-btn-primario:hover { background: var(--fv-ink); }
.fv-btn-secundario { background: #fff; color: var(--fv-blue); border: 1px solid var(--fv-border); }
.fv-btn-secundario:hover { border-color: var(--fv-blue); }
.fv-btn-terciario { background: none; color: var(--fv-blue); padding: 0 var(--fv-s-2); }
.fv-btn-terciario:hover { text-decoration: underline; }
.fv-btn:disabled { opacity: .5; cursor: default; pointer-events: none; }

/* ---- Chip (filtro / categoría / opción seleccionable) ---- */
.fv-chip {
    height: 34px;
    padding: 0 var(--fv-s-3);
    border-radius: var(--fv-r-pill);
    background: #fff;
    border: 1px solid var(--fv-border);
    color: var(--fv-body);
    font-family: var(--fv-font);
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: var(--ease);
    white-space: nowrap;
}
.fv-chip-activo { background: var(--fv-blue); border-color: var(--fv-blue); color: #fff; }

/* ---- Tab (subrayado, nunca relleno) ---- */
.fv-tab {
    height: var(--fv-tap);
    padding: 0 var(--fv-s-3);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--fv-soft);
    font-family: var(--fv-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.fv-tab-activo { color: var(--fv-blue); border-bottom-color: var(--fv-blue); }

/* ---- Tarjeta ---- */
.fv-card {
    background: #fff;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-r-lg);
    box-shadow: none;
}

/* ---- Badge ---- */
.fv-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--fv-r-sm);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.fv-badge-sale { background: var(--fv-red); color: #fff; }
.fv-badge-pick { background: #6D3BE4; color: #fff; }
.fv-badge-saving { background: #EAF7F0; color: var(--fv-green); }

/* ---- Input ---- */
.fv-input {
    height: 48px;
    padding: 0 var(--fv-s-3);
    border-radius: 13px;
    border: 1px solid var(--fv-border);
    background: #fff;
    font-family: var(--fv-font);
    font-size: 14px;
    color: var(--fv-ink);
    width: 100%;
}
.fv-input::placeholder { color: var(--fv-soft); }
.fv-input:focus { outline: 2px solid var(--fv-blue); outline-offset: 1px; border-color: var(--fv-blue); }

/* ---- Barra superior fija ---- */
.fv-appbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--fv-border);
    box-shadow: var(--shadow-sm);
}

/* ---- Barra de acción inferior fija (CTA fijo con safe-area) ---- */
.fv-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid var(--fv-border);
    box-shadow: 0 -8px 20px -8px rgba(10,30,60,.12);
    padding: var(--fv-s-3) var(--fv-s-4);
    padding-bottom: calc(var(--fv-s-3) + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: var(--fv-s-3);
}

/* ---- Hoja inferior (filtros, etc.) ---- */
.fv-sheet-fondo {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(10,30,60,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.fv-sheet-fondo.fv-sheet-abierta { opacity: 1; pointer-events: auto; }
.fv-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 91;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 40px rgba(8,25,47,.2);
    max-height: 86vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    padding: var(--fv-s-4);
    padding-bottom: calc(var(--fv-s-4) + env(safe-area-inset-bottom));
}
.fv-sheet-fondo.fv-sheet-abierta .fv-sheet { transform: translateY(0); }

/* =========================================================
   ACEPTACIÓN LEGAL v2 (2026-10) — declaración de producto, cláusulas del
   perfil, casilla del registro, ventana de re-aceptación, barra de avance
   de envíos y botones de constancia. Escritorio + móvil.
   ========================================================= */
.declaracion-legal {
    margin-top: var(--space-5);
    padding: 0;
    background: var(--white, #fff);
    border: 1.5px solid var(--ink-subtle);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 22px -16px rgba(6, 37, 68, .45);
}
.declaracion-legal:focus-within { border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(20, 114, 196, .12); }

.declaracion-legal-texto {
    max-height: 300px;
    overflow-y: auto;
    padding: 0 20px 6px;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--ink-subtle);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-light);
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
.declaracion-legal-texto:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: -2px; }
.declaracion-legal-texto .legal-cabecera {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -20px 14px;
    padding: 14px 20px 12px;
    background: linear-gradient(#fff 82%, rgba(255, 255, 255, 0));
    font-size: 14.5px;
    color: var(--ink);
}
.declaracion-legal-texto .legal-cabecera__icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border-radius: 9px; background: var(--accent-dim); font-size: 15px;
}
.declaracion-legal-texto ol { list-style: none; counter-reset: clausula; margin: 0; padding: 0; }
.declaracion-legal-texto ol > li {
    counter-increment: clausula;
    position: relative;
    margin: 0 0 12px;
    padding-left: 36px;
}
.declaracion-legal-texto ol > li::before {
    content: counter(clausula);
    position: absolute; left: 0; top: 1px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-dim); color: var(--brand);
    font-size: 12px; font-weight: 800;
}
.declaracion-legal-texto strong { color: var(--ink); }
.declaracion-legal-texto a { color: var(--brand-mid); text-decoration: underline; }

.declaracion-legal-label {
    padding: 14px 20px;
    background: var(--surface-2);
    gap: 12px;
}
.declaracion-legal-label input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; }
.declaracion-legal-label span { font-size: 13.5px; line-height: 1.55; }
.declaracion-legal-label a { color: var(--brand-mid); text-decoration: underline; }

@media (max-width: 640px) {
    .declaracion-legal { border-radius: 14px; }
    .declaracion-legal-texto { max-height: 46vh; padding: 0 14px 4px; font-size: 13px; }
    .declaracion-legal-texto .legal-cabecera { margin: 0 -14px 12px; padding: 12px 14px 10px; font-size: 14px; }
    .declaracion-legal-texto ol > li { padding-left: 32px; margin-bottom: 11px; }
    .declaracion-legal-label { padding: 12px 14px; }
}

/* Casilla del registro de vendedores */
.auth-terminos {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 14px; padding: 12px 14px;
    background: var(--surface-2); border: 1px solid var(--ink-subtle); border-radius: 12px;
    font-size: 13px; line-height: 1.5; font-weight: 400; cursor: pointer;
}
.auth-terminos input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--brand); }
.auth-terminos a { color: var(--brand-mid); text-decoration: underline; }

/* Ventana obligatoria "Actualizamos nuestras cláusulas" */
.modal-clausulas {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(6, 37, 68, .72);
    backdrop-filter: blur(3px);
}
.modal-clausulas__caja {
    width: 100%; max-width: 700px; max-height: min(92vh, 780px);
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.modal-clausulas__cabecera { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px 14px; }
.modal-clausulas__icono {
    flex: none; width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-dim); font-size: 22px;
}
.modal-clausulas__titulo { margin: 0 0 4px; font-size: 20px; line-height: 1.25; color: var(--ink); }
.modal-clausulas__sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.modal-clausulas__cuerpo { flex: 1; min-height: 120px; overflow-y: auto; padding: 0 24px; overscroll-behavior: contain; }
.modal-clausulas__cuerpo .declaracion-legal-texto { max-height: none; overflow: visible; border: 0; padding: 0 0 4px; }
.modal-clausulas__cuerpo .declaracion-legal-texto .legal-cabecera { display: none; }
.modal-clausulas__pie { padding: 14px 24px 22px; border-top: 1px solid var(--ink-subtle); background: var(--surface); }
.modal-clausulas__check { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; cursor: pointer; font-weight: 400; margin: 0; }
.modal-clausulas__check input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--brand); }
.modal-clausulas__check a { color: var(--brand-mid); text-decoration: underline; }
.modal-clausulas__acciones { display: flex; gap: 10px; margin-top: 14px; align-items: stretch; }
.modal-clausulas__acciones button { min-height: 48px; margin: 0; }
.modal-clausulas__acciones .btn-primary { flex: 1; width: auto; }
.modal-clausulas__acciones .btn-secundario { width: auto; white-space: nowrap; }
@media (max-width: 640px) {
    .modal-clausulas { padding: 0; align-items: flex-end; }
    .modal-clausulas__caja { max-width: none; max-height: 96vh; border-radius: 20px 20px 0 0; }
    .modal-clausulas__cabecera { padding: 18px 16px 10px; }
    .modal-clausulas__titulo { font-size: 18px; }
    .modal-clausulas__cuerpo { padding: 0 16px; }
    .modal-clausulas__pie { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
    .modal-clausulas__acciones { flex-direction: column; }
    .modal-clausulas__acciones .btn-secundario { width: 100%; }
}

/* Barra de avance (envíos del newsletter) */
.progreso-envio__texto { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.progreso-envio__pista { display: block; height: 10px; margin-top: 10px; border-radius: 999px; background: rgba(0, 91, 170, .14); overflow: hidden; }
.progreso-envio__barra { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .3s ease; }

/* Bloque "Enviar un correo de prueba" (Newsletter) */
.bloque-prueba { margin-top: var(--space-5); padding: 16px 18px; background: var(--surface-2); border: 1px dashed var(--ink-subtle); border-radius: 14px; }
.bloque-prueba h3 { margin: 0 0 4px; font-size: 16px; }
.bloque-prueba .form-section-hint { margin: 0 0 12px; }
.bloque-prueba .admin-agregar-correo-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.bloque-prueba .admin-agregar-correo-fila input { flex: 1 1 240px; min-width: 0; }
@media (max-width: 640px) {
    .bloque-prueba { padding: 14px; }
    .bloque-prueba .admin-agregar-correo-fila .btn-secundario { width: 100%; }
}

/* Botones "Constancia PDF" (admin) y su fila */
.producto-declaracion { flex-wrap: wrap; row-gap: 10px; }
.btn-constancia {
    display: inline-flex; align-items: center; gap: 6px;
    width: auto; margin-left: auto; padding: 7px 14px;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    border-radius: 999px;
}
@media (max-width: 640px) {
    .producto-declaracion .btn-constancia { margin-left: 0; }
}