@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600&family=Manrope:wght@300;400;500;600;700;800&display=swap');

@import url("./business-cards.28a68fef6352.css");

@import url("./catalog-cards.8bf83fe90d99.css");

@import url("./product-cards.db507449185e.css");
@import url("./light-palette.a6d92cb8bf3b.css");

:root {

    /* Tipografía */
    --font-primary: 'Manrope', Arial, sans-serif;

    /* Espaciados (escala consistente) */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Colores principales de marca */
    --color-primary: #0E2A47;
    --color-primary-hover: #2E5D8A;

    /* Acento (dorado) */
    --color-accent: #1EA7E4;
    --color-accent-hover: #1689C4;
    --color-accent-text: #0B73AD;
    --color-accent-light-bg: #E3F3FC;
    --color-accent-light-hover: #BFE6F8;

    /* Fondo general del sitio */
    --color-bg: #F6F9FC;

    /* Colores funcionales (NO tocar al cambiar de paleta) */
    --color-success-bg: #dcfce7;
    --color-success-text: #166534;
    --color-danger-bg: #fee2e2;
    --color-danger-text: #b91c1c;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;

}

body {
    line-height: 1.6;
}

h1, h2, h3 {
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* =========================
   EFECTO "LEVANTARSE" AL HOVER
   Usar en cualquier tarjeta clickeable
   (productos, negocios, categorías, etc.)
========================= */

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* =========================
   ANIMACIÓN DE BOTONES
   Se aplica a todos los botones del sitio,
   sin importar en qué página estén.
========================= */

button,
.button,
.back,
.logout-button,
.logout-inline,
.nav-button,
.mini-button,
.cta-button,
.upgrade-button,
.card-link {
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

button:hover,
.button:hover,
.back:hover,
.logout-button:hover,
.logout-inline:hover,
.nav-button:hover,
.mini-button:hover,
.cta-button:hover,
.upgrade-button:hover,
.card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

button:active,
.button:active,
.back:active,
.logout-button:active,
.logout-inline:active,
.nav-button:active,
.mini-button:active,
.cta-button:active,
.upgrade-button:active,
.card-link:active {
    transform: translateY(0) scale(0.96);
    box-shadow: none;
}

/* =========================
   LOGO CLICKEABLE
========================= */

.logo,
.brand {
    transition: transform 0.2s ease;
}

.logo:hover,
.brand:hover {
    transform: scale(1.06);
}

/* Logotipo horizontal completo (ícono + "MN PLACE" + "MERCADO
   NACIONAL") -- una versión para fondo oscuro y otra para fondo
   claro, se intercambian según html[data-theme]. Mismo tamaño
   grande en los dos casos. Markup: .logo > .logo-mark-dark (img)
   + .logo-mark-light (img). */

.logo-mark-dark,
.logo-mark-light {
    height: 58px;
    width: auto;
    display: block;
}

.logo-mark-light {
    display: none;
}

html[data-theme="light"] .logo-mark-dark {
    display: none;
}

html[data-theme="light"] .logo-mark-light {
    display: block;
}

/* =========================
   BOTÓN "VENDER EN MN PLACE"
========================= */

.nav-button:hover {
    box-shadow: 0 0 18px 3px var(--color-accent);
}

/* =========================
   MODO CLARO / OSCURO
   Botón compartido (sol/luna) que se incluye en el navbar
   de cada página con `{% include 'core/theme_toggle.html' %}`.
   Cada página define sus propias variables --text-*, --surface-*
   y --border-* (oscuro por defecto, igual a como se veía antes) y
   un bloque html[data-theme="light"] con la versión clara -- ver
   businesses/templates/businesses/business_detail.html como
   referencia. Este botón en sí es igual en todas partes.
========================= */

.theme-toggle {
    width: 48px;
    height: 26px;
    padding: 2px;
    border: none;
    border-radius: 999px;
    background: var(--border-outline, rgba(130, 140, 160, 0.35));
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow 0.2s ease;
}

.theme-toggle:hover {
    box-shadow: 0 0 0 3px rgba(30, 167, 228, 0.25);
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent, #1EA7E4);
    color: #0A1628;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="light"] .theme-toggle-thumb {
    transform: translateX(22px);
}

.theme-toggle-thumb .icon-sun,
.theme-toggle-thumb .icon-moon {
    width: 14px;
    height: 14px;
}

.theme-toggle-thumb .icon-moon {
    display: none;
}

html[data-theme="light"] .theme-toggle-thumb .icon-sun {
    display: none;
}

html[data-theme="light"] .theme-toggle-thumb .icon-moon {
    display: block;
}
/* Familia única de MN PLACE, incluidos controles y plantillas de negocios. */
html body, html body * { font-family: var(--font-primary) !important; }
html body { --tpl-font: var(--font-primary); --tpl-display: var(--font-primary); }
h1, h2, h3, h4, h5, h6 { font-synthesis: none; }
button, input, select, textarea { font-size: inherit; }

/* Cuenta y cierre de sesión permanecen juntos en el encabezado. */
.nav-session { display:inline-flex; align-items:center; gap:18px; flex-shrink:0; }
.nav-session .nav-account-link { display:inline-flex; align-items:center; gap:8px; color:var(--text-secondary,#3f4b61); text-decoration:none; font-size:16px; white-space:nowrap; }
.nav-session .nav-account-link:hover { color:var(--color-accent,#1ea7e4); }
.nav-session .nav-account-link:focus-visible { outline:2px solid var(--color-accent,#1ea7e4); outline-offset:4px; border-radius:4px; }
.nav-session .nav-account-link .nav-icon { width:30px; height:30px; object-fit:contain; }
html[data-theme="light"] .logo-mark-light { background:transparent; mix-blend-mode:multiply; }
@media(max-width:600px) { .nav-session { gap:10px; } .nav-session .nav-account-link { font-size:14px; } }

/* Iconos de contacto compartidos: legibles sobre ambos temas. */
.mn-line-icon{display:inline-block;width:22px;height:22px;flex-shrink:0;vertical-align:middle}
img[src$="icono-whatsapp.png"],img[src$="icono-gmail.png"],img[src$="icono-instagram.png"],img[src$="icono-tiktok.png"]{background:#fff;border:1px solid #acbacb;border-radius:7px;padding:3px;box-sizing:content-box;object-fit:contain}