@import '_content/RISuiteSharedUI/RISuiteSharedUI.jb7gikhwnn.bundle.scp.css';

/* _content/CommunityManager/Components/Controls/AdminNav.razor.rz.scp.css */
/* Píldora contenedora del LanguageSelector (RISuiteSharedUI). Las opciones
   internas ya vienen estiladas por risuite.styles.css con clases rs-lang*. */
.cm-lang[b-3tvr6p4250] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--linea-suave);
}

.franja-admin[b-3tvr6p4250] {
    position: sticky;
    top: var(--nav-h, 68px);
    z-index: 1029;
    background: var(--linea-suave);
    border-bottom: 1px solid var(--linea);
}

.franja-admin__inner[b-3tvr6p4250] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding: .4rem 1rem;
}

.franja-admin__ruta[b-3tvr6p4250] {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .franja-admin__ruta[b-3tvr6p4250]::-webkit-scrollbar {
        display: none;
    }

.franja-admin__crumb[b-3tvr6p4250] {
    padding: .15rem .45rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tenue);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

button.franja-admin__crumb:hover[b-3tvr6p4250] {
    background: rgb(var(--blanco-rgb));
    color: var(--tinta);
}

.franja-admin__crumb:focus-visible[b-3tvr6p4250] {
    outline: 2px solid var(--marca-600);
    outline-offset: 1px;
}

.franja-admin__crumb.es-actual[b-3tvr6p4250] {
    color: var(--tinta);
    cursor: default;
}

.franja-admin__sep[b-3tvr6p4250] {
    font-size: .78rem;
    color: var(--palido);
}

.franja-admin__cliente[b-3tvr6p4250] {
    flex-shrink: 0;
    max-width: 45%;
    font-size: .72rem;
    color: var(--tenue);
}

    .franja-admin__cliente strong[b-3tvr6p4250] {
        font-family: var(--fuente-datos);
        font-weight: 500;
        color: var(--tinta);
    }

@media (max-width: 575.98px) {
    .franja-admin__cliente[b-3tvr6p4250] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .franja-admin__crumb[b-3tvr6p4250] {
        transition: none;
    }
}
/* _content/CommunityManager/Components/Controls/AgentChatPanel.razor.rz.scp.css */
/* ==========================================================================
   AgentChatPanel.razor.css — CSS aislado del chat con el agente.
   Adaptado de Mensajes.razor.css (mismas burbujas); el CSS de Mensajes es
   scoped a esa página, por eso las piezas viven también aquí.
   El log usa column-reverse: el scroll queda anclado abajo sin JS y los
   mensajes se iteran del más nuevo al más viejo.
   El alto es FIJO por defecto (no depende del contenido); en móvil se acota
   al viewport.
   Drag & drop sin JS: al entrar un arrastre se muestra un overlay con un
   InputFile invisible que cubre todo; el drop lo recibe el input nativo.
   ========================================================================== */

.chat-agente[b-str0bu4jvm] {
    height: clamp(420px, 58dvh, 680px);
    overflow: hidden;
}

@media (max-width: 576px) {
    .chat-agente[b-str0bu4jvm] {
        height: min(72dvh, 560px);
    }
}

.chat-agente__cabeza[b-str0bu4jvm], .chat-agente__pie[b-str0bu4jvm] {
    flex: 0 0 auto;
    background: var(--superficie);
}

.chat-agente__log[b-str0bu4jvm] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lienzo);
    flex-direction: column-reverse;
}

.msg[b-str0bu4jvm] {
    display: flex;
    gap: .5rem;
    max-width: 86%;
}

.msg--agente[b-str0bu4jvm] {
    align-self: flex-start;
}

.msg--mio[b-str0bu4jvm] {
    align-self: flex-end;
    flex-direction: row-reverse;
    text-align: right;
}

.msg__burbuja[b-str0bu4jvm] {
    padding: .6rem .8rem;
    border-radius: var(--r-md);
    font-size: .85rem;
    line-height: 1.45;
    text-align: start;
    word-break: break-word;
    white-space: pre-wrap;
}

.msg--agente .msg__burbuja[b-str0bu4jvm] {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-top-left-radius: var(--r-sm);
    color: var(--tinta-2);
}

.msg--mio .msg__burbuja[b-str0bu4jvm] {
    background: linear-gradient(120deg, var(--marca-500), var(--marca-700));
    border-top-right-radius: var(--r-sm);
    color: #fff;
}

/* Puntos de "pensando": spinner-grow de Bootstrap, escalonado sin JS */
.pensando[b-str0bu4jvm] {
    width: .45rem;
    height: .45rem;
    color: var(--tinta-3);
}

.pensando--2[b-str0bu4jvm] {
    animation-delay: .18s;
}

.pensando--3[b-str0bu4jvm] {
    animation-delay: .36s;
}

/* Card de post creado (mensaje kind=post) */
.tarjeta-post[b-str0bu4jvm] {
    width: min(280px, 100%);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-md);
    border-top-left-radius: var(--r-sm);
    overflow: hidden;
    text-align: start;
}

.tarjeta-post__mediaboton[b-str0bu4jvm] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

.tarjeta-post__media[b-str0bu4jvm] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Imágenes dentro de un mensaje (abren el Visor) */
.msg__fotos[b-str0bu4jvm] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.msg--mio .msg__fotos[b-str0bu4jvm] {
    justify-content: flex-end;
}

.msg__foto[b-str0bu4jvm] {
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}

    .msg__foto img[b-str0bu4jvm] {
        width: 96px;
        height: 96px;
        object-fit: cover;
        border-radius: var(--r-sm);
        border: 1px solid var(--linea);
        display: block;
    }

/* Tira de adjuntos pendientes de enviar */
.adjunto[b-str0bu4jvm] {
    position: relative;
    display: inline-block;
}

    .adjunto img[b-str0bu4jvm] {
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: var(--r-sm);
        border: 1px solid var(--linea);
    }

.adjunto__quitar[b-str0bu4jvm] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--tinta-2);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
}

/* Overlay de drag & drop. SIEMPRE montado (oculto por CSS, no por @if):
   el archivo soltado vive en JS amarrado al elemento input; si el @if lo
   desmonta antes de terminar la lectura, el stream truena (_blazorFilesById). */
.soltar[b-str0bu4jvm] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--marca-500);
    border-radius: inherit;
    background: color-mix(in srgb, var(--superficie) 82%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
}

.soltar--activa[b-str0bu4jvm] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.soltar[b-str0bu4jvm]  .soltar__input,
.soltar .soltar__input[b-str0bu4jvm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: copy;
}

.soltar__aviso[b-str0bu4jvm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: var(--marca-700);
    font-size: .85rem;
    font-weight: 600;
    pointer-events: none;
}

.chat-agente__bloqueo[b-str0bu4jvm] {
    background: #fdecea;
    border-bottom: 1px solid #f5c2c0;
    border-left: 4px solid #d93025;
    color: #a50e0e;
    font-size: .78rem;
    font-weight: 600;
}

.punto-vivo[b-str0bu4jvm] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--exito);
    box-shadow: 0 0 0 0 rgba(18, 165, 108, .55);
    animation: latido-b-str0bu4jvm 1.8s infinite;
}

@keyframes latido-b-str0bu4jvm {
    70% {
        box-shadow: 0 0 0 7px rgba(18, 165, 108, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(18, 165, 108, 0);
    }
}
/* _content/CommunityManager/Components/Controls/Albumcarrusel.razor.rz.scp.css */
/* ==========================================================================
   AlbumCarrusel.razor.css — CSS aislado del carrusel de álbumes.
   El acomodo interno de cada tarjeta también vive aquí porque depende del
   ancho fijo de la pista; colores y sombras salen de estilos.css.
   ========================================================================== */
.caja[b-7m4i352bbb] {
    position: relative;
    /* Medidas compartidas entre las tarjetas y los keyframes de deslizado:
       si cambia el ancho de tarjeta o el hueco, la animación se ajusta sola. */
    --ancho-tarjeta: 168px;
    --hueco: .75rem;
}

@media (min-width: 576px) {
    .caja[b-7m4i352bbb] {
        --ancho-tarjeta: 196px;
    }
}
/* Pista: overflow para que en táctil se pueda arrastrar; las flechas no
   hacen scroll, rotan la lista (por eso el carrusel es circular). */
.pista[b-7m4i352bbb] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: .25rem .25rem 1rem;
    margin: -.25rem -.25rem -.5rem;
    scrollbar-width: none;
}

    .pista[b-7m4i352bbb]::-webkit-scrollbar {
        display: none;
    }
/* Cinta: el hijo que se anima. La pista solo recorta (y deja arrastrar);
   si se animara la pista misma se movería el marco completo, no el contenido.
   width max-content para que el rango de arrastre siga midiendo bien. */
.cinta[b-7m4i352bbb] {
    display: flex;
    gap: var(--hueco);
    width: max-content;
}

/* Deslizado de las flechas. El truco del "sin brincos" está repartido con el
   C#: Siguiente anima 0 → -1 tarjeta y LUEGO rota la lista; Anterior rota
   primero y anima -1 tarjeta → 0. El fill "both" congela el destino hasta
   que llega el intercambio. La duración (.28s) debe ser un pelito MENOR que
   EsperaMs en el .razor. */
.cinta--sig[b-7m4i352bbb] {
    animation: desliza-sig-b-7m4i352bbb .28s ease both;
}

.cinta--ant[b-7m4i352bbb] {
    animation: desliza-ant-b-7m4i352bbb .28s ease both;
}

@keyframes desliza-sig-b-7m4i352bbb {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * (var(--ancho-tarjeta) + var(--hueco))));
    }
}

@keyframes desliza-ant-b-7m4i352bbb {
    from {
        transform: translateX(calc(-1 * (var(--ancho-tarjeta) + var(--hueco))));
    }

    to {
        transform: translateX(0);
    }
}

/* Sin animación queda el comportamiento de antes: rotación instantánea. */
@media (prefers-reduced-motion: reduce) {
    .cinta--sig[b-7m4i352bbb],
    .cinta--ant[b-7m4i352bbb] {
        animation: none;
    }
}
/* Tarjeta de álbum. Es un <button>, así que hay que quitarle su ropa. */
.tarjeta[b-7m4i352bbb] {
    flex: 0 0 var(--ancho-tarjeta);
    padding: 0;
    text-align: start;
    overflow: hidden;
    cursor: pointer;
}
/* Portada cuadrada */
.cuadro[b-7m4i352bbb] {
    position: relative;
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--linea-suave);
}

    .cuadro img[b-7m4i352bbb] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.sin-foto[b-7m4i352bbb] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
/* Velo corto: debajo va solo una línea de texto */
.velo[b-7m4i352bbb] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--tinta-rgb),0) 55%, rgba(var(--tinta-rgb),.45) 100%);
}

.pie[b-7m4i352bbb] {
    display: block;
    padding: .5rem .6rem .6rem;
}
/* Encabezado: título + insignia en línea, botón de nuevo a la derecha.
   flex-wrap para que en móvil el botón baje a su propio renglón sin apretar
   el título. */
.encabezado[b-7m4i352bbb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.nuevo[b-7m4i352bbb] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
/* Flechas: circulitos flotando sobre los bordes de la pista */
.flecha[b-7m4i352bbb] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--linea);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--tinta-2);
    box-shadow: var(--sombra-md);
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

    .flecha:hover[b-7m4i352bbb] {
        color: var(--marca-700);
        border-color: var(--marca-200);
        transform: translateY(-50%) scale(1.06);
    }

.flecha--izq[b-7m4i352bbb] {
    left: -10px;
}

.flecha--der[b-7m4i352bbb] {
    right: -10px;
}

/* --- Chip de estado del pipeline ------------------------------------------
   Arriba a la izquierda de la portada: mejorando fotos, generando la
   descripción, sin descripción o error. Tonos subtle de Bootstrap para que
   respeten el tema claro/oscuro. */
.chip-estado[b-7m4i352bbb] {
    position: absolute;
    top: .4rem;
    left: .4rem;
    right: .4rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    width: fit-content;
    max-width: calc(100% - .8rem);
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

    .chip-estado .spinner-border[b-7m4i352bbb] {
        flex-shrink: 0;
        width: .65rem;
        height: .65rem;
        border-width: .12em;
    }

.chip-estado--info[b-7m4i352bbb] {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
}

.chip-estado--warning[b-7m4i352bbb] {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
}

.chip-estado--danger[b-7m4i352bbb] {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
}
/* _content/CommunityManager/Components/Controls/AlbumModal.razor.rz.scp.css */
/* ==========================================================================
   AlbumModal.razor.css — CSS aislado del modal de álbum.
   Colores y piezas globales salen de estilos.css; aquí van el campo de texto
   que crece sin scroll propio y las fotos con su botón de quitar.
   ========================================================================== */

/* --- Descripción sin scroll propio ---------------------------------------
   El textarea nunca hace scroll: el alto lo da el atributo rows, calculado en
   C# a partir del texto. Colapsado, el CSS lo recorta con un difuminado;
   expandido, crece todo lo necesario y quien scrollea es el modal.

   ::deep porque el .form-control lo pinta Bootstrap y el selector tiene que
   alcanzar al <textarea> hijo del contenedor. */
.campo-texto[b-v62h27d3m9] {
    position: relative;
}

    .campo-texto[b-v62h27d3m9]  textarea {
        overflow-y: hidden;
        resize: none;
        transition: height .15s ease;
    }

/* Difuminado del recorte: insinúa que hay más texto abajo. Sin
   pointer-events para no robarle el clic al textarea. */
.difuminado[b-v62h27d3m9] {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 2.1rem;
    pointer-events: none;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    background: linear-gradient(180deg, rgba(var(--blanco-rgb),0), var(--superficie) 92%);
}

.campo-texto.expandido .difuminado[b-v62h27d3m9] {
    display: none;
}

/* --- Fotos ---------------------------------------------------------------
   .foto NO declara position: dentro de un .ratio de Bootstrap, .ratio > * ya
   la pone en absolute y eso basta como ancla del botón; declararlo aquí
   competiría con esa regla (misma especificidad) y el resultado dependería
   del orden de las hojas. */
.foto[b-v62h27d3m9] {
    overflow: hidden;
    background: var(--linea-suave);
}

    .foto img[b-v62h27d3m9], .foto video[b-v62h27d3m9] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* La foto es clicable: abre el visor a pantalla completa */
.abrible[b-v62h27d3m9] {
    cursor: pointer;
}

    .abrible:focus-visible[b-v62h27d3m9] {
        outline: 2px solid var(--marca-500);
        outline-offset: 2px;
    }

/* Triangulito de "esto es video" en la esquina del tile */
.marca-video[b-v62h27d3m9] {
    position: absolute;
    left: .35rem;
    bottom: .35rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    background: rgba(var(--tinta-rgb), .62);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.quitar[b-v62h27d3m9] {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(var(--tinta-rgb), .62);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .18s ease, background .18s ease;
}

    .foto:hover .quitar[b-v62h27d3m9],
    .quitar:focus-visible[b-v62h27d3m9] {
        opacity: 1;
    }

    .quitar:hover[b-v62h27d3m9] {
        background: var(--peligro);
    }

/* En táctil no hay hover: el botón se queda visible */
@media (hover: none) {
    .quitar[b-v62h27d3m9] {
        opacity: 1;
    }
}

/* --- Tile de agregar -----------------------------------------------------
   aspect-ratio directo y no .ratio de Bootstrap: .ratio vuelve absolute a
   todos sus hijos y rompe el centrado del contenido del tile.

   ::deep es OBLIGATORIO en el input: InputFile es un componente hijo y su
   <input> no recibe el atributo de scope, así que un selector normal nunca
   lo alcanzaría y el control nativo quedaría visible. */
.cuadro-agregar[b-v62h27d3m9] {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.agregar-foto[b-v62h27d3m9] {
    position: relative;
}

    .agregar-foto[b-v62h27d3m9]  input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

/* --- Velo de "trabajando" (stylizer en curso) ---------------------------- */
.trabajando[b-v62h27d3m9] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: rgba(var(--blanco-rgb), .72);
    backdrop-filter: blur(2px);
}

/* --- Estado del pipeline ---------------------------------------------------
   Velo de "mejorando" con texto, insignia por foto (IA / Original / error) y
   renglón de estado de la descripción. Los tonos salen de las variables
   subtle de Bootstrap para que respeten el tema claro/oscuro. */
.trabajando[b-v62h27d3m9] {
    align-content: center;
    justify-items: center;
}

.texto-trabajando[b-v62h27d3m9] {
    font-size: .62rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
}

.insignia-foto[b-v62h27d3m9] {
    position: absolute;
    left: .35rem;
    bottom: .35rem;
    z-index: 2;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.4;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.insignia-foto--ia[b-v62h27d3m9] {
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
}

.insignia-foto--original[b-v62h27d3m9] {
    color: var(--bs-secondary-text-emphasis);
    background: var(--bs-secondary-bg-subtle);
}

.insignia-foto--error[b-v62h27d3m9] {
    min-width: 1.2rem;
    text-align: center;
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
}

.estado-desc--info[b-v62h27d3m9] {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
}

.estado-desc--success[b-v62h27d3m9] {
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
}

.estado-desc--warning[b-v62h27d3m9] {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
}

.estado-desc--muted[b-v62h27d3m9] {
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}
/* _content/CommunityManager/Components/Controls/CalendarDayCell.razor.rz.scp.css */
.day-cell[b-ynpsc49218] {
    background-color: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    padding: 6px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .day-cell.today[b-ynpsc49218] {
        background-color: var(--marca-50);
        border-color: var(--marca-300);
    }

    .day-cell.out-of-month[b-ynpsc49218] {
        background-color: var(--linea-suave);
        opacity: 0.6;
    }

.day-header[b-ynpsc49218] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.day-number[b-ynpsc49218] {
    color: var(--tenue);
    font-size: 0.8rem;
    font-weight: 600;
}

.day-cell.today .day-number[b-ynpsc49218] {
    color: var(--marca-700);
}

.today-badge[b-ynpsc49218] {
    font-size: 0.6rem;
    background-color: var(--marca-600);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.day-chips[b-ynpsc49218] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
/* _content/CommunityManager/Components/Controls/CalendarMobileList.razor.rz.scp.css */
.mobile-list-wrapper[b-g22fv9x4wx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-empty[b-g22fv9x4wx] {
    padding: 40px 20px;
    text-align: center;
    background-color: var(--linea-suave);
    border: 1px dashed var(--linea);
    border-radius: var(--r-sm);
}

.mobile-empty__icon[b-g22fv9x4wx] {
    font-size: 2rem;
    color: var(--palido);
}

.mobile-day-block[b-g22fv9x4wx] {
    background-color: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    padding: 10px 12px;
}

    .mobile-day-block.today[b-g22fv9x4wx] {
        background-color: var(--marca-50);
        border-color: var(--marca-300);
    }

.mobile-day-header[b-g22fv9x4wx] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.mobile-day-chips[b-g22fv9x4wx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.today-badge[b-g22fv9x4wx] {
    font-size: 0.6rem;
    background-color: var(--marca-600);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
}
/* _content/CommunityManager/Components/Controls/CalendarMonthGrid.razor.rz.scp.css */
.month-grid-wrapper[b-zf7uz4hqv6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.month-grid-header[b-zf7uz4hqv6] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    background-color: var(--marca-50);
    border: 1px solid var(--marca-200);
    border-radius: var(--r-sm);
    padding: 8px 6px;
}

.month-header-cell[b-zf7uz4hqv6] {
    text-align: center;
    color: var(--marca-700);
    font-size: 0.85rem;
    font-weight: 600;
}

.month-grid-body[b-zf7uz4hqv6] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
/* _content/CommunityManager/Components/Controls/CalendarToolbar.razor.rz.scp.css */
.calendar-toolbar[b-l0a7mglnuh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    background-color: var(--linea-suave);
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    margin-bottom: 12px;
}

.calendar-toolbar-nav[b-l0a7mglnuh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-month-label[b-l0a7mglnuh] {
    color: var(--tinta);
    font-size: 1.05rem;
    font-weight: 600;
    min-width: 140px;
    text-align: center;
    padding: 0 8px;
}

.calendar-toolbar-actions[b-l0a7mglnuh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 576px) {
    .calendar-toolbar[b-l0a7mglnuh] {
        justify-content: center;
    }

    .calendar-month-label[b-l0a7mglnuh] {
        min-width: 110px;
        font-size: 0.95rem;
    }
}
/* _content/CommunityManager/Components/Controls/GeneratePlanAdminModal.razor.rz.scp.css */
.gp-overlay[b-295npbdma5] {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(var(--tinta-rgb), .5);
    overflow-y: auto;
}

.gp-dialog[b-295npbdma5] {
    width: 100%;
    max-width: 620px;
    max-height: 92vh;
    overflow-y: auto;
    border: 0;
}
/* _content/CommunityManager/Components/Controls/InformacionEditor.razor.rz.scp.css */
/* ==========================================================================
   Informacion.razor.css — CSS aislado de "Información del negocio".
   Aquí SOLO lo que no sale con utilidades de Bootstrap ni con las piezas
   globales de estilos.css. El carrusel vive en su propio componente
   (AlbumCarrusel.razor.css).
   ========================================================================== */

/* --- Lateral de secciones -------------------------------------------------
   El menú fijo del layout mide --nav-h; se le suma un respiro. */
.lateral[b-vjfs5dx560] {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
}

/* --- Foto con botón de quitar encima -------------------------------------
   El botón aparece al pasar el cursor; en táctil no hay hover, así que ahí
   se queda siempre visible.

   OJO: aquí NO se declara position. Cuando .foto va dentro de un .ratio de
   Bootstrap, .ratio > * ya la pone en absolute y eso basta como ancla del
   botón; declarar relative aquí competiría con esa regla (misma
   especificidad) y el resultado dependería del orden de las hojas. Fuera de
   un .ratio se usa la utilidad position-relative en el markup. */
.foto[b-vjfs5dx560] {
    overflow: hidden;
    background: var(--linea-suave);
}

    .foto img[b-vjfs5dx560], .foto video[b-vjfs5dx560] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Foto clicable: abre el visor a pantalla completa */
.abrible[b-vjfs5dx560] {
    cursor: pointer;
}

    .abrible:focus-visible[b-vjfs5dx560] {
        outline: 2px solid var(--marca-500);
        outline-offset: 2px;
    }

.quitar[b-vjfs5dx560] {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(var(--tinta-rgb), .62);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .18s ease, background .18s ease;
}

    .foto:hover .quitar[b-vjfs5dx560],
    .quitar:focus-visible[b-vjfs5dx560] {
        opacity: 1;
    }

    .quitar:hover[b-vjfs5dx560] {
        background: var(--peligro);
    }

@media (hover: none) {
    .quitar[b-vjfs5dx560] {
        opacity: 1;
    }
}

/* --- Zona de soltar y tarjeta de agregar ----------------------------------
   El <InputFile> real cubre el recuadro entero, invisible, para que todo sea
   clickeable sin <label for> ni JS.

   ::deep es OBLIGATORIO: InputFile es un componente hijo y su <input> no
   recibe el atributo de scope de esta página, así que un selector normal
   nunca lo alcanzaría (y el control nativo "Elegir archivos" quedaría
   visible). El markup además trae el mismo estilo inline como garantía. */
.zona-soltar[b-vjfs5dx560] {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.75rem 1rem;
    background: var(--lienzo);
    transition: border-color .18s ease, background .18s ease;
}

    .zona-soltar:hover[b-vjfs5dx560], .zona-soltar.arrastrando[b-vjfs5dx560] {
        border-color: var(--marca-500) !important;
        background: var(--marca-50);
    }

    .zona-soltar[b-vjfs5dx560]  input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.agregar-foto[b-vjfs5dx560] {
    position: relative;
}

    .agregar-foto[b-vjfs5dx560]  input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

/* Tile de agregar con la misma huella cuadrada que las fotos de al lado.
   aspect-ratio directo y no .ratio de Bootstrap: .ratio vuelve absolute a
   todos sus hijos y rompía el centrado del contenido del tile. */
.cuadro-agregar[b-vjfs5dx560] {
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* --- Logo ----------------------------------------------------------------
   contain y no cover: un logo recortado deja de ser el logo. */
.logo-vista[b-vjfs5dx560] {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: var(--superficie);
}

/* --- Chip de color extraído por el BrandAgent ---------------------------- */
.muestra-color[b-vjfs5dx560] {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--linea);
    flex: 0 0 auto;
}

/* --- Insignia de trabajo en curso sobre una foto -------------------------
   Cuando el stylizer está procesando esa imagen. */
.trabajando[b-vjfs5dx560] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: rgba(var(--blanco-rgb), .72);
    backdrop-filter: blur(2px);
}
/* _content/CommunityManager/Components/Controls/LicenciaModal.razor.rz.scp.css */
.lic-overlay[b-9hq3c36nxp] {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(var(--tinta-rgb), .5);
    overflow-y: auto;
}

.lic-dialog[b-9hq3c36nxp] {
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    overflow-y: auto;
    border: 0;
}
/* _content/CommunityManager/Components/Controls/LoadingEstado.razor.rz.scp.css */
.loading-estado[b-ondd5iitw2] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-estado__bloque[b-ondd5iitw2] {
    display: grid;
    justify-items: center;
    gap: .75rem;
}

.loading-estado__logo[b-ondd5iitw2] {
    height: 72px;
    width: auto;
    max-width: min(80vw, 320px);
    animation: cm-pulso-b-ondd5iitw2 1.6s ease-in-out infinite;
}

.loading-estado__mensaje[b-ondd5iitw2] {
    color: var(--tenue);
    font-size: .875rem;
}

@keyframes cm-pulso-b-ondd5iitw2 {
    0%, 100% {
        transform: scale(.92);
        filter: drop-shadow(0 0 14px rgba(20, 80, 214, .18));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 30px rgba(20, 80, 214, .45));
    }
}
/* _content/CommunityManager/Components/Controls/MenuImportModal.razor.rz.scp.css */
/* ==========================================================================
   MenuImportModal.razor.css — CSS aislado de la confirmación de importación.
   Casi todo sale de Bootstrap; aquí solo el realce de la fila elegida.
   ========================================================================== */

.fila[b-2kpqubj35q] {
    background: var(--superficie);
    transition: border-color .15s ease, background .15s ease;
}

    /* La fila elegida se distingue de un vistazo: con veinte elementos en la
   lista, el checkbox solo no alcanza para ver qué se va a guardar. */
    .fila.esta-elegida[b-2kpqubj35q] {
        border-color: var(--marca-200) !important;
        background: var(--marca-50);
    }

/* Ayuda a que text-truncate y recorte-2 funcionen dentro de flex */
.min-w-0[b-2kpqubj35q] {
    min-width: 0;
}
/* _content/CommunityManager/Components/Controls/PostChip.razor.rz.scp.css */
.post-chip[b-k5bwl51qad] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 3px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
    transition: transform 0.1s, box-shadow 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .post-chip:hover[b-k5bwl51qad] {
        transform: scale(1.02);
        box-shadow: var(--sombra-sm);
    }

    .post-chip:focus-visible[b-k5bwl51qad] {
        outline: 2px solid var(--marca-600);
        outline-offset: 1px;
    }

.chip-body[b-k5bwl51qad] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.chip-text[b-k5bwl51qad] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-account[b-k5bwl51qad] {
    font-size: 0.6rem;
    font-weight: 400;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-spinner[b-k5bwl51qad] {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 1.5px;
    flex-shrink: 0;
}

.chip-ready[b-k5bwl51qad] {
    background-color: var(--exito-suave);
    border-color: var(--exito);
    color: var(--exito-fuerte);
}

.chip-generating[b-k5bwl51qad] {
    background-color: var(--aviso-suave);
    border-color: var(--aviso);
    color: var(--aviso-fuerte);
}

.chip-failed[b-k5bwl51qad] {
    background-color: var(--peligro-suave);
    border-color: var(--peligro);
    color: var(--peligro-fuerte);
}

.chip-published[b-k5bwl51qad] {
    background-color: var(--marca-50);
    border-color: var(--marca-300);
    color: var(--marca-700);
}

.chip-default[b-k5bwl51qad] {
    background-color: var(--linea-suave);
    border-color: var(--linea);
    color: var(--tinta-2);
}

@media (prefers-reduced-motion: reduce) {
    .post-chip[b-k5bwl51qad] {
        transition: none;
    }
}
/* _content/CommunityManager/Components/Controls/PostDetailModal.razor.rz.scp.css */
.pd-overlay[b-1aac9niuu6] {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(var(--tinta-rgb), .5);
    backdrop-filter: blur(3px);
}

.pd-dialog[b-1aac9niuu6] {
    width: 100%;
    max-width: 760px;
    max-height: 92vh;
    overflow-y: auto;
    border: 0;
}

/* ===========================
   Carrusel
   =========================== */
.pd-carrusel[b-1aac9niuu6] {
    position: relative;
    width: 100%;
    background-color: var(--tinta);
    border-radius: var(--r-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    max-height: 600px;
}

.pd-carrusel__marco[b-1aac9niuu6] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-carrusel__media[b-1aac9niuu6] {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    display: block;
}

.pd-carrusel__flecha[b-1aac9niuu6] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(var(--tinta-rgb), .55);
    border: 1px solid rgba(var(--blanco-rgb), .25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, opacity .15s, transform .15s;
    z-index: 2;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
}

    .pd-carrusel__flecha:hover:not(:disabled)[b-1aac9niuu6] {
        background-color: rgba(var(--tinta-rgb), .85);
        transform: translateY(-50%) scale(1.05);
    }

    .pd-carrusel__flecha:active:not(:disabled)[b-1aac9niuu6] {
        transform: translateY(-50%) scale(.95);
    }

    .pd-carrusel__flecha:disabled[b-1aac9niuu6] {
        opacity: .3;
        cursor: not-allowed;
    }

    .pd-carrusel__flecha:focus-visible[b-1aac9niuu6] {
        outline: 2px solid var(--marca-300);
        outline-offset: 2px;
    }

.pd-carrusel__flecha--izq[b-1aac9niuu6] {
    left: 12px;
}

.pd-carrusel__flecha--der[b-1aac9niuu6] {
    right: 12px;
}

.pd-puntos[b-1aac9niuu6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.pd-punto[b-1aac9niuu6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--linea);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s, transform .15s;
}

    .pd-punto:hover[b-1aac9niuu6] {
        background-color: var(--palido);
    }

    .pd-punto.es-activo[b-1aac9niuu6] {
        background-color: var(--marca-600);
        transform: scale(1.2);
    }

/* ===========================
   Escenas
   =========================== */
.pd-escenas[b-1aac9niuu6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pd-escena[b-1aac9niuu6] {
    background-color: var(--linea-suave);
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    padding: 8px 10px;
}

.pd-escena__meta[b-1aac9niuu6] {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}

.pd-escena__orden[b-1aac9niuu6] {
    font-size: .75rem;
    color: var(--tenue);
    font-weight: 600;
}

.pd-escena__duracion[b-1aac9niuu6] {
    font-size: .75rem;
    color: var(--marca-600);
}

.pd-escena__accion[b-1aac9niuu6] {
    color: var(--tinta-2);
    font-size: .85rem;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .pd-carrusel__flecha[b-1aac9niuu6],
    .pd-punto[b-1aac9niuu6] {
        transition: none;
    }
}
/* _content/CommunityManager/Components/Controls/PostModalCliente.razor.rz.scp.css */
/* ==========================================================================
   PostModalCliente.razor.css — CSS aislado del modal de detalle de post.
   Es un modal propio manejado por Blazor (no usa el JS de Bootstrap), por
   eso el overlay y la caja viven aquí. El bloqueo de scroll del body
   (body:has(.fondo-modal)) y los @keyframes están en estilos.css.

   Tamaño del área de medios:
   - La caja se ajusta al medio, no al revés: width/height auto + max-*.
     Así el 9:16 (Reels/TikTok) no se recorta NI sale con barras negras.
     A cambio, el modal cambia de ancho según la proporción del medio.
   - min-width/min-height: 0 son obligatorios en el medio. Es un grid item,
     y la spec de Grid le aplica un "tamaño mínimo automático" igual a su
     tamaño intrínseco; como min le gana a max, sin esto el max-height se
     ignora y el medio se sale del modal.
   - Nada de object-fit: solo actúa cuando la caja del elemento no coincide
     con el contenido, y aquí coinciden por construcción.

   Notas móviles:
   - dvh con vh de fallback: vh ignora la barra del navegador y el modal
     terminaba más alto que la pantalla visible.
   - El medio NO lleva width: 100% en móvil: con el ancho fijo, al recortar
     el max-height el navegador no recalcula el ancho y la imagen se aplasta.
   - Se desactivan backdrop-filter y la animación con transform: un ancestro
     con filter/transform rompe el fullscreen nativo del video.
   ========================================================================== */

/* Overlay oscuro que cubre la página */
.fondo-modal[b-nk3svjqfje] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(var(--tinta-rgb), .62);
    backdrop-filter: blur(3px);
    animation: aparecer .18s ease both;
    overflow-y: auto;
}

/* La caja del modal: media a la izquierda, detalle a la derecha */
.modal-post[b-nk3svjqfje] {
    width: min(1040px, 100%);
    max-height: min(92vh, 820px);
    max-height: min(92dvh, 820px);
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-lg);
    overflow: hidden;
    animation: subir .22s cubic-bezier(.2,.8,.2,1) both;
}

    .modal-post:focus[b-nk3svjqfje] {
        outline: none;
    }

    /* min-height:0 es obligatorio: un hijo flex nunca se encoge por debajo
       de su contenido, y sin esto el overflow:hidden del modal no aplica. */
    .modal-post .cuerpo[b-nk3svjqfje] {
        min-height: 0;
    }

    /* Mitad izquierda: la foto o el video sobre fondo oscuro. El ancho lo
       pone el medio (width:auto), con un tope para panorámicas muy anchas. */
    .modal-post .medios[b-nk3svjqfje] {
        position: relative;
        flex: 0 0 auto;
        width: auto;
        max-width: 62%;
        min-height: 0;
        background: var(--tinta);
        display: grid;
        place-items: center;
        overflow: hidden;
    }

        .modal-post .medios img[b-nk3svjqfje],
        .modal-post .medios video[b-nk3svjqfje] {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: min(76vh, 700px);
            max-height: min(76dvh, 700px);
            min-width: 0;
            min-height: 0;
        }

/* La foto se abre a pantalla completa en el Visor */
.medio-zoom[b-nk3svjqfje] {
    cursor: zoom-in;
}

/* "Expandir": esquina superior izquierda — lejos del contador (derecha) y
   de la barra de controles del video (abajo). */
.boton-expandir[b-nk3svjqfje] {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--blanco-rgb), .35);
    background: rgba(var(--tinta-rgb), .55);
    backdrop-filter: blur(6px);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease;
}

    .boton-expandir:hover[b-nk3svjqfje] {
        background: var(--marca-600);
    }

/* Flechas ◀ ▶ del carrusel de medios */
.boton-nav[b-nk3svjqfje] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(var(--blanco-rgb), .35);
    background: rgba(var(--tinta-rgb), .55);
    backdrop-filter: blur(6px);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease;
}

    .boton-nav:hover[b-nk3svjqfje] {
        background: var(--marca-600);
    }

.boton-nav-izq[b-nk3svjqfje] {
    left: .5rem;
}

.boton-nav-der[b-nk3svjqfje] {
    right: .5rem;
}

/* Contador N/M: arriba a la derecha para no tapar la barra de controles
   nativa del video (que vive abajo). pointer-events:none => nunca roba taps. */
.contador-medios[b-nk3svjqfje] {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 3;
    pointer-events: none;
}

/* × para quitar un hashtag en modo edición */
.btn-quitar-tag[b-nk3svjqfje] {
    border: 0;
    background: none;
    padding: 0;
    line-height: 0;
    color: inherit;
    opacity: .55;
    cursor: pointer;
}

    .btn-quitar-tag:hover[b-nk3svjqfje] {
        opacity: 1;
    }

/* ==========================================================================
   Móvil / tablet: el modal se apila (media arriba, detalle abajo)
   ========================================================================== */
@media (max-width: 991.98px) {
    .fondo-modal[b-nk3svjqfje] {
        padding: .5rem;
        backdrop-filter: none; /* no rompe el fullscreen nativo del <video> */
    }

    .modal-post[b-nk3svjqfje] {
        width: 100%;
        max-height: 94vh;
        max-height: 94dvh;
        animation: aparecer .18s ease both; /* sin transform en ancestros */
    }

        /* El scroll vive en el cuerpo; el header queda fijo arriba */
        .modal-post .cuerpo[b-nk3svjqfje] {
            flex-direction: column;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Ancho completo; el alto lo pone el medio, con tope */
        .modal-post .medios[b-nk3svjqfje] {
            width: 100%;
            max-width: none;
            flex: 0 0 auto;
            height: auto;
            min-height: 0;
        }

            .modal-post .medios img[b-nk3svjqfje],
            .modal-post .medios video[b-nk3svjqfje] {
                display: block;
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 55vh;
                max-height: 55dvh;
                min-width: 0;
                min-height: 0;
            }

        /* Sin scroll anidado dentro del cuerpo ya scrolleable */
        .modal-post .panel[b-nk3svjqfje] {
            overflow: visible;
        }

    /* Se suben para no caer sobre la barra de controles del video */
    .boton-nav[b-nk3svjqfje] {
        top: calc(50% - 22px);
        width: 34px;
        height: 34px;
    }
}

/* Colores rotativos de los hashtags (tono-1 ... tono-5) */
.tono-1[b-nk3svjqfje] {
    background: var(--aviso-suave);
    color: #C2410C;
}

.tono-2[b-nk3svjqfje] {
    background: #EAF2FE;
    color: #1D4ED8;
}

.tono-3[b-nk3svjqfje] {
    background: var(--exito-suave);
    color: var(--exito-fuerte);
}

.tono-4[b-nk3svjqfje] {
    background: var(--marca-50);
    color: var(--marca-600);
}

.tono-5[b-nk3svjqfje] {
    background: var(--aviso-suave);
    color: var(--aviso-fuerte);
}
/* _content/CommunityManager/Components/Controls/PostsCalendar.razor.rz.scp.css */
.posts-calendar-container[b-cuphc4u65k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.architect-status-alert[b-cuphc4u65k] {
    background-color: var(--marca-50);
    border: 1px solid var(--marca-200);
    color: var(--marca-700);
    border-radius: var(--r-sm);
}

    .architect-status-alert.alert-danger[b-cuphc4u65k] {
        background-color: var(--peligro-suave);
        border-color: var(--peligro);
        color: var(--peligro-fuerte);
    }

.btn-close-inline[b-cuphc4u65k] {
    background: transparent;
    border: none;
    color: var(--tenue);
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 8px;
    font-size: 0.85rem;
    line-height: 1;
}

    .btn-close-inline:hover[b-cuphc4u65k] {
        color: var(--tinta);
    }

    .btn-close-inline:focus-visible[b-cuphc4u65k] {
        outline: 2px solid var(--marca-600);
        outline-offset: 2px;
        border-radius: 4px;
    }
/* _content/CommunityManager/Components/Controls/RegistroNegocioModal.razor.rz.scp.css */

.rn-overlay[b-dhnuj0e4hk] {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(var(--tinta-rgb), .45);
    backdrop-filter: blur(2px);
    animation: aparecer .18s ease;
}

.rn-dialog[b-dhnuj0e4hk] {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--tinta-rgb), .4) transparent;
    animation: subir .22s cubic-bezier(.2,.8,.2,1);
}

.rn-dialog[b-dhnuj0e4hk]::-webkit-scrollbar {
    width: 8px;
}

.rn-dialog[b-dhnuj0e4hk]::-webkit-scrollbar-track {
    background: transparent;
}

.rn-dialog[b-dhnuj0e4hk]::-webkit-scrollbar-thumb {
    background: rgba(var(--tinta-rgb), .4);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* --- Zona de soltar del logo ----------------------------------------------
   El <InputFile> real cubre el recuadro entero, invisible, para que todo sea
   clickeable sin <label for> ni JS.

   ::deep es OBLIGATORIO: InputFile es un componente hijo y su <input> no
   recibe el atributo de scope de este componente, así que un selector normal
   nunca lo alcanzaría. El markup además trae el mismo estilo inline como
   garantía (igual que en Informacion.razor). */
.zona-soltar[b-dhnuj0e4hk] {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--lienzo);
    transition: border-color .18s ease, background .18s ease;
}

    .zona-soltar:hover[b-dhnuj0e4hk], .zona-soltar.arrastrando[b-dhnuj0e4hk] {
        border-color: var(--marca-500) !important;
        background: var(--marca-50);
    }

    .zona-soltar[b-dhnuj0e4hk]  input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
/* _content/CommunityManager/Components/Controls/RegistroNegocioUsuarioModal.razor.rz.scp.css */
.rn-overlay[b-6m67phfe1q] {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(var(--tinta-rgb), .45);
    backdrop-filter: blur(2px);
    animation: aparecer .18s ease;
}

.rn-dialog[b-6m67phfe1q] {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--tinta-rgb), .4) transparent;
    animation: subir .22s cubic-bezier(.2,.8,.2,1);
}

.rn-dialog[b-6m67phfe1q]::-webkit-scrollbar {
    width: 8px;
}

.rn-dialog[b-6m67phfe1q]::-webkit-scrollbar-track {
    background: transparent;
}

.rn-dialog[b-6m67phfe1q]::-webkit-scrollbar-thumb {
    background: rgba(var(--tinta-rgb), .4);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* --- Opciones del radio (nuevo / existente) ------------------------------ */

.rn-modo__opcion[b-6m67phfe1q] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem .9rem;
    border: 1px solid var(--linea);
    border-radius: .75rem;
    background: var(--lienzo);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.rn-modo__opcion:hover[b-6m67phfe1q] {
    border-color: var(--marca-200);
}

.rn-modo__opcion.is-selected[b-6m67phfe1q] {
    border-color: var(--marca-500);
    background: var(--marca-50);
}

.rn-modo__opcion input[type=radio][b-6m67phfe1q] {
    margin-top: .2rem;
    flex-shrink: 0;
}

/* --- Lista de negocios existentes ---------------------------------------- */

.rn-opciones[b-6m67phfe1q] {
    max-height: 46vh;
    overflow-y: auto;
    display: grid;
    gap: .5rem;
    padding: .25rem;
    margin-bottom: .5rem;
}

.rn-opt[b-6m67phfe1q] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .8rem;
    border: 1px solid var(--linea);
    border-radius: .75rem;
    background: var(--lienzo);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.rn-opt:hover[b-6m67phfe1q] {
    border-color: var(--marca-200);
}

.rn-opt.is-selected[b-6m67phfe1q] {
    border-color: var(--marca-500);
    background: var(--marca-50);
}

.rn-opt input[type=radio][b-6m67phfe1q] {
    flex-shrink: 0;
}

.rn-opt__logo[b-6m67phfe1q] {
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--superficie);
}

.rn-opt__nombre[b-6m67phfe1q] {
    min-width: 0;
}

/* --- Zona de soltar del logo ----------------------------------------------
   El <InputFile> real cubre el recuadro entero, invisible, para que todo sea
   clickeable sin <label for> ni JS.

   ::deep es OBLIGATORIO: InputFile es un componente hijo y su <input> no
   recibe el atributo de scope de este componente, así que un selector normal
   nunca lo alcanzaría. El markup además trae el mismo estilo inline como
   garantía (igual que en Informacion.razor). */
.zona-soltar[b-6m67phfe1q] {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--lienzo);
    transition: border-color .18s ease, background .18s ease;
}

    .zona-soltar:hover[b-6m67phfe1q], .zona-soltar.arrastrando[b-6m67phfe1q] {
        border-color: var(--marca-500) !important;
        background: var(--marca-50);
    }

    .zona-soltar[b-6m67phfe1q]  input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
/* _content/CommunityManager/Components/Controls/Toast.razor.rz.scp.css */
/* ==========================================================================
   Toast.razor.css — CSS aislado del toast general.
   Colores y sombras salen de estilos.css; aquí solo posición, forma y la
   transición de salida. La entrada usa el @keyframes global 'subir'.
   ========================================================================== */

/* Móvil primero: abajo, al ancho, respetando el safe-area de los teléfonos
   con notch/gesto. fixed + z-index 1080 para quedar por encima de los
   modales (backdrop de Bootstrap = 1050). */
.aviso[b-wsmvcpj1mb] {
    position: fixed;
    z-index: 1080;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .85rem;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-md);
    box-shadow: var(--sombra-lg);
    font-size: .85rem;
    color: var(--tinta-2);
    cursor: pointer;
    animation: subir .25s cubic-bezier(.2,.8,.2,1);
    transition: opacity .18s ease, transform .18s ease;
}

/* Escritorio: esquina inferior derecha, ancho contenido */
@media (min-width: 576px) {
    .aviso[b-wsmvcpj1mb] {
        left: auto;
        right: 1.5rem;
        bottom: 1.5rem;
        max-width: 380px;
    }
}

/* Salida: la clase la pone el componente y quita el nodo al terminar */
.aviso.saliendo[b-wsmvcpj1mb] {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

/* Señal de color por tipo: barra corta al frente, más legible que teñir
   todo el toast y sin pelearse con el texto. */
.senal[b-wsmvcpj1mb] {
    flex: 0 0 auto;
    width: 4px;
    align-self: stretch;
    border-radius: 999px;
}

.aviso--exito .senal[b-wsmvcpj1mb] {
    background: var(--exito);
}

.aviso--error .senal[b-wsmvcpj1mb] {
    background: var(--peligro);
}

.aviso--info .senal[b-wsmvcpj1mb] {
    background: var(--marca-500);
}

.aviso--error[b-wsmvcpj1mb] {
    color: var(--peligro-fuerte);
}

.texto[b-wsmvcpj1mb] {
    flex: 1 1 auto;
    line-height: 1.35;
}

/* Botón de cierre: área táctil generosa para el pulgar */
.cerrar[b-wsmvcpj1mb] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    margin: -0.25rem -0.35rem -0.25rem 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--palido);
    transition: color .15s ease, background .15s ease;
}

    .cerrar:hover[b-wsmvcpj1mb] {
        color: var(--tinta);
        background: var(--linea-suave);
    }

@media (prefers-reduced-motion: reduce) {
    .aviso[b-wsmvcpj1mb] {
        animation: none;
        transition: none;
    }
}
/* _content/CommunityManager/Components/Controls/Visor.razor.rz.scp.css */
/* ==========================================================================
   Visor.razor.css — CSS aislado del visor a pantalla completa.
   Fondo propio oscuro (aquí manda el medio, no la paleta de la marca); los
   radios y sombras sí salen de estilos.css.
   ========================================================================== */

/* dvh y no vh: en iOS la barra de direcciones hace que 100vh se salga de la
   pantalla y el pie quede debajo del borde visible.
   z-index 1070 → encima del modal de álbum (1055), debajo del Toast (1080). */
.visor[b-na2nkx6atc] {
    position: fixed;
    inset: 0;
    z-index: 1070;
    height: 100dvh;
    background: rgba(12, 12, 14, .94);
    backdrop-filter: blur(4px);
    animation: aparecer .18s ease;
    outline: none; /* el foco es para el teclado, no para dibujar un anillo */
}

/* --- Barra superior ------------------------------------------------------ */
.barra[b-na2nkx6atc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}

.titulo[b-na2nkx6atc] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 700;
}

.contador[b-na2nkx6atc] {
    flex: 0 0 auto;
    font-size: .8rem;
    opacity: .75;
}

/* --- Controles ----------------------------------------------------------- */
.control[b-na2nkx6atc] {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    transition: background .15s ease, transform .15s ease;
}

    .control:hover[b-na2nkx6atc] {
        background: rgba(255, 255, 255, .26);
    }

/* 44px: mínimo cómodo para el pulgar */
.cerrar[b-na2nkx6atc] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
}

.flecha[b-na2nkx6atc] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
}

    .flecha:hover[b-na2nkx6atc] {
        transform: translateY(-50%) scale(1.06);
    }

.flecha--izq[b-na2nkx6atc] {
    left: .75rem;
}

.flecha--der[b-na2nkx6atc] {
    right: .75rem;
}

/* En móvil las flechas estorban sobre la imagen: manda el swipe. Se dejan
   visibles pero más chicas y pegadas al borde. */
@media (max-width: 575.98px) {
    .flecha[b-na2nkx6atc] {
        width: 38px;
        height: 38px;
    }

    .flecha--izq[b-na2nkx6atc] {
        left: .35rem;
    }

    .flecha--der[b-na2nkx6atc] {
        right: .35rem;
    }
}

/* --- Medio ---------------------------------------------------------------
   inset:0 y NO height:100%. Con el visor en grid centrado, el lienzo no se
   estiraba y su altura la daba el contenido; entonces max-height:100% del
   medio se resolvía contra una altura indefinida, o sea contra nada, y la
   imagen salía a tamaño natural desbordando la pantalla.
   Posicionándolo por inset la caja tiene altura definitiva y el porcentaje
   del medio ya restringe de verdad.

   El padding descuenta la barra y las flechas (box-sizing:border-box es
   global), así que el medio nunca queda debajo de los controles. */
.lienzo[b-na2nkx6atc] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    padding-top: calc(4rem + env(safe-area-inset-top, 0px));
}

@media (min-width: 576px) {
    .lienzo[b-na2nkx6atc] {
        padding: 4.5rem 4.5rem 2rem;
    }
}

/* La foto completa, nunca recortada ni desbordada.
   Los max-* en % ya funcionan porque el lienzo tiene altura definitiva; los
   calc() con dvh son el respaldo por si algún navegador resuelve raro el
   porcentaje dentro del flex. min-height:0 evita que el ítem flex se niegue
   a encogerse por debajo de su tamaño intrínseco, que es el otro motivo
   clásico de desbordes verticales. */
.medio[b-na2nkx6atc] {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--r-sm);
    animation: aparecer .2s ease;
}

@supports (height: 100dvh) {
    .medio[b-na2nkx6atc] {
        max-height: min(100%, calc(100dvh - 5.5rem));
    }

    @media (min-width: 576px) {
        .medio[b-na2nkx6atc] {
            max-height: min(100%, calc(100dvh - 6.5rem));
        }
    }
}

/* --- Precarga de vecinos ------------------------------------------------- */
.precarga[b-na2nkx6atc] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .visor[b-na2nkx6atc], .medio[b-na2nkx6atc] {
        animation: none;
    }

    .control[b-na2nkx6atc] {
        transition: none;
    }
}
/* _content/CommunityManager/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-mualkanjle] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-mualkanjle] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/CommunityManager/Components/Layout/NegocioLayout.razor.rz.scp.css */
/* ==========================================================================
   Escritorio (≥ lg): una sola columna a todo el ancho. La navegación entre
   módulos y el selector de sucursal viven en la navbar (CmNav), así que aquí
   ya no hay barra lateral: todo lo de .barra-negocio es exclusivo de móvil.

   Móvil (< lg): franja con hamburguesa + contexto, y la barra como cajón que
   entra por la izquierda.

   El alto de la navbar sale de --nav-h (declarado en estilos.css); el
   fallback de 68px aplica si la hoja global no se cargó.
   ========================================================================== */

.disposicion-negocio[b-3i4n0eree2] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: calc(100vh - var(--nav-h, 68px));
}

/* ---- Contenido ---- */

.contenido-negocio[b-3i4n0eree2] {
    flex-grow: 1;
}

/* ---- Cajón móvil ----
   Sin position ni transform aquí: en escritorio el elemento ni siquiera se
   renderiza (d-lg-none en el markup), y en móvil lo posiciona el bloque de
   abajo. Así no queda geometría de escritorio que anular. */

.barra-negocio[b-3i4n0eree2] {
    width: 250px;
    flex-shrink: 0;
    padding: 1rem;
    background: var(--bs-body-bg);
}

/* ---- Enlaces de módulo ---- */

.enlace-modulo[b-3i4n0eree2] {
    display: block;
    padding: .45rem .85rem;
    border-radius: .6rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

    .enlace-modulo:hover[b-3i4n0eree2] {
        background: var(--bs-secondary-bg);
        color: var(--bs-emphasis-color);
    }

    .enlace-modulo.esta-activo[b-3i4n0eree2] {
        background: var(--bs-primary-bg-subtle);
        color: var(--bs-primary-text-emphasis);
    }

    .enlace-modulo:focus-visible[b-3i4n0eree2] {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

/* ---- Selector de negocio (dropdown del cajón) ---- */

.selector-negocio[b-3i4n0eree2] {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: .5rem .75rem;
    background: var(--bs-body-bg);
}

    .selector-negocio:hover[b-3i4n0eree2] {
        background: var(--bs-secondary-bg);
    }

/* ---- Franja móvil (hamburguesa + contexto) ---- */

.franja-movil[b-3i4n0eree2] {
    position: sticky;
    top: var(--nav-h, 68px); /* justo debajo de la navbar pegajosa */
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .75rem;
    background: var(--bs-body-bg);
}

/* ==========================================================================
   Móvil (< lg): la barra sale del flujo y vive como cajón sobre todo lo demás.
   ========================================================================== */

@media (max-width: 991.98px) {
    .barra-negocio[b-3i4n0eree2] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1045; /* por encima de la navbar (1030) */
        overflow-y: auto;
        box-shadow: var(--bs-box-shadow-lg);
        transform: translateX(-105%);
        transition: transform .25s ease;
    }

        .barra-negocio.abierta[b-3i4n0eree2] {
            transform: translateX(0);
        }

    .fondo-barra[b-3i4n0eree2] {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, .45);
        animation: aparecer-fondo-b-3i4n0eree2 .2s ease;
    }
}

@keyframes aparecer-fondo-b-3i4n0eree2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .barra-negocio[b-3i4n0eree2],
    .enlace-modulo[b-3i4n0eree2] {
        transition: none;
    }

    .fondo-barra[b-3i4n0eree2] {
        animation: none;
    }
}
/* _content/CommunityManager/Components/Pages/Admin/EstilosPost.razor.rz.scp.css */
.fila-estilo[b-rfgeo4adls] {
    cursor: pointer;
}

.cuadro-icono-vacio[b-rfgeo4adls] {
    width: 64px;
    height: 64px;
}

    .cuadro-icono-vacio i[b-rfgeo4adls] {
        font-size: 1.5rem;
    }

.col-guia[b-rfgeo4adls] {
    max-width: 40ch;
}

.texto-limite[b-rfgeo4adls] {
    max-width: 44ch;
}
/* _content/CommunityManager/Components/Pages/Admin/LogsAdmin.razor.rz.scp.css */
/* La fila completa debe permitir seleccionar/copiar el texto: solo el header expande */
.fila-log[b-gqvqy7tlm3] {
    user-select: text;
    -webkit-user-select: text;
}

/* Header de fila: única zona clickable para expandir/colapsar */
.fila-log__header[b-gqvqy7tlm3] {
    cursor: pointer;
    border-radius: var(--r-sm);
    padding: .15rem .25rem;
    margin-left: -.25rem;
}

    .fila-log__header:hover[b-gqvqy7tlm3] {
        background-color: var(--marca-50);
    }

    .fila-log__header:focus-visible[b-gqvqy7tlm3] {
        outline: 2px solid var(--marca-500);
        outline-offset: -2px;
    }

/* Mensaje completo (entrada expandida): bloque mono con scroll para
   JSON multi-línea y stack traces largos */
.log-mensaje[b-gqvqy7tlm3] {
    display: block;
    font-size: .78rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--linea-suave);
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    padding: .75rem .9rem;
    margin-block: 0;
    max-height: 320px;
    overflow: auto;
}
/* _content/CommunityManager/Components/Pages/Admin/ProcesosAdmin.razor.rz.scp.css */
.proc-fila[b-dbsreh1l3a] {
    transition: background-color .15s ease;
}

.proc-fila:hover[b-dbsreh1l3a],
.proc-fila:focus-within[b-dbsreh1l3a] {
    background-color: var(--cm-fondo-suave);
}

.proc-fila__header[b-dbsreh1l3a] {
    border-radius: 0.5rem;
}

.proc-fila__header:hover[b-dbsreh1l3a],
.proc-fila__header:focus-visible[b-dbsreh1l3a] {
    background-color: var(--cm-fondo-suave);
    outline: none;
}

.proc-titulo[b-dbsreh1l3a] {
    font-size: 1.9rem;
}

/* Bootstrap no trae .min-w-0; sin min-width: 0 el <pre> estira la fila y
   .card overflow-hidden corta el texto sin scrollbar horizontal */
.min-w-0[b-dbsreh1l3a] {
    min-width: 0;
}

.proc-json[b-dbsreh1l3a] {
    background-color: var(--cm-fondo);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    line-height: 1.5;
    margin: 0;
    max-height: 320px;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
    width: 100%;
    padding: .75rem 1rem;
    white-space: pre;
    word-break: normal;
}
/* _content/CommunityManager/Components/Pages/Admin/UserBusiness.razor.rz.scp.css */
.tarjeta-negocio .captura[b-f4e7oci5ij] {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--tinta);
    flex: 0 0 auto;
}

    .tarjeta-negocio .captura img[b-f4e7oci5ij] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        animation: foto-fundido 15s linear infinite;
    }

    .tarjeta-negocio .captura .velo[b-f4e7oci5ij] {
        background: linear-gradient(180deg, rgba(var(--tinta-rgb),.34) 0%, rgba(var(--tinta-rgb),0) 42%, rgba(var(--tinta-rgb),.6) 100%);
    }

.tarjeta-negocio .puntos[b-f4e7oci5ij] {
    position: absolute;
    right: .8rem;
    bottom: .7rem;
    z-index: 2;
    display: flex;
    gap: 4px;
}

    .tarjeta-negocio .puntos i[b-f4e7oci5ij] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(var(--blanco-rgb), .55);
        animation: punto-foto 15s linear infinite;
    }

.tarjeta-negocio .logo[b-f4e7oci5ij] {
    width: 60px;
    height: 60px;
    margin: -32px 0 .75rem 1.15rem;
    align-self: flex-start;
    position: relative;
    z-index: 2;
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--linea);
    box-shadow: var(--sombra-md);
    padding: 9px;
    object-fit: contain;
    flex: 0 0 auto;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

.tarjeta-negocio:hover .logo[b-f4e7oci5ij] {
    transform: scale(1.05);
}

.tarjeta-negocio:hover .nombre[b-f4e7oci5ij] {
    color: var(--marca-700) !important;
}

.tarjeta-negocio .ir i[b-f4e7oci5ij] {
    transition: transform .2s ease;
}

.tarjeta-negocio:hover .ir[b-f4e7oci5ij] {
    color: var(--marca-600) !important;
}

    .tarjeta-negocio:hover .ir i[b-f4e7oci5ij] {
        transform: translateX(3px);
    }

@media (prefers-reduced-motion: reduce) {
    .tarjeta-negocio .captura img[b-f4e7oci5ij],
    .tarjeta-negocio .puntos i[b-f4e7oci5ij] {
        animation: none;
    }

    .tarjeta-negocio .logo[b-f4e7oci5ij],
    .tarjeta-negocio .ir i[b-f4e7oci5ij] {
        transition: none;
    }
}
/* _content/CommunityManager/Components/Pages/Landing.razor.rz.scp.css */
/* ==========================================================================
   Landing.razor.css — CSS aislado de la página de inicio.
   Piezas que solo existen aquí: portada animada, mosaico bento, carrusel
   de reels, sección con fondo fotográfico, vitrina, plan destacado y pie.
   (Los @keyframes muro-sube / muro-baja viven en estilos.css.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   PORTADA (hero): muro de fotos en movimiento detrás de la tarjeta de vidrio
   -------------------------------------------------------------------------- */
.portada[b-2jzksi8ozi] {
    position: relative;
    min-height: 660px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--lienzo);
}

/* El muro sobresale del marco para que nunca se vean huecos */
.portada__muro[b-2jzksi8ozi] {
    position: absolute;
    inset: -10% -14%;
    z-index: 0;
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Cada columna sube en bucle; con .baja o .lenta cambia sentido/velocidad */
.portada__col[b-2jzksi8ozi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 0 0;
    min-width: 130px;
    max-width: 420px;
    animation: muro-sube 46s linear infinite;
    will-change: transform;
}

    .portada__col.baja[b-2jzksi8ozi] {
        animation-name: muro-baja;
        animation-duration: 54s;
    }

    .portada__col.lenta[b-2jzksi8ozi] {
        animation-duration: 64s;
    }

    .portada__col img[b-2jzksi8ozi] {
        width: 100%;
        aspect-ratio: 4/5;
        object-fit: cover;
        border-radius: var(--r-md);
        box-shadow: var(--sombra-md);
        display: block;
    }

/* Tinte que aclara el muro para que la tarjeta central se lea */
.portada__tinte[b-2jzksi8ozi] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(var(--lienzo-rgb),.35) 0%, rgba(var(--lienzo-rgb),.12) 30%, rgba(var(--lienzo-rgb),.12) 70%, rgba(var(--lienzo-rgb),.55) 100%), radial-gradient(60% 55% at 50% 46%, rgba(var(--tinta-rgb),.28), transparent 70%);
}

/* Tarjeta de vidrio esmerilado del hero */
.vidrio[b-2jzksi8ozi] {
    background: rgba(var(--blanco-rgb), .82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--blanco-rgb), .6);
    box-shadow: 0 24px 60px rgba(var(--tinta-rgb), .18);
}

/* Avatares solapados de "+120 negocios confían..." */
.tira-avatares img[b-2jzksi8ozi] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -10px;
    box-shadow: var(--sombra-sm);
}

    .tira-avatares img:first-child[b-2jzksi8ozi] {
        margin-left: 0;
    }

@media (max-width: 767.98px) {
    .portada[b-2jzksi8ozi] {
        min-height: 600px;
    }
}

/* --------------------------------------------------------------------------
   MOSAICO bento ("Así se ve tu contenido"): 12 columnas, celdas de 90px.
   Cada pieza pide su tamaño con .ancho-N / .alto-2.
   -------------------------------------------------------------------------- */
.mosaico[b-2jzksi8ozi] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: 10px;
}

    .mosaico > *[b-2jzksi8ozi] {
        position: relative;
        border-radius: var(--r-md);
        overflow: hidden;
    }

    .mosaico img[b-2jzksi8ozi] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .5s cubic-bezier(.2,.8,.2,1);
    }

    .mosaico > *:hover img[b-2jzksi8ozi] {
        transform: scale(1.06);
    }

    /* Velo + etiqueta que se revelan al pasar el cursor */
    .mosaico > *[b-2jzksi8ozi]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(var(--tinta-rgb),0) 50%, rgba(var(--tinta-rgb),.62) 100%);
        opacity: 0;
        transition: opacity .3s ease;
    }

    .mosaico > *:hover[b-2jzksi8ozi]::after {
        opacity: 1;
    }

    .mosaico .etiqueta[b-2jzksi8ozi] {
        position: absolute;
        left: .7rem;
        right: .7rem;
        bottom: .65rem;
        z-index: 2;
        color: #fff;
        font-size: .74rem;
        font-weight: 700;
        opacity: 0;
        transform: translateY(6px);
        transition: all .3s ease;
    }

    .mosaico > *:hover .etiqueta[b-2jzksi8ozi] {
        opacity: 1;
        transform: translateY(0);
    }

.ancho-4[b-2jzksi8ozi] {
    grid-column: span 4;
}

.ancho-5[b-2jzksi8ozi] {
    grid-column: span 5;
}

.ancho-7[b-2jzksi8ozi] {
    grid-column: span 7;
}

.alto-2[b-2jzksi8ozi] {
    grid-row: span 2;
}

@media (max-width: 767.98px) {
    .mosaico[b-2jzksi8ozi] {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 78px;
        gap: 6px;
    }

    .ancho-4[b-2jzksi8ozi] {
        grid-column: span 2;
    }

    .ancho-5[b-2jzksi8ozi], .ancho-7[b-2jzksi8ozi] {
        grid-column: span 6;
    }
}

/* Botón ▶ redondo sobre una foto (mosaico y reels) */
.boton-play[b-2jzksi8ozi] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

    .boton-play span[b-2jzksi8ozi] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(var(--blanco-rgb), .2);
        backdrop-filter: blur(6px);
        border: 1.5px solid rgba(var(--blanco-rgb), .8);
        display: grid;
        place-items: center;
        color: #fff;
        box-shadow: 0 6px 20px rgba(0,0,0,.35);
        transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease;
    }

    .boton-play:hover span[b-2jzksi8ozi] {
        transform: scale(1.08);
        background: var(--marca-600);
        border-color: var(--marca-600);
    }

/* --------------------------------------------------------------------------
   REELS: tarjeta 9:16 y carrusel horizontal con imán de scroll
   -------------------------------------------------------------------------- */
.reel[b-2jzksi8ozi] {
    position: relative;
    aspect-ratio: 9/16;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--tinta);
    box-shadow: var(--sombra-lg);
}

    .reel img[b-2jzksi8ozi] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Velo propio del reel: sombrea arriba y abajo para el texto */
    .reel .velo[b-2jzksi8ozi] {
        background: linear-gradient(180deg, rgba(var(--tinta-rgb),.15) 0%, rgba(var(--tinta-rgb),0) 30%, rgba(var(--tinta-rgb),.15) 60%, rgba(var(--tinta-rgb),.85) 100%);
    }

.fila-reels[b-2jzksi8ozi] {
    scroll-snap-type: x mandatory;
}

    .fila-reels .reel[b-2jzksi8ozi] {
        flex: 0 0 auto;
        width: 210px;
        scroll-snap-align: start;
    }

@media (max-width: 767.98px) {
    .fila-reels .reel[b-2jzksi8ozi] {
        width: 168px;
    }
}

/* --------------------------------------------------------------------------
   "CÓMO FUNCIONA": sección con fondo fotográfico y velo lateral
   -------------------------------------------------------------------------- */
.fondo-foto[b-2jzksi8ozi] {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: center;
}

    .fondo-foto > img[b-2jzksi8ozi] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* El velo entra desde la izquierda para que el texto blanco se lea */
    .fondo-foto .velo[b-2jzksi8ozi] {
        background: linear-gradient(105deg, rgba(var(--tinta-rgb),.94) 0%, rgba(var(--tinta-rgb),.88) 42%, rgba(var(--tinta-rgb),.35) 75%, rgba(var(--tinta-rgb),.15) 100%);
    }

/* Texto azul claro sobre las partes oscuras (eyebrows y números) */
.texto-marca-claro[b-2jzksi8ozi] {
    color: var(--marca-300) !important;
}

@media (max-width: 767.98px) {
    .fondo-foto[b-2jzksi8ozi] {
        min-height: auto;
    }
}

/* --------------------------------------------------------------------------
   PRECIOS: plan destacado y su listón
   -------------------------------------------------------------------------- */
.destacado[b-2jzksi8ozi] {
    border-color: var(--marca-500) !important;
    background: linear-gradient(180deg, var(--marca-50), var(--superficie) 40%) !important;
    box-shadow: var(--sombra-lg) !important;
}

/* Degradado de marca para el listón "Más elegido" */
.fondo-degradado[b-2jzksi8ozi] {
    background: linear-gradient(100deg, var(--marca-500), var(--marca-800)) !important;
}

/* Número gigante decorativo al fondo de las tarjetas de ventajas */
.numero-fondo[b-2jzksi8ozi] {
    position: absolute;
    top: -.9rem;
    right: .4rem;
    font-family: var(--fuente-titulos);
    font-size: 5.5rem;
    line-height: 1;
    color: var(--marca-50);
    pointer-events: none;
    user-select: none;
}

/* --------------------------------------------------------------------------
   VITRINA de cierre: dos fotos grandes con etiqueta al pie
   -------------------------------------------------------------------------- */
.vitrina[b-2jzksi8ozi] {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 12px;
    border-radius: var(--r-xl);
    overflow: hidden;
}

    .vitrina > *[b-2jzksi8ozi] {
        position: relative;
        aspect-ratio: 4/5;
        overflow: hidden;
    }

    .vitrina img[b-2jzksi8ozi] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s cubic-bezier(.2,.8,.2,1);
    }

    .vitrina > *:hover img[b-2jzksi8ozi] {
        transform: scale(1.05);
    }

    .vitrina > *[b-2jzksi8ozi]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(var(--tinta-rgb),0) 45%, rgba(var(--tinta-rgb),.75) 100%);
    }

@media (max-width: 767.98px) {
    .vitrina[b-2jzksi8ozi] {
        grid-template-columns: 1fr;
    }

        .vitrina > *[b-2jzksi8ozi] {
            aspect-ratio: 16/10;
        }
}

/* --------------------------------------------------------------------------
   PIE de página — solo colores; el acomodo son utilidades en el .razor
   -------------------------------------------------------------------------- */
.pie[b-2jzksi8ozi] {
    background: var(--tinta);
    color: #8B95A8;
}

    .pie a[b-2jzksi8ozi] {
        color: #C7CEDB;
        text-decoration: none;
    }

        .pie a:hover[b-2jzksi8ozi] {
            color: #fff;
        }

        /* Enlaces sin href (abren el modal de sesión): sin href el navegador
           no pone la manita por sí solo. */
        .pie a[role="button"][b-2jzksi8ozi] {
            cursor: pointer;
        }

    .pie .titulo-columna[b-2jzksi8ozi] {
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: #6B7690;
    }

    .pie .inferior[b-2jzksi8ozi] {
        border-top: 1px solid rgba(var(--blanco-rgb), .08);
        font-size: .78rem;
        color: #6B7690;
    }

/* Logo completo de la marca en el pie */
.marca-pie[b-2jzksi8ozi] {
    display: block;
    height: 48px;
    width: auto;
    object-fit: contain;
}
/* _content/CommunityManager/Components/Pages/MisNegocios.razor.rz.scp.css */
/* ==========================================================================
   MisNegocios.razor.css — CSS aislado de esta página.
   Solo la tarjeta de negocio: fotos en fundido, puntos, logo flotante y
   los detalles que reaccionan al hover. Todo lo demás son clases de
   Bootstrap en el .razor y piezas globales de estilos.css.
   (Los @keyframes foto-fundido y punto-foto viven en estilos.css.)
   ========================================================================== */

/* Marco de la foto: 16:10 sobre fondo oscuro */
.tarjeta-negocio .captura[b-uycsrinjsx] {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--tinta);
    flex: 0 0 auto;
}

    /* Las 3 fotos apiladas; el delay de cada una viene por style desde C# */
    .tarjeta-negocio .captura img[b-uycsrinjsx] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        animation: foto-fundido 15s linear infinite;
    }

    /* Velo doble: sombrea arriba (etiqueta de giro) y abajo (puntos) */
    .tarjeta-negocio .captura .velo[b-uycsrinjsx] {
        background: linear-gradient(180deg, rgba(var(--tinta-rgb),.34) 0%, rgba(var(--tinta-rgb),0) 42%, rgba(var(--tinta-rgb),.6) 100%);
    }

/* Puntos indicadores de la foto activa, esquina inferior derecha */
.tarjeta-negocio .puntos[b-uycsrinjsx] {
    position: absolute;
    right: .8rem;
    bottom: .7rem;
    z-index: 2;
    display: flex;
    gap: 4px;
}

    .tarjeta-negocio .puntos i[b-uycsrinjsx] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(var(--blanco-rgb), .55);
        animation: punto-foto 15s linear infinite;
    }

/* Logo del negocio, flotando a caballo entre la foto y el cuerpo */
.tarjeta-negocio .logo[b-uycsrinjsx] {
    width: 60px;
    height: 60px;
    margin: -32px 0 .75rem 1.15rem;
    align-self: flex-start;
    position: relative;
    z-index: 2;
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--linea);
    box-shadow: var(--sombra-md);
    padding: 9px;
    object-fit: contain;
    flex: 0 0 auto;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

/* Reacciones al pasar el cursor por la tarjeta */
.tarjeta-negocio:hover .logo[b-uycsrinjsx] {
    transform: scale(1.05);
}

.tarjeta-negocio:hover .nombre[b-uycsrinjsx] {
    color: var(--marca-700) !important;
}

.tarjeta-negocio .ir svg[b-uycsrinjsx] {
    transition: transform .2s ease;
}

.tarjeta-negocio:hover .ir[b-uycsrinjsx] {
    color: var(--marca-600) !important;
}

    .tarjeta-negocio:hover .ir svg[b-uycsrinjsx] {
        transform: translateX(3px);
    }
/* _content/CommunityManager/Components/Pages/Negocio/Calendario.razor.rz.scp.css */
/* ==========================================================================
   Cuadrícula del mes.

   Grid a mano y no Bootstrap: no hay forma de tener 7 columnas exactamente
   iguales con celdas de alto fijo sin pelearse con los gutters.

   El calendario cambia de forma según el ancho, no solo de tamaño:

     · Móvil    — la celda solo lleva el número y hasta 3 puntos de color.
                  Una columna mide ~45px: el título de la publicación no
                  cabe ahí de ninguna manera, así que se lee en la agenda
                  que va debajo de la cuadrícula.
     · ≥ 768px  — la celda crece a 104px de alto y los chips con título
                  vuelven adentro, que es la vista de siempre.

   Los puntos (.punto) y sus colores (.fondo-ig / .fondo-fb / .fondo-tt)
   viven en wwwroot/css/estilos.css: aquí solo se les ajusta el tamaño.
   ========================================================================== */

.calendario[b-9th3ba38t1] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.encabezado-dia[b-9th3ba38t1] {
    font-size: .62rem;
    letter-spacing: .04em;
    padding-bottom: .25rem;
}

/* ---------- Celda ---------- */

.celda[b-9th3ba38t1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 44px; /* objetivo táctil mínimo */
    padding: 4px 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    background: var(--bs-body-bg);
    overflow: hidden;
    cursor: pointer;
}

    .celda.esta-vacia[b-9th3ba38t1] {
        min-height: 0;
        border-color: transparent;
        background: transparent;
        cursor: default;
    }

.numero[b-9th3ba38t1] {
    line-height: 1;
    color: var(--bs-secondary-color);
}

.celda.tiene-posts .numero[b-9th3ba38t1] {
    color: var(--bs-body-color);
}

.celda.es-hoy[b-9th3ba38t1] {
    border-color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

    .celda.es-hoy .numero[b-9th3ba38t1] {
        color: var(--bs-primary);
    }

/* Solo se nota en móvil: en escritorio la celda no se selecciona. */
.celda.seleccionada[b-9th3ba38t1] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

/* ---------- Puntos (móvil) ---------- */

.puntos[b-9th3ba38t1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}

    .puntos .punto[b-9th3ba38t1] {
        width: 5px;
        height: 5px;
    }

/* ---------- Chips con título (escritorio) ---------- */

.eventos[b-9th3ba38t1] {
    display: none;
}

.evento[b-9th3ba38t1] {
    width: 100%;
    font-size: .68rem;
    line-height: 1.6;
    color: var(--bs-body-color);
    text-decoration: none;
    background: var(--bs-tertiary-bg);
}

    .evento:hover[b-9th3ba38t1],
    .evento:focus-visible[b-9th3ba38t1] {
        background: var(--bs-secondary-bg);
        color: var(--bs-body-color);
    }

/* ---------- Agenda del día (móvil) ---------- */

.agenda-item[b-9th3ba38t1] {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
}

    .agenda-item:hover[b-9th3ba38t1],
    .agenda-item:focus-visible[b-9th3ba38t1] {
        background: var(--bs-tertiary-bg);
    }

    .agenda-item .punto[b-9th3ba38t1] {
        width: 8px;
        height: 8px;
    }

/* ==========================================================================
   Escritorio: vuelve la cuadrícula grande con los chips adentro.
   ========================================================================== */

@media (min-width: 768px) {

    .calendario[b-9th3ba38t1] {
        gap: 4px;
    }

    .encabezado-dia[b-9th3ba38t1] {
        font-size: .68rem;
        letter-spacing: .06em;
    }

    .celda[b-9th3ba38t1] {
        align-items: stretch;
        gap: 2px;
        min-height: 104px;
        padding: 6px;
        cursor: default;
    }

    .numero[b-9th3ba38t1] {
        align-self: flex-start;
    }

    .celda.seleccionada[b-9th3ba38t1] {
        background: var(--bs-body-bg);
        border-color: var(--bs-border-color);
    }

    .puntos[b-9th3ba38t1] {
        display: none;
    }

    .eventos[b-9th3ba38t1] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
        overflow: hidden;
    }
}
/* _content/CommunityManager/Components/Pages/Negocio/Informacion.razor.rz.scp.css */
/* ==========================================================================
   Informacion.razor.css — CSS aislado de "Información del negocio".
   Aquí SOLO lo que no sale con utilidades de Bootstrap ni con las piezas
   globales de estilos.css. El carrusel vive en su propio componente
   (AlbumCarrusel.razor.css).
   ========================================================================== */

/* --- Lateral de secciones -------------------------------------------------
   El menú fijo del layout mide --nav-h; se le suma un respiro. */
.lateral[b-0n9fx7gg7s] {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
}

/* --- Foto con botón de quitar encima -------------------------------------
   El botón aparece al pasar el cursor; en táctil no hay hover, así que ahí
   se queda siempre visible.

   OJO: aquí NO se declara position. Cuando .foto va dentro de un .ratio de
   Bootstrap, .ratio > * ya la pone en absolute y eso basta como ancla del
   botón; declarar relative aquí competiría con esa regla (misma
   especificidad) y el resultado dependería del orden de las hojas. Fuera de
   un .ratio se usa la utilidad position-relative en el markup. */
.foto[b-0n9fx7gg7s] {
    overflow: hidden;
    background: var(--linea-suave);
}

    .foto img[b-0n9fx7gg7s], .foto video[b-0n9fx7gg7s] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Foto clicable: abre el visor a pantalla completa */
.abrible[b-0n9fx7gg7s] {
    cursor: pointer;
}

    .abrible:focus-visible[b-0n9fx7gg7s] {
        outline: 2px solid var(--marca-500);
        outline-offset: 2px;
    }

.quitar[b-0n9fx7gg7s] {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(var(--tinta-rgb), .62);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .18s ease, background .18s ease;
}

    .foto:hover .quitar[b-0n9fx7gg7s],
    .quitar:focus-visible[b-0n9fx7gg7s] {
        opacity: 1;
    }

    .quitar:hover[b-0n9fx7gg7s] {
        background: var(--peligro);
    }

@media (hover: none) {
    .quitar[b-0n9fx7gg7s] {
        opacity: 1;
    }
}

/* --- Zona de soltar y tarjeta de agregar ----------------------------------
   El <InputFile> real cubre el recuadro entero, invisible, para que todo sea
   clickeable sin <label for> ni JS.

   ::deep es OBLIGATORIO: InputFile es un componente hijo y su <input> no
   recibe el atributo de scope de esta página, así que un selector normal
   nunca lo alcanzaría (y el control nativo "Elegir archivos" quedaría
   visible). El markup además trae el mismo estilo inline como garantía. */
.zona-soltar[b-0n9fx7gg7s] {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.75rem 1rem;
    background: var(--lienzo);
    transition: border-color .18s ease, background .18s ease;
}

    .zona-soltar:hover[b-0n9fx7gg7s], .zona-soltar.arrastrando[b-0n9fx7gg7s] {
        border-color: var(--marca-500) !important;
        background: var(--marca-50);
    }

    .zona-soltar[b-0n9fx7gg7s]  input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.agregar-foto[b-0n9fx7gg7s] {
    position: relative;
}

    .agregar-foto[b-0n9fx7gg7s]  input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

/* Tile de agregar con la misma huella cuadrada que las fotos de al lado.
   aspect-ratio directo y no .ratio de Bootstrap: .ratio vuelve absolute a
   todos sus hijos y rompía el centrado del contenido del tile. */
.cuadro-agregar[b-0n9fx7gg7s] {
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* --- Logo ----------------------------------------------------------------
   contain y no cover: un logo recortado deja de ser el logo. */
.logo-vista[b-0n9fx7gg7s] {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: var(--superficie);
}

/* --- Chip de color extraído por el BrandAgent ---------------------------- */
.muestra-color[b-0n9fx7gg7s] {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--linea);
    flex: 0 0 auto;
}

/* --- Insignia de trabajo en curso sobre una foto -------------------------
   Cuando el stylizer está procesando esa imagen. */
.trabajando[b-0n9fx7gg7s] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: rgba(var(--blanco-rgb), .72);
    backdrop-filter: blur(2px);
}
/* _content/CommunityManager/Components/Pages/Negocio/Mensajes.razor.rz.scp.css */
/* ==========================================================================
   Mensajes.razor.css — CSS aislado del chat con el equipo.
   Lo que Bootstrap resuelve (card, grid, form-control, botones) no se
   redefine; aquí solo las burbujas, el log con su scroll y las dos
   animaciones propias del chat.
   ========================================================================== */

/* --- Contenedor ----------------------------------------------------------
   Alto fijo para que el log scrollee por dentro y la barra de envío quede
   siempre visible; dvh y no vh por la barra de direcciones de iOS. */
.chat[b-u3ed64oj0p] {
    height: calc(100dvh - var(--nav-h) - 8rem);
    min-height: 460px;
    max-height: 780px;
    overflow: hidden;
}

/* En móvil el lateral va debajo, así que el chat puede tomar más pantalla */
@media (max-width: 991.98px) {
    .chat[b-u3ed64oj0p] {
        height: calc(100dvh - var(--nav-h) - 12rem);
        min-height: 420px;
    }
}

.chat__log[b-u3ed64oj0p] {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain; /* al llegar al tope no arrastra la página */
    background: var(--lienzo);
}

.chat__cabeza[b-u3ed64oj0p], .chat__pie[b-u3ed64oj0p] {
    flex: 0 0 auto;
    background: var(--superficie);
}

/* --- Mensajes ------------------------------------------------------------ */
.msg[b-u3ed64oj0p] {
    display: flex;
    gap: .5rem;
    max-width: 86%;
}

.msg--equipo[b-u3ed64oj0p] {
    align-self: flex-start;
}

.msg--mio[b-u3ed64oj0p] {
    align-self: flex-end;
    flex-direction: row-reverse;
    text-align: right;
}

.msg__ico[b-u3ed64oj0p] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-top: .15rem;
}

.msg__burbuja[b-u3ed64oj0p] {
    padding: .6rem .8rem;
    border-radius: var(--r-md);
    font-size: .85rem;
    line-height: 1.45;
    text-align: start;
    word-break: break-word;
}

.msg--equipo .msg__burbuja[b-u3ed64oj0p] {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-top-left-radius: var(--r-sm);
    color: var(--tinta-2);
}

.msg--mio .msg__burbuja[b-u3ed64oj0p] {
    background: linear-gradient(120deg, var(--marca-500), var(--marca-700));
    border-top-right-radius: var(--r-sm);
    color: #fff;
}

/* --- Adjuntos dentro de una burbuja -------------------------------------- */
.adjunto[b-u3ed64oj0p] {
    background: var(--lienzo);
    border: 1px solid var(--linea);
}

    .adjunto img[b-u3ed64oj0p] {
        width: 42px;
        height: 42px;
        object-fit: cover;
        border-radius: var(--r-sm);
        flex: 0 0 auto;
    }

/* --- Avatares ------------------------------------------------------------ */
.avatar[b-u3ed64oj0p] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--linea);
}

/* Botones cuadrados de la barra: mismo tamaño que el input redondeado */
.cuadro-boton[b-u3ed64oj0p] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
}

/* --- Punto de "en línea" -------------------------------------------------- */
.punto-vivo[b-u3ed64oj0p] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--exito);
    /* 18,165,108 = --exito (#12A56C). Va literal porque estilos.css no
       expone --exito-rgb y rgba() no acepta un hex dentro de var(). */
    box-shadow: 0 0 0 0 rgba(18, 165, 108, .55);
    animation: latido-b-u3ed64oj0p 1.8s infinite;
}

@keyframes latido-b-u3ed64oj0p {
    70% {
        box-shadow: 0 0 0 7px rgba(18, 165, 108, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(18, 165, 108, 0);
    }
}

/* --- "Está escribiendo" --------------------------------------------------- */
.tecleando[b-u3ed64oj0p] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: .1rem 0;
}

    .tecleando span[b-u3ed64oj0p] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--palido);
        animation: rebote-b-u3ed64oj0p 1.3s infinite;
    }

        .tecleando span:nth-child(2)[b-u3ed64oj0p] {
            animation-delay: .18s;
        }

        .tecleando span:nth-child(3)[b-u3ed64oj0p] {
            animation-delay: .36s;
        }

@keyframes rebote-b-u3ed64oj0p {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: .45;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* --- Lateral -------------------------------------------------------------- */
.lateral[b-u3ed64oj0p] {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
}

/* Quita el margen del último miembro del equipo sin necesitar un @if */
.last-sin-margen:last-child[b-u3ed64oj0p] {
    margin-bottom: 0 !important;
}

/* Ayuda a que text-truncate funcione dentro de flex */
.min-w-0[b-u3ed64oj0p] {
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .punto-vivo[b-u3ed64oj0p], .tecleando span[b-u3ed64oj0p] {
        animation: none;
    }
}
/* _content/CommunityManager/Components/Pages/Negocio/Panel.razor.rz.scp.css */
/* ==========================================================================
   Panel.razor.css — CSS aislado del panel del cliente.
   La tarjeta azul "Tu plan" y el listado de actividad reciente; todo lo demás
   del Panel se arma con utilidades de Bootstrap y piezas globales de
   estilos.css.
   ========================================================================== */

/* Tarjeta azul de marca con burbuja de luz en la esquina */
.panel-marca[b-zews3jsb3h] {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, var(--marca-500), var(--marca-800) 120%);
    box-shadow: var(--sombra-marca);
}

    .panel-marca[b-zews3jsb3h]::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--blanco-rgb),.18), transparent 65%);
        top: -100px;
        right: -80px;
    }
/* Recorte a 3 líneas del copy en las tarjetas de la semana */
.recorte-3[b-zews3jsb3h] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Actividad reciente
   Separador punteado ENTRE filas (no después de la última) con :not(:last-child),
   así la tarjeta no queda con una línea suelta abajo.
   ========================================================================== */

.lista-actividad li[b-zews3jsb3h] {
    padding-block: .7rem;
}

    .lista-actividad li:first-child[b-zews3jsb3h] {
        padding-top: 0;
    }

    .lista-actividad li:not(:last-child)[b-zews3jsb3h] {
        border-bottom: 1px dashed var(--linea);
    }

    .lista-actividad li:last-child[b-zews3jsb3h] {
        padding-bottom: 0;
    }

/* Punto de color por tipo de evento. margin-top lo alinea con la primera
   línea de texto en vez de con el alto total del bloque. */
.punto-actividad[b-zews3jsb3h] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: .35rem;
    border-radius: 50%;
    background: var(--palido);
}

    /* Publicado */
    .punto-actividad.es-exito[b-zews3jsb3h] {
        background: var(--exito);
    }

    /* Regenerado / requiere atención del cliente */
    .punto-actividad.es-aviso[b-zews3jsb3h] {
        background: var(--aviso);
    }

    /* Plan, post único, marca: lo que produjo el sistema */
    .punto-actividad.es-marca[b-zews3jsb3h] {
        background: var(--marca-600);
    }

    /* Falló */
    .punto-actividad.es-peligro[b-zews3jsb3h] {
        background: var(--peligro);
    }

    /* En proceso o secundario */
    .punto-actividad.es-neutro[b-zews3jsb3h] {
        background: var(--palido);
    }
/* _content/CommunityManager/Components/Pages/Planes.razor.rz.scp.css */
/* ==========================================================================
   Planes.razor.css — solo lo exclusivo de la página de planes.
   Colores y tipografía vienen de wwwroot/css/estilos.css (variables --marca-*).
   Acomodo y espaciado → clases Bootstrap en Planes.razor.
   ========================================================================== */

/* --- Tarjeta Pro: borde de marca + sombra de marca, sin hover extra ------ */
.destacado[b-uct4jleykh] {
    border: 2px solid var(--marca-600);
    box-shadow: var(--sombra-marca);
}

.fondo-degradado[b-uct4jleykh] {
    background: linear-gradient(135deg, var(--marca-500), var(--marca-700));
}

/* --- Interruptor mensual / anual ---------------------------------------- */
.interruptor[b-uct4jleykh] {
    background: var(--linea-suave);
    border: 1px solid var(--linea);
}

    .interruptor .btn[b-uct4jleykh] {
        --bs-btn-color: var(--tenue);
        --bs-btn-hover-color: var(--tinta);
        --bs-btn-hover-bg: transparent;
        --bs-btn-active-bg: transparent;
        --bs-btn-border-width: 0;
        font-weight: 600;
        transition: background-color .15s ease, color .15s ease;
    }

        .interruptor .btn.activo[b-uct4jleykh] {
            background: var(--superficie);
            color: var(--tinta);
            box-shadow: var(--sombra-sm);
        }

        .interruptor .btn:focus-visible[b-uct4jleykh] {
            outline: 2px solid var(--marca-500);
            outline-offset: 2px;
        }

/* --- Tabla comparativa --------------------------------------------------- */
.tabla-planes[b-uct4jleykh] {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--linea);
}

    .tabla-planes thead th[b-uct4jleykh] {
        background: var(--linea-suave);
        color: var(--tenue);
        font-size: .8rem;
        font-weight: 600;
        padding-top: .9rem;
        padding-bottom: .9rem;
        border-bottom-width: 1px;
    }

    .tabla-planes tbody th[b-uct4jleykh],
    .tabla-planes tbody td[b-uct4jleykh] {
        padding-top: .85rem;
        padding-bottom: .85rem;
    }

    .tabla-planes tbody tr:last-child > *[b-uct4jleykh] {
        border-bottom-width: 0;
    }

    /* Columna Pro ligeramente teñida para que se lea como la opción destacada */
    .tabla-planes .columna-pro[b-uct4jleykh] {
        background: var(--marca-50);
        font-weight: 600;
        color: var(--tinta);
    }

    .tabla-planes thead .columna-pro[b-uct4jleykh] {
        color: var(--marca-700);
    }

@media (prefers-reduced-motion: reduce) {
    .interruptor .btn[b-uct4jleykh] {
        transition: none;
    }
}

/* --- Aviso de licencia inactiva ----------------------------------------- */
.aviso-licencia[b-uct4jleykh] {
    border-left: 4px solid var(--aviso);
}

    .aviso-licencia .cuadro-icono[b-uct4jleykh] {
        width: 44px;
        height: 44px;
    }

    .aviso-licencia p[b-uct4jleykh] {
        max-width: 62ch;
    }

/* --- Tamaños puntuales que antes eran style inline ---------------------- */
.titulo-principal[b-uct4jleykh] {
    font-size: clamp(2rem, 4vw, 3rem);
}

.subtitulo-seccion[b-uct4jleykh] {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}

.monto-precio[b-uct4jleykh] {
    font-size: 3rem;
}

.texto-ancho[b-uct4jleykh] {
    max-width: 46ch;
    font-size: 1.04rem;
}

    .texto-ancho--cta[b-uct4jleykh] {
        max-width: 42ch;
        font-size: 1.04rem;
    }

.plan-descripcion[b-uct4jleykh] {
    max-width: 32ch;
}

.nota-facturacion[b-uct4jleykh] {
    min-height: 1.4em;
}

.badge-destacado[b-uct4jleykh] {
    letter-spacing: .05em;
}