/* ==========================================================================
   COMMUNITY MANAGER — estilos.css  (hoja GLOBAL)
   ==========================================================================
   Aquí vive SOLO lo transversal:
     [1] PALETA       colores y fuentes de la marca (único lugar con hex).
     [2] PUENTE       variables --bs-*: btn, card, modal, badge, form,
                      accordion, nav y progress de Bootstrap salen con la
                      marca sin escribir más CSS.
     [3] BASE         body, títulos, foco, selección.
     [4] TIPOGRAFÍA   .titular  .dato  .antetitulo
     [5] COLOR        utilidades de color que Bootstrap no trae.
     [6] PIEZAS       solo las que usan DOS O MÁS pantallas.
     [7] ANIMACIONES  todos los @keyframes (no se aíslan bien por scope).

   Lo exclusivo de una pantalla vive junto a ella en su CSS aislado:
     Landing.razor.css, Panel.razor.css, Calendario.razor.css,
     Informacion.razor.css, MisNegocios.razor.css, PostModalCliente.razor.css
   Blazor los enlaza solo vía CommunityManager.styles.css (ver App.razor).

   Acomodo, espaciado, columnas y tamaños → clases Bootstrap en el .razor:
   https://getbootstrap.com/docs/5.3/utilities/spacing/
   ========================================================================== */

/* ==========================================================================
   [1] PALETA — cambiar un color aquí lo cambia en todo el sitio.
   ========================================================================== */
:root {
    /* Azul de marca, de claro a oscuro */
    --marca-50: #EEF4FF;
    --marca-100: #DCE9FF;
    --marca-200: #B7D2FF;
    --marca-300: #86B3FF;
    --marca-500: #2166F5;
    --marca-600: #1450D6; /* azul principal: botones, enlaces */
    --marca-700: #103EA8;
    --marca-800: #0F3480;
    /* Texto y neutros, de oscuro a claro */
    --tinta: #14181F; /* títulos */
    --tinta-2: #384152; /* texto normal */
    --tenue: #64748B; /* texto secundario */
    --palido: #94A0B4; /* texto terciario, placeholders */
    --linea: #E3E7EE; /* bordes */
    --linea-suave: #F3F5F8; /* fondos de relleno */
    --lienzo: #F8F9FB; /* fondo de la página */
    --superficie: #FFFFFF; /* fondo de tarjetas */
    /* Estados */
    --exito: #12A56C;
    --exito-suave: #E6F8F0;
    --exito-fuerte: #0B8F5C;
    --aviso: #E8A23A;
    --aviso-suave: #FDF3E3;
    --aviso-fuerte: #B0700A;
    --peligro: #E5484D;
    --peligro-suave: #FDECEC;
    --peligro-fuerte: #C21458;
    --peligro-suave-2: #FBD9E5;
    /* Redes sociales */
    --fb: #1877F2;
    --ig: #EE2A7B;
    --tt: #171417;
    --ig-degradado: linear-gradient(135deg, #5851DB 0%, #C13584 52%, #EE2A7B 100%);
    /* Canales rgb, para rgba() en velos y sombras */
    --tinta-rgb: 20,24,31;
    --blanco-rgb: 255,255,255;
    --lienzo-rgb: 248,249,251;
    /* Forma */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --sombra-sm: 0 1px 2px rgba(20,24,31,.06);
    --sombra-md: 0 8px 24px rgba(20,24,31,.10);
    --sombra-lg: 0 20px 48px rgba(20,24,31,.16);
    --sombra-marca: 0 10px 28px rgba(20,80,214,.28);
    /* Tipografía */
    --fuente-titulos: 'Fraunces', Georgia, serif;
    --fuente-ui: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
    --fuente-datos: 'IBM Plex Mono', ui-monospace, monospace;
    --nav-h: 68px; /* alto de la barra superior (offset del menú fijo) */
}

/* ==========================================================================
   [2] PUENTE A BOOTSTRAP — Bootstrap lee estas variables. Si un componente
   nativo se ve mal, se arregla AQUÍ, no con clases nuevas.
   ========================================================================== */
:root {
    /* Texto y fondo — alimenta body, .text-body-*, headings */
    --bs-body-font-family: var(--fuente-ui);
    --bs-body-font-size: 15px;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--tinta-2);
    --bs-body-bg: var(--lienzo);
    --bs-emphasis-color: var(--tinta); /* .text-body-emphasis  = títulos   */
    --bs-secondary-color: var(--tenue); /* .text-body-secondary = suave     */
    --bs-tertiary-color: var(--palido); /* .text-body-tertiary  = pálido    */
    --bs-tertiary-bg: var(--linea-suave);
    --bs-heading-color: var(--tinta);
    --bs-link-color: var(--marca-600);
    --bs-link-hover-color: var(--marca-700);
    /* Bordes y radios — alimenta .border y .rounded-N */
    --bs-border-color: var(--linea);
    --bs-border-radius-sm: 8px;
    --bs-border-radius: var(--r-sm); /* .rounded   = 10px */
    --bs-border-radius-lg: var(--r-md); /* .rounded-3 = 14px */
    --bs-border-radius-xl: var(--r-lg); /* .rounded-4 = 20px */
    --bs-border-radius-xxl: var(--r-xl); /* .rounded-5 = 28px */
    /* Paleta semántica — alimenta btn-*, .bg-*, .text-*, text-bg-* */
    --bs-primary: var(--marca-600);
    --bs-primary-rgb: 20,80,214;
    --bs-success: var(--exito);
    --bs-success-rgb: 18,165,108;
    --bs-warning: var(--aviso);
    --bs-warning-rgb: 232,162,58;
    --bs-danger: var(--peligro);
    --bs-danger-rgb: 229,72,77;
    --bs-secondary-rgb: 100,116,139;
    --bs-dark-rgb: 20,24,31;
    /* Tonos suaves — alimentan .bg-*-subtle, .text-*-emphasis y
       .border-*-subtle (badges de estado, avisos, celdas resaltadas) */
    --bs-primary-bg-subtle: var(--marca-50);
    --bs-primary-border-subtle: var(--marca-200);
    --bs-primary-text-emphasis: var(--marca-700);
    --bs-success-bg-subtle: var(--exito-suave);
    --bs-success-border-subtle: #A9F0D2;
    --bs-success-text-emphasis: var(--exito-fuerte);
    --bs-warning-bg-subtle: var(--aviso-suave);
    --bs-warning-border-subtle: #F3D9A4;
    --bs-warning-text-emphasis: var(--aviso-fuerte);
    --bs-danger-bg-subtle: var(--peligro-suave);
    --bs-danger-border-subtle: var(--peligro-suave-2);
    --bs-danger-text-emphasis: var(--peligro-fuerte);
    --bs-secondary-bg-subtle: var(--linea-suave);
    --bs-secondary-border-subtle: var(--linea);
    --bs-secondary-text-emphasis: var(--tinta-2);
}

/* Tarjetas (.card): base de paneles, posts, testimonios, precios... */
.card {
    --bs-card-bg: var(--superficie);
    --bs-card-border-color: var(--linea);
    --bs-card-border-radius: var(--r-lg);
    box-shadow: var(--sombra-sm);
}

/* Modales nativos (modalOcasion en Panel, Calendario e Información) */
.modal {
    --bs-modal-bg: var(--superficie);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--r-lg);
    --bs-modal-header-border-color: var(--linea);
    --bs-modal-footer-border-color: var(--linea);
}

/* Offcanvas (menú móvil del Panel) y dropdowns */
.offcanvas, .dropdown-menu {
    --bs-offcanvas-bg: var(--superficie);
    --bs-dropdown-bg: var(--superficie);
    --bs-dropdown-border-color: var(--linea);
    --bs-dropdown-link-hover-bg: var(--marca-50);
    --bs-dropdown-link-hover-color: var(--marca-700);
}

/* Acordeón (FAQ del landing) */
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--linea);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--marca-100);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--marca-700);
}

    .accordion .accordion-button {
        font-weight: 700;
        font-size: .92rem;
        background: transparent;
    }

/* Barra de progreso (avance del registro en Panel e Información) */
.progress {
    --bs-progress-bg: var(--linea-suave);
    --bs-progress-height: 6px;
    --bs-progress-border-radius: 999px;
}

/* Menús de enlaces (lateral de Información, offcanvas del Panel) */
.nav-pills {
    --bs-nav-pills-border-radius: var(--r-sm);
    --bs-nav-pills-link-active-bg: var(--marca-50);
    --bs-nav-pills-link-active-color: var(--marca-700);
    --bs-nav-link-color: var(--tinta-2);
    --bs-nav-link-hover-color: var(--tinta);
    --bs-nav-link-font-size: .875rem;
    --bs-nav-link-font-weight: 600;
}

/* --- Botones ------------------------------------------------------------ */
.btn {
    --bs-btn-border-radius: var(--r-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--marca-100);
}

/* Botón principal con degradado (antes cm-boton--degradado) */
.btn-primary {
    --bs-btn-bg: var(--marca-600);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--marca-700);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--marca-800);
    background-image: linear-gradient(100deg, var(--marca-500), var(--marca-800));
    box-shadow: var(--sombra-marca);
}

    .btn-primary:hover {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

/* Botón fantasma con borde gris (antes cm-boton--fantasma) */
.btn-outline-secondary {
    --bs-btn-color: var(--tinta-2);
    --bs-btn-border-color: var(--linea);
    --bs-btn-bg: var(--superficie);
    --bs-btn-hover-bg: var(--lienzo);
    --bs-btn-hover-border-color: var(--marca-200);
    --bs-btn-hover-color: var(--tinta);
    --bs-btn-active-bg: var(--lienzo);
    --bs-btn-active-color: var(--tinta);
    --bs-btn-active-border-color: var(--marca-200);
}

/* Botón azul suave — "Abrir chat" del Panel (antes cm-boton--suave) */
.btn-suave {
    --bs-btn-bg: var(--marca-50);
    --bs-btn-color: var(--marca-700);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--marca-100);
    --bs-btn-hover-color: var(--marca-700);
}

/* Botón rojo suave — "Solicitar un cambio" del modal de post */
.btn-peligro-suave {
    --bs-btn-bg: var(--peligro-suave);
    --bs-btn-color: var(--peligro-fuerte);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--peligro-suave-2);
    --bs-btn-hover-color: var(--peligro-fuerte);
}

/* Botón azul secundario sólido — "Licencia" del PanelPost */
.btn-cm-secundario {
    --bs-btn-bg: var(--marca-500);
    --bs-btn-color: #fff;
    --bs-btn-border-color: var(--marca-500);
    --bs-btn-hover-bg: var(--marca-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--marca-600);
    --bs-btn-active-bg: var(--marca-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: var(--marca-700);
}

/* --- Formularios (antes cm-entrada / cm-selector / cm-area-texto /
   cm-etiqueta / cm-campo / cm-interruptor) ------------------------------- */
.form-control, .form-select {
    background-color: var(--lienzo);
    border-color: var(--linea);
    border-radius: var(--r-md);
    color: var(--tinta);
}

    .form-control:focus, .form-select:focus {
        background-color: var(--superficie);
        border-color: var(--marca-500);
        box-shadow: 0 0 0 3px var(--marca-100);
    }

    .form-control::placeholder {
        color: var(--palido);
    }

.form-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--tinta-2);
    margin-bottom: .4rem;
}

/* Icono pegado a un campo (dirección en Información) */
.input-group-text {
    background-color: var(--lienzo);
    border-color: var(--linea);
    color: var(--palido);
}

/* Interruptores de amenidades (Información) */
.form-switch .form-check-input {
    width: 2.6em;
    height: 1.45em;
    cursor: pointer;
}

    .form-switch .form-check-input:checked {
        background-color: var(--marca-600);
        border-color: var(--marca-600);
    }

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--marca-100);
}

/* ==========================================================================
   [3] BASE
   ========================================================================== */
body {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -.02em;
}

::selection {
    background: var(--marca-100);
    color: var(--marca-800);
}

:focus-visible {
    outline: 2px solid var(--marca-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   [4] TIPOGRAFÍA DE MARCA
   Para grises usa Bootstrap: text-body-emphasis (título),
   text-body-secondary (suave), text-body-tertiary (pálido).
   ========================================================================== */

/* Títulos con la serif Fraunces (hero, secciones, montos de precios) */
.titular {
    font-family: var(--fuente-titulos);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.08;
}

    .titular em {
        font-style: italic;
        color: var(--marca-600);
    }

    /* Palabra con degradado dentro de un titular (hero del landing) */
    .titular .grad {
        background: linear-gradient(100deg, var(--marca-600), var(--marca-300) 80%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-style: italic;
    }

/* Cifras en mono con números tabulares (métricas, % de avance) */
.dato {
    font-family: var(--fuente-datos);
    font-variant-numeric: tabular-nums;
}

/* Antetítulo con guion, encima de cada título de sección */
.antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--marca-600);
}

    .antetitulo::before {
        content: "";
        width: 16px;
        height: 2px;
        border-radius: 2px;
        background: var(--marca-500);
    }

/* ==========================================================================
   [5] UTILIDADES DE COLOR que Bootstrap no trae
   ========================================================================== */
.texto-marca-fuerte {
    color: var(--marca-700) !important;
}
/* toggles activos, 40% */

.bg-superficie {
    background-color: var(--superficie) !important;
}
/* blanco de tarjeta */

.bg-lienzo {
    background-color: var(--lienzo) !important;
}
/* gris de página */

/* Colores de red social (puntos de leyenda, chips del calendario,
   badge de red en el modal de post) */
.fondo-fb {
    background-color: var(--fb) !important;
}

.fondo-ig {
    background: var(--ig-degradado) !important;
}

.fondo-tt {
    background-color: var(--tt) !important;
}

/* Borde punteado (zonas de soltar, tarjetas de "agregar") */
.borde-guion {
    border: 1.5px dashed var(--linea) !important;
}

/* ==========================================================================
   [6] PIEZAS COMPARTIDAS (2+ pantallas cada una)
   ========================================================================== */

/* --------------------------------------------------------------------------
   NAVBAR (.cm-nav) — la pinta CmNav.razor y sale en TODAS las pantallas.
   Vive aquí, no en un CSS aislado, porque el aislamiento de Blazor no alcanza
   a los elementos que Bootstrap mueve al <body> (dropdown, offcanvas).

   Dos modos, mismo markup: sin negocio muestra los enlaces de la landing y
   los botones de sesión; con negocio y en ≥lg cambia a selector de sucursal
   (.cm-suc) + dropdown de módulos (.cm-dropdown). En móvil la navbar se queda
   mínima: los módulos viven en el cajón de NegocioLayout.

   Pegajosa en vez de fija: así no hace falta compensar el alto en cada
   página. --nav-h queda para quien necesite el offset (anclas, sticky).
   -------------------------------------------------------------------------- */

.cm-nav {
    position: sticky;
    top: 0;
    z-index: 1030; /* bajo el offcanvas (1045) y su fondo (1040) */
    min-height: var(--nav-h);
    background: rgba(var(--blanco-rgb), .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--linea);
}

.cm-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: 1320px; /* mismo ancho que .container-xl */
    min-height: var(--nav-h);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* --- Marca ---------------------------------------------------------------- */

.cm-brand__logo {
    display: block;
    width: auto;
    object-fit: contain;
}

/* Isotipo en móvil (<md) y logotipo completo en ≥md */
.cm-brand__logo--mini {
    height: 34px;
}

.cm-brand__logo--full {
    height: 86px;
}

/* --- Enlaces de navegación ------------------------------------------------ */

.cm-nav__links {
    display: none; /* se enciende en ≥lg */
    align-items: center;
    gap: .25rem;
    margin-left: 1.5rem;
}

.cm-nav__link {
    position: relative;
    padding: .45rem .7rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tenue);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

    /* Hover: solo negritas. Sin fondo ni cambio de color. */
    .cm-nav__link:hover {
        font-weight: 800;
        color: var(--tinta);
    }

    /* Módulo/sección actual: subrayado. La barra se dibuja pegada al borde
       inferior del enlace, no con text-decoration, para que no toque las
       colas de las letras (g, j, p) y quede a la misma altura en todos. */
    .cm-nav__link.is-active {
        color: var(--tinta);
        font-weight: 800;
    }

        .cm-nav__link.is-active::after {
            content: "";
            position: absolute;
            right: .7rem;
            bottom: 0;
            left: .7rem;
            height: 2px;
            border-radius: 2px;
            background: var(--marca-600);
        }

/* Reserva de ancho para el hover en negritas.
   El texto en 800 es más ancho que en 600: sin esto, pasar el cursor por un
   enlace empuja a los de al lado. El ::before pinta la MISMA palabra en 800
   con alto 0 e invisible, así el enlace ya nace con el ancho del estado más
   ancho y nada se mueve. Necesita data-label en el markup (CmNav.razor).
   Solo en la barra horizontal: en el offcanvas los enlaces son de ancho
   completo y no hay nada que empujar. */
.cm-nav__links .cm-nav__link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

    .cm-nav__links .cm-nav__link::before {
        content: attr(data-label);
        height: 0;
        overflow: hidden;
        font-weight: 800;
        visibility: hidden;
        pointer-events: none;
    }

/* Dentro del offcanvas los enlaces son de ancho completo */
.offcanvas-body .cm-nav__link {
    display: block;
    padding: .6rem .75rem;
    font-size: .95rem;
}

    /* En vertical el subrayado se ve mejor ceñido al texto */
    .offcanvas-body .cm-nav__link.is-active::after {
        right: auto;
        width: 2.5rem;
    }

/* --- Zona derecha --------------------------------------------------------- */

.cm-nav__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* --- Botones de la navbar -------------------------------------------------
   Variantes propias en vez de .btn-primary / .btn-outline-secondary: la
   navbar los necesita más compactos y sin el desplazamiento del hover.
   -------------------------------------------------------------------------- */

.btn-cm-ghost {
    --bs-btn-color: var(--tinta-2);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--linea);
    --bs-btn-hover-bg: var(--linea-suave);
    --bs-btn-hover-color: var(--tinta);
    --bs-btn-hover-border-color: var(--marca-200);
    --bs-btn-active-bg: var(--linea-suave);
    --bs-btn-active-color: var(--tinta);
    --bs-btn-active-border-color: var(--marca-200);
    --bs-btn-padding-y: .42rem;
    --bs-btn-padding-x: .85rem;
    --bs-btn-font-size: .88rem;
    align-items: center;
    gap: .4rem;
}

.btn-cm-grad {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--marca-600);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--marca-700);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--marca-800);
    --bs-btn-active-border-color: transparent;
    --bs-btn-padding-y: .42rem;
    --bs-btn-padding-x: .95rem;
    --bs-btn-font-size: .88rem;
    align-items: center;
    gap: .4rem;
    background-image: linear-gradient(100deg, var(--marca-500), var(--marca-800));
    box-shadow: var(--sombra-marca);
}

    .btn-cm-grad:hover {
        filter: brightness(1.06);
    }

/* Botón cuadrado de solo icono (hamburguesa) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
}

/* Los SVG de la navbar no deben encogerse en flex */
.cm-ico {
    flex-shrink: 0;
}

/* --- Selector de sucursal (.cm-suc) ---------------------------------------
   Solo aparece con negocio activo y en ≥lg. Sustituye al selector que vivía
   en la barra lateral de escritorio de NegocioLayout.
   -------------------------------------------------------------------------- */

.cm-suc__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 320px;
    padding: .3rem .7rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    background: var(--superficie);
    color: var(--tinta);
    text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
}

    .cm-suc__btn:hover {
        border-color: var(--marca-200);
        background: var(--marca-50);
    }

.cm-suc__meta {
    display: grid;
    min-width: 0;
}

.cm-suc__eyebrow {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--palido);
    line-height: 1.2;
}

.cm-suc__name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--tinta);
    white-space: normal;
    line-height: 1.25;
}

.cm-suc .dropdown-menu {
    min-width: 230px;
}

/* --- Dropdown sin JS (.cm-dropdown) ----------------------------------------
   Abre/cierra por estado en el componente, no con el JS de Bootstrap. Genérico
   y reutilizable: la capa fija invisible cierra al hacer clic fuera y el menú
   conserva el anclaje nativo de .dropdown-menu (absolute; top:100%; left:0),
   sin Popper.

   Ojo con la capa dentro de una barra con backdrop-filter/filter o un cajón
   con transform: esos ancestros son containing block de los position:fixed y
   confinarían la capa a su propia caja. En la navbar la capa se renderiza como
   hermana del <nav> (ver AdminNav/CmNav); dentro del cajón móvil, confinarla
   al cajón es justo lo que se quiere (ver NegocioLayout).
   -------------------------------------------------------------------------- */

.cm-dropdown {
    position: relative; /* ancla del menú (.dropdown-menu es absolute) */
}

.cm-dropdown__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .46rem .7rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    background: var(--superficie);
    color: var(--tinta);
    text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
}

    .cm-dropdown__btn:hover {
        border-color: var(--marca-200);
        background: var(--marca-50);
    }

/* Modificador: botón con etiqueta; acota el ancho para truncar el nombre. */
.cm-dropdown__btn--mod {
    max-width: 180px;
}

.cm-dropdown__nombre {
    overflow: hidden;
    font-size: .86rem;
    font-weight: 700;
    color: var(--tinta);
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

/* Capa "clic fuera": fija a la pantalla, por debajo de botón y menú */
.cm-dropdown__capa {
    position: fixed;
    inset: 0;
    z-index: 0;
}

    /* El botón y el menú quedan por encima de la capa. El anclaje del menú lo
       conserva .dropdown-menu (absolute; top:100%; left:0); el botón solo
       necesita position:relative para que su z-index tenga efecto. */
    .cm-dropdown > .dropdown-menu {
        top: 100%;
        left: 0;
        margin-top: .25rem;
        z-index: 1;
    }

    .cm-dropdown > .dropdown-menu-end {
        left: auto;
        right: 0;
    }

/* Sin Popper: el menú se ancla al borde inferior del contenedor.
   display:block porque .dropdown-menu de Bootstrap nace oculto (display:none). */
.cm-dropdown__menu {
    display: block;
    min-width: 210px;
}

    .cm-dropdown__menu .dropdown-item.active {
        font-weight: 600;
    }

/* --- Respuesta al ancho ---------------------------------------------------- */

@media (min-width: 992px) {
    .cm-nav__links {
        display: flex;
    }
}

@media (max-width: 575.98px) {
    .cm-nav__inner {
        padding-inline: .75rem;
    }
}

/* Envoltorio <main> de todas las páginas internas */
.pagina {
    min-height: 70vh;
    padding-block: 2rem 4rem;
}

/* Recorta el texto a N líneas con "..." (copys de posts, mensajes) */
.recorte-2, .recorte-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recorte-2 {
    -webkit-line-clamp: 2;
}

.recorte-3 {
    -webkit-line-clamp: 3;
}

/* Caja cuadrada para un icono o emoji (métricas, amenidades, archivos,
   pasos del landing). Color con utilidades: bg-primary-subtle text-primary.
   Otro tamaño → style="width:..;height:.." */
.cuadro-icono {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

/* Punto de color (leyenda de redes, actividad, chips del calendario).
   Color con bg-success / bg-warning / fondo-ig / fondo-fb / fondo-tt */
.punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* La tarjeta "flota" al pasar el cursor (negocios, posts, precios, pasos) */
.elevar {
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}

    .elevar:hover {
        transform: translateY(-4px);
        box-shadow: var(--sombra-lg);
        border-color: var(--marca-200);
    }

/* Etiqueta flotante sobre una foto (giro del negocio, "Reel", red del post) */
.etiqueta-foto {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #fff;
    background: rgba(var(--tinta-rgb), .55);
    backdrop-filter: blur(6px);
    padding: .32rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--blanco-rgb), .22);
}

/* Velo oscuro al pie de una foto, para que el texto encima se lea.
   Cada pieza puede redefinir su gradiente en su CSS aislado. */
.velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--tinta-rgb),0) 45%, rgba(var(--tinta-rgb),.72) 100%);
}

/* Panel con degradado azul suave (aviso "completa tu registro" del Panel,
   progreso de Información, CTA final del landing) */
.panel-degradado {
    background: linear-gradient(120deg, var(--marca-50), var(--linea-suave) 130%);
    border: 1px solid var(--marca-200);
}

/* Tarjeta-botón de ocasión 🦃 🏷️ ✨ 💬 (Panel, Calendario, Información) */
.tarjeta-opcion {
    background: var(--superficie);
    border: 1px solid var(--linea);
    transition: all .18s ease;
}

    .tarjeta-opcion:hover {
        border-color: var(--marca-300);
        box-shadow: var(--sombra-sm);
        transform: translateY(-2px);
    }

/* Tarjeta punteada de "Agregar" (MisNegocios, cuadrículas de Información) */
.tarjeta-agregar {
    background: var(--lienzo);
    cursor: pointer;
    transition: all .2s ease;
}

    .tarjeta-agregar:hover {
        border-color: var(--marca-500) !important;
        background: var(--marca-50);
        color: var(--marca-700);
    }

/* Foto de post 4:5 (tarjetas de la semana en Panel y mockup del landing) */
.medios-post {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--tinta);
    flex: 0 0 auto;
}

    .medios-post img, .medios-post video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s cubic-bezier(.2,.8,.2,1);
    }

.elevar:hover .medios-post img,
.elevar:hover .medios-post video {
    transform: scale(1.04);
}

/* Recuadro blanco con el día ("LUN 18") sobre la foto del post */
.dia-post {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    background: rgba(var(--blanco-rgb), .94);
    border-radius: var(--r-md);
    padding: .35rem .55rem;
    text-align: center;
    line-height: 1.1;
    min-width: 46px;
    box-shadow: var(--sombra-sm);
}

    .dia-post .dow {
        display: block;
        font-size: .6rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--marca-600);
        letter-spacing: .04em;
    }

    .dia-post .num {
        display: block;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--tinta);
    }

/* El modal de post bloquea el scroll del fondo (no se puede aislar) */
body:has(.fondo-modal) {
    overflow: hidden;
}

/* ==========================================================================
   [7] ANIMACIONES — todas aquí porque los @keyframes no se aíslan por scope
   ========================================================================== */

/* Fundido cíclico de las 3 fotos de la tarjeta de negocio (15s por ciclo) */
@keyframes foto-fundido {
    0%, 27% {
        opacity: 1;
    }

    33%, 94% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Punto indicador sincronizado con ese fundido */
@keyframes punto-foto {
    0%, 27% {
        opacity: 1;
    }

    33%, 94% {
        opacity: .35;
    }

    100% {
        opacity: 1;
    }
}

/* Columnas del muro del hero, subiendo y bajando en bucle */
@keyframes muro-sube {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

@keyframes muro-baja {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}

/* Entrada del modal de post */
@keyframes aparecer {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes subir {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}