@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root {

    /* Tipografía */
    --font-primary: 'Lato', Arial, Helvetica, 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: #E3A857;
    --color-accent-hover: #C08A3E;
    --color-accent-text: #9C7530;
    --color-accent-light-bg: #F7E3C2;
    --color-accent-light-hover: #EFC684;

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

    /* 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(227, 168, 87, 0.25);
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent, #E3A857);
    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;
}