@charset "utf-8";
/* CSS Document */
#uploader
{
	display: none;
}

#createpost
{
	margin-bottom: 25px;
}

.cp-top
{
	position: relative;
	padding: 5px 15px 15px 60px;
}

.cp-top .ex-alt
{
	position: absolute;
	top: 0px; left: 10px;
}

.cp-top .sel-imgs
{
	position: absolute;
	top: 0px; right: 10px;
}

#createpost .cp-imgs
{
	position: relative;
	height: 100%;
	margin-top: 10px;
	margin-left: -3.3%;
}

.cp-middle
{
	position: relative;
	width: 100%; height: 77%;
	margin: 0 auto;
	overflow: hidden;
}

#createpost .cp-imgs .ig
{
	position: relative;
	vertical-align: top;
	display:inline-block;
	margin: 0px 0px 3.3% 3.3%;
	background-image: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 30%;
	height: 30%;
}

#createpost .cp-imgs .ig a
{
	position: absolute;
	top: 10px; right: 10px;
	width: 25px; height: 25px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	overflow: hidden;
}

#createpost .cp-imgs .ig .ico
{
	position: absolute;
	top: 0px; right: 0px;
	bottom: 0px; left: 0px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 60% 60%;
	background-image: url(../icos/close.svg);
	cursor: pointer;
	z-index: 2;
}

.cp-pos
{
	position: absolute;
	left: 0px; right: 0px;
	bottom: 0px;
	padding: 15px;
	z-index: 5;
}

.cp-text
{
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	max-height: 60px;
	resize: none;
	border: 0px;
	outline:0px;
    color: #FFFFFF; 
	cursor: text;
}

.cp-text[placeholder]:empty:before {
    content: attr(placeholder);
    color: #FFFFFF; 
}

.cp-desings {
    position: relative;
    width: 100%;
    height: 20%;
    margin-top: 3%;
    display: none;

    display: flex;
    flex-wrap: nowrap; /* <-- IMPORTANTE: No deja que los items bajen */
    overflow-x: auto;  /* Scroll horizontal */
    overflow-y: hidden;
}

.cp-desings .sC {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1; /* Siempre cuadrado */
    flex: 0 0 auto;      /* Evita que se reduzcan / expandan */
    margin-left: 3%;
}

.cp-desings .sC a {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
}

/* Si quieres que el primero no tenga margen */
.cp-desings .sC:first-child {
    margin-left: 0;
}

.cp-desings .sC .ico
{
	position: absolute;
	top: 0px; right: 0px;
	bottom: 0px; left: 0px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40% 40%;
	background-image: url(../icos/ok.svg);
	z-index: 2;
}

.cp-desings .sC div
{
	box-shadow: inset 0 0 0 1px #FFF;
	background-image: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.cp-filters
{
	position: relative;
	width: 100%;
	margin-top: 3%;
	display: none;
}

.cp-bottom
{
	position: fixed;
	left: 0px; right: 0px;
	bottom: 0px;
	display: flex;
	background-color: aliceblue;
	padding: 15px;
	z-index: 1;
}

.fixed-cpb
{
	margin: 0 20% 0 45%;
}

.cp-bottom a
{
	width: 100%;
}

.cp-file
{
	display: none;
}

.cp-loading {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.cp-loading .spinner {
	width: 40px;
	height: 40px;
}

.cp-spinner {
	margin: -3.3px auto;
	width:24px;
	height:24px;
	border-radius:50%;
	background:conic-gradient(#0000 10%,#FFFFFF);
	-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2px),#000 0);
	animation:s3 0.5s infinite linear;
}
@keyframes s3 {to{transform: rotate(1turn)}}

/* Navegación de mini collages: visible únicamente en la versión fixed. */
.cp-designs-nav {
	position: relative;
	width: 100%;
	height: 20%;
	margin-top: 3%;
}

.cp-designs-nav .cp-desings {
	height: 100%;
	margin-top: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cp-designs-nav .cp-desings::-webkit-scrollbar {
	display: none;
}

.cp-arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255,255,255,.94);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	box-shadow: 0 2px 10px rgba(0,0,0,.14);
	cursor: pointer;
	z-index: 8;
}

.fixed-cpnav {
	padding: 0 54px;
	box-sizing: border-box;
}

.fixed-cpnav .cp-arrow {
	display: block;
}

.fixed-cpnav .cp-arrow-left {
	left: 4px;
	background-image: url(../icos/arrow-left.svg);
}

.fixed-cpnav .cp-arrow-right {
	right: 4px;
	background-image: url(../icos/arrow-right.svg);
}

.cp-arrow:disabled {
	opacity: .25;
	cursor: default;
	box-shadow: none;
}

/* El degradado queda detrás del texto, pero por encima del collage. */
#createpost .cp-pos {
	isolation: isolate;
}

#createpost .cp-pos .d-om {
	z-index: 0;
	pointer-events: none;
}

#createpost .cp-pos .cp-text {
	position: relative;
	z-index: 1;
	min-height: 22px;
}

/* Ajuste final fixed: el selector conserva todo el ancho del contenedor
   y las flechas quedan por fuera, sin ocupar espacio de las miniaturas. */
.fixed-cpnav {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	overflow: visible;
}

.fixed-cpnav .cp-desings {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.fixed-cpnav .cp-arrow-left {
	left: -54px;
}

.fixed-cpnav .cp-arrow-right {
	right: -54px;
}


/* Ajuste solicitado: en fixed conserva todo el ancho, flechas fuera y
   centra verticalmente la tira en el espacio entre el collage y Publicar. */
.fixed-cpnav {
    width: 100%;
    height: calc(20% - 24px);
    margin: 12px 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    align-items: center;
}

.fixed-cpnav .cp-desings {
    width: 100%;
    height: 100%;
    margin: 0;
}

.fixed-cpnav .cp-arrow-left { left: -54px; }
.fixed-cpnav .cp-arrow-right { right: -54px; }

/* La caja de título queda siempre visible sobre la parte inferior del collage. */
#createpost .cp-middle {
    position: relative;
}

#createpost .cp-middle > .cp-pos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 42px 15px 15px;
    z-index: 30;
    isolation: isolate;
    pointer-events: none;
}

#createpost .cp-middle > .cp-pos .d-om {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.78) 100%);
}

#createpost .cp-middle > .cp-pos .cp-text {
    position: relative;
    z-index: 1;
    min-height: 24px;
    color: #fff;
    pointer-events: auto;
}

#createpost .cp-middle > .cp-pos .cp-text[placeholder]:empty:before {
    color: rgba(255,255,255,.92);
}


/* ==========================================================
   Crear publicación — ajuste exclusivo para modo mobile
   - Collage principal cuadrado y simétrico.
   - Selector centrado verticalmente entre collage y Publicar.
   ========================================================== */
#createpost.mobile-createpost {
    height: 100%;
    min-height: 100%;
    padding-bottom: 78px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#createpost.mobile-createpost > .cp-middle {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
}

#createpost.mobile-createpost > .cp-middle > .cl-collage,
#createpost.mobile-createpost > .cp-middle > .cl-hidden {
    width: 100%;
    height: 100%;
}

#createpost.mobile-createpost > .mobile-cpnav {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 118px;
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
}

#createpost.mobile-createpost > .mobile-cpnav > .cp-desings {
    width: 100%;
    height: clamp(105px, 15vh, 145px);
    margin: 0;
    align-self: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#createpost.mobile-createpost > .mobile-cpnav > .cp-desings::-webkit-scrollbar {
    display: none;
}

#createpost.mobile-createpost > .mobile-cpnav .sC {
    height: 100%;
}

#createpost.mobile-createpost > .mobile-cpb.cp-bottom {
    min-height: 78px;
    box-sizing: border-box;
}


/* ==========================================================
   Crear publicación — proporción mobile equivalente a fixed
   El collage aprovecha el alto disponible; selector y botón
   conservan su lugar sin huecos grandes ni superposiciones.
   ========================================================== */
@media (max-width:768px){

    #createpost.mobile-createpost{
        display:flex;
        flex-direction:column;
        width:100%;
        min-height:100dvh;
        padding-bottom:78px; /* reserva exacta para Publicar fijo */
        box-sizing:border-box;
        overflow:hidden;
    }

    #createpost.mobile-createpost > .cp-middle{
        width:100%;
        /* Proporcional al ancho, pero limitado por el alto real del teléfono. */
        height:min(calc(100dvh - 250px), calc(100vw * 1.18));
        min-height:calc(100vw * 1.02);
        max-height:calc(100dvh - 225px);
        aspect-ratio:auto;
        flex:0 0 auto;
        margin:0;
        overflow:hidden;
    }

    #createpost.mobile-createpost > .cp-middle > .cl-collage,
    #createpost.mobile-createpost > .cp-middle > .cl-hidden{
        width:100%;
        height:100%;
    }

    #createpost.mobile-createpost > .mobile-cpnav{
        flex:0 0 auto;
        width:100%;
        height:clamp(112px, 23vw, 150px);
        min-height:0;
        margin:0;
        padding:10px 0;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    #createpost.mobile-createpost > .mobile-cpnav > .cp-desings{
        width:100%;
        height:100%;
        margin:0 auto;
        align-self:center;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    #createpost.mobile-createpost > .mobile-cpnav > .cp-desings::-webkit-scrollbar{
        display:none;
    }

    #createpost.mobile-createpost > .mobile-cpnav .sC{
        height:100%;
    }

    /* No se cambia el tamaño original del botón. */
    #createpost.mobile-createpost > .mobile-cpb.cp-bottom{
        margin-top:0;
        min-height:78px;
        box-sizing:border-box;
    }
}

/* ==========================================================
   Corrección final mobile — selector de 3 modelos + Publicar compacto
   ========================================================== */
@media (max-width:768px){
    #createpost.mobile-createpost{
        height:100%;
        min-height:0;
        padding-bottom:60px;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        box-sizing:border-box;
    }

    /* El collage principal conserva exactamente su tamaño actual. */

    /* El espacio restante entre collage y botón pertenece al selector. */
    #createpost.mobile-createpost > .mobile-cpnav{
        flex:1 1 0;
        width:100%;
        height:auto;
        min-height:0;
        margin:0;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        box-sizing:border-box;
    }

    #createpost.mobile-createpost > .mobile-cpnav > .cp-desings{
        --cp-gap:10px;
        width:100%;
        height:auto;
        max-height:100%;
        margin:0;
        padding:0 10px;
        display:flex;
        align-items:center;
        gap:var(--cp-gap);
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        scroll-padding-inline:10px;
        box-sizing:border-box;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    #createpost.mobile-createpost > .mobile-cpnav > .cp-desings::-webkit-scrollbar{
        display:none;
    }

    #createpost.mobile-createpost > .mobile-cpnav .sC{
        flex:0 0 calc((100% - (2 * var(--cp-gap))) / 3);
        width:calc((100% - (2 * var(--cp-gap))) / 3);
        height:auto;
        aspect-ratio:1 / 1;
        margin-left:0 !important;
        scroll-snap-align:start;
        scroll-snap-stop:always;
    }

    /* Evita que el primer y último modelo queden cortados. */
    #createpost.mobile-createpost > .mobile-cpnav .sC:first-child{
        margin-left:0 !important;
    }

    /* Publicar vuelve a ser compacto: alto proporcional al texto/spinner. */
    #createpost.mobile-createpost > .mobile-cpb.cp-bottom{
        min-height:0;
        height:auto;
        padding:10px 22px;
        margin:0;
        box-sizing:border-box;
    }

    #createpost.mobile-createpost > .mobile-cpb.cp-bottom a.myButton1{
        width:100%;
        min-height:40px !important;
        height:40px !important;
        line-height:40px !important;
        padding:0 16px !important;
        margin:0 !important;
        border-radius:9px !important;
        box-sizing:border-box;
    }

    #createpost.mobile-createpost > .mobile-cpb.cp-bottom .cp-spinner{
        width:22px !important;
        height:22px !important;
        margin:9px auto 0 !important;
    }
}


/* Estado inicial de Crear publicación: guía centrada, sin interferir con las fotos. */
#createpost .cp-imgs .cp-empty-upload{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:28px;
    box-sizing:border-box;
    text-align:center;
    pointer-events:none;
    z-index:1;
}
#createpost .cp-imgs:has(.ig) .cp-empty-upload{ display:none; }
#createpost .cp-empty-photos{
    position:relative;
    width:150px;
    height:94px;
}
#createpost .cp-empty-photos .cp-photo{
    position:absolute;
    width:58px;
    height:72px;
    border:4px solid #fff;
    border-radius:8px;
    box-sizing:border-box;
    background:linear-gradient(155deg,#b9dcff 0 52%,#82bdf4 53% 68%,#5d9fe0 69% 100%);
    box-shadow:0 5px 14px rgba(38,92,145,.18);
}
#createpost .cp-empty-photos .cp-photo:before{
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    right:8px;
    top:8px;
    border-radius:50%;
    background:rgba(255,255,255,.9);
}
#createpost .cp-empty-photos .cp-photo:after{
    content:"";
    position:absolute;
    left:7px;
    right:7px;
    bottom:8px;
    height:25px;
    clip-path:polygon(0 100%,30% 35%,48% 66%,70% 15%,100% 100%);
    background:rgba(255,255,255,.78);
}
#createpost .cp-empty-photos .cp-photo-1{left:2px;top:14px;transform:rotate(-13deg);opacity:.72;}
#createpost .cp-empty-photos .cp-photo-2{left:25px;top:4px;transform:rotate(-6deg);opacity:.84;}
#createpost .cp-empty-photos .cp-photo-3{left:47px;top:0;transform:rotate(0);z-index:3;}
#createpost .cp-empty-photos .cp-photo-4{right:23px;top:5px;transform:rotate(7deg);opacity:.84;}
#createpost .cp-empty-photos .cp-photo-5{right:1px;top:15px;transform:rotate(14deg);opacity:.72;}
#createpost .cp-empty-text{
    max-width:300px;
    color:#6d7682;
    font-size:16px;
    line-height:1.35;
}


/* Bloqueo visual mientras se publica: evita dobles toques/peticiones. */
#createpost .publish-submit.is-publishing {
    opacity: .58;
    pointer-events: none;
    cursor: default;
}


/* Contador del título/descripción de la publicación */
#createpost .cp-char-counter{
    position:absolute;
    right:15px;
    bottom:12px;
    z-index:7;
    min-width:30px;
    height:24px;
    padding:0 7px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(0,0,0,.42);
    color:#fff;
    font-size:12px;
    font-weight:600;
    line-height:1;
    pointer-events:none;
}
#createpost .cp-char-counter.is-limit{background:rgba(0,0,0,.68);}
#createpost .cp-pos .cp-text{padding-right:48px;box-sizing:border-box;}

/* ==========================================================
   Crear publicación — tematización Brintage (sin alterar estructura)
   Mantiene proporciones, distribución y funcionamiento existentes.
   ========================================================== */
#createpost{
    --cp-blue:#2f80ed;
    --cp-blue2:#3f91ff;
    --cp-line:#e4edf8;
    --cp-shadow:0 8px 24px rgba(28,73,118,.10);
}

/* Marco visual limpio del collage, sin cambiar su tamaño. */
#createpost .cp-middle{
    border-radius:14px;
    background:#fff!important;
    box-shadow:var(--cp-shadow);
}
#createpost .cp-middle > .cl-collage{
    overflow:hidden;
    border-radius:14px;
}

/* Barra flotante del título, estilo Brintage. */
#createpost .cp-middle > .cp-pos{
    left:14px;
    right:14px;
    bottom:14px;
    padding:0;
    display:flex;
    align-items:center;
    min-height:48px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:14px;
    background:rgba(9,17,27,.58);
    box-shadow:0 8px 22px rgba(0,0,0,.22);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    overflow:hidden;
}
#createpost .cp-middle > .cp-pos .d-om{
    display:none;
}
#createpost .cp-middle > .cp-pos:before{
    content:"";
    flex:0 0 42px;
    width:42px;
    height:48px;
    background:url(../icos/stroke-document.svg) center/21px 21px no-repeat;
    filter:brightness(0) invert(1);
    opacity:.96;
    pointer-events:none;
}
#createpost .cp-middle > .cp-pos .cp-text{
    flex:1 1 auto;
    min-width:0;
    min-height:48px;
    max-height:72px;
    padding:14px 58px 12px 0;
    display:flex;
    align-items:center;
    box-sizing:border-box;
    line-height:22px;
}
#createpost .cp-char-counter{
    right:10px;
    bottom:10px;
    height:28px;
    min-width:38px;
    padding:0 9px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:9px;
    background:rgba(0,0,0,.34);
    box-shadow:none;
}

/* Selector de diseños: conserva medidas y gana jerarquía visual. */
#createpost .cp-designs-nav{
    border-radius:14px;
}
#createpost .cp-desings{
    scroll-behavior:smooth;
}
#createpost .cp-desings .sC{
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 3px 10px rgba(22,63,105,.10);
    outline:1px solid rgba(214,226,240,.95);
    outline-offset:-1px;
    transition:transform .18s ease, box-shadow .18s ease, outline-color .18s ease, opacity .18s ease;
    opacity:.96;
}
#createpost .cp-desings .sC:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(35,95,155,.17);
    opacity:1;
}
#createpost .cp-desings .sC:has(#ok){
    outline:3px solid var(--cp-blue);
    outline-offset:-3px;
    box-shadow:0 8px 20px rgba(47,128,237,.28);
    opacity:1;
}
#createpost .cp-desings .sC #ok{
    background:transparent;
}
#createpost .cp-desings .sC #ok .opacity{
    background:transparent!important;
}
#createpost .cp-desings .sC #ok .ico{
    top:8px;
    right:8px;
    bottom:auto;
    left:auto;
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:var(--cp-blue);
    background-size:58% 58%;
    box-shadow:0 4px 10px rgba(20,81,153,.28);
}

/* Flechas redondas, suaves y coherentes con la temática. */
#createpost .cp-arrow{
    width:44px;
    height:44px;
    border:1px solid var(--cp-line);
    background-color:rgba(255,255,255,.97);
    background-size:18px 18px;
    box-shadow:0 7px 18px rgba(34,72,111,.14);
    transition:transform .16s ease, box-shadow .16s ease;
}
#createpost .cp-arrow:not(:disabled):hover{
    transform:translateY(-50%) scale(1.05);
    box-shadow:0 10px 24px rgba(47,128,237,.20);
}

/* Botón principal: mismo espacio, acabado más profesional. */
#createpost .cp-bottom{
    background:rgba(255,255,255,.96);
}
#createpost .cp-bottom .myButton1{
    border-radius:11px!important;
    background:linear-gradient(135deg,var(--cp-blue),var(--cp-blue2))!important;
    box-shadow:0 8px 20px rgba(47,128,237,.25)!important;
    transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
#createpost .cp-bottom .myButton1:hover{
    transform:translateY(-1px);
    box-shadow:0 11px 25px rgba(47,128,237,.31)!important;
}
#createpost .cp-bottom .myButton1:active{
    transform:scale(.995);
}

@media (max-width:768px){
    /* Se respetan exactamente la estructura y las proporciones mobile actuales. */
    #createpost.mobile-createpost > .cp-middle{
        border-radius:0;
        box-shadow:none;
    }
    #createpost.mobile-createpost > .cp-middle > .cl-collage{
        border-radius:0;
    }
    #createpost.mobile-createpost > .cp-middle > .cp-pos{
        left:14px;
        right:14px;
        bottom:12px;
        min-height:46px;
        border-radius:13px;
    }
    #createpost.mobile-createpost > .cp-middle > .cp-pos:before{
        width:40px;
        flex-basis:40px;
        height:46px;
        background-size:20px 20px;
    }
    #createpost.mobile-createpost > .cp-middle > .cp-pos .cp-text{
        min-height:46px;
        padding-top:12px;
        padding-bottom:11px;
    }
    #createpost.mobile-createpost > .mobile-cpnav > .cp-desings{
        padding:7px 10px;
    }
    #createpost.mobile-createpost > .mobile-cpnav .sC{
        border-radius:8px;
        box-shadow:0 3px 9px rgba(22,63,105,.11);
    }
    #createpost.mobile-createpost > .mobile-cpnav .sC:hover{
        transform:none;
    }
    #createpost.mobile-createpost > .mobile-cpnav .sC:has(#ok){
        outline-width:3px;
        outline-offset:-3px;
        box-shadow:0 6px 15px rgba(47,128,237,.24);
    }
    #createpost.mobile-createpost > .mobile-cpnav .sC #ok .ico{
        top:6px;
        right:6px;
        width:27px;
        height:27px;
    }
    #createpost.mobile-createpost > .mobile-cpb.cp-bottom{
        background:#fff;
        box-shadow:0 -8px 22px rgba(30,67,104,.06);
    }
}


/* ==========================================================
   Crear publicación — ajuste funcional final
   - navegación de cuatro en cuatro
   - selectores de diseños/filtros precargados por separado
   - Publicar integrado y collage autoajustable en escritorio
   ========================================================== */
#createpost .cp-middle > .cp-pos:before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l4.2-1 10.9-10.9a2.1 2.1 0 0 0 0-3L18.9 4a2.1 2.1 0 0 0-3 0L5 14.9 4 20z' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.7 5.2l4.1 4.1' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")!important;
    filter:none!important;
}

#createpost .publish-submit{
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:9px;
}
#createpost .publish-submit .publish-plane{
    width:20px;
    height:20px;
    flex:0 0 20px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3L9.7 14.3M21 3l-7.2 18-4.1-6.7L3 10.2 21 3z' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* En escritorio entran exactamente cuatro mini collages completos. */
#createpost .fixed-cps.cp-desings{
    gap:12px;
    scroll-snap-type:x mandatory;
}
#createpost .fixed-cps.cp-desings .sC{
    width:calc((100% - 36px) / 4);
    flex:0 0 calc((100% - 36px) / 4);
    margin-left:0!important;
    scroll-snap-align:start;
}

/* Publicar forma parte del editor y no fuerza scroll vertical. */
@media (min-width:769px){
    #createpost.fixed-createpost{
        height:100%;
        min-height:0;
        margin-bottom:0;
        overflow:hidden;
        display:flex;
        flex-direction:column;
    }
    #createpost.fixed-createpost > .pB.cp-middle{
        flex:1 1 auto;
        min-height:260px;
        height:auto;
    }
    #createpost.fixed-createpost > .fixed-cpnav.pB{
        flex:0 0 clamp(105px,16vh,150px);
        height:auto;
        margin:10px 0 8px;
    }
    #createpost.fixed-createpost > .fixed-cpb.pB.cp-bottom{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        flex:0 0 auto;
        width:100%;
        margin:0;
        padding:8px 0 10px;
        box-sizing:border-box;
        background:#fff;
        z-index:5;
    }
    #createpost.fixed-createpost > .fixed-cpb.pB.cp-bottom .myButton1{
        width:100%;
        box-sizing:border-box;
    }
}


/* ==========================================================
   Selección de fotografías — tematización Brintage
   Conserva la estructura y la lógica originales.
   ========================================================== */
#createpost .pA.cp-imgs{
    box-sizing:border-box;
    padding:10px;
    margin:0!important;
    align-content:start;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#c9d9eb transparent;
}
#createpost .pA.cp-imgs::-webkit-scrollbar{width:7px;}
#createpost .pA.cp-imgs::-webkit-scrollbar-track{background:transparent;}
#createpost .pA.cp-imgs::-webkit-scrollbar-thumb{background:#c9d9eb;border-radius:10px;}

#createpost .pA.cp-imgs .ig{
    width:calc((100% - 24px) / 3)!important;
    height:auto!important;
    aspect-ratio:1 / 1;
    margin:0 8px 8px 0!important;
    border:1px solid #e0eaf5;
    border-radius:14px;
    box-sizing:border-box;
    overflow:hidden;
    background-color:#eef4fb;
    box-shadow:0 5px 15px rgba(31,75,117,.10);
    transform:translateY(0) scale(1);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
    animation:brCpPhotoIn .24s ease both;
}
#createpost .pA.cp-imgs .ig:nth-of-type(3n){margin-right:0!important;}
#createpost .pA.cp-imgs .ig:hover{
    transform:translateY(-2px);
    border-color:#bcd8f7;
    box-shadow:0 10px 23px rgba(41,101,160,.18);
}
#createpost .pA.cp-imgs .ig.ou{opacity:.72;}

@keyframes brCpPhotoIn{
    from{opacity:0;transform:translateY(7px) scale(.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

/* Quitar foto: cápsula blanca translúcida, limpia y fácil de tocar. */
#createpost .pA.cp-imgs .ig > a{
    top:8px!important;
    right:8px!important;
    width:30px!important;
    height:30px!important;
    border:1px solid rgba(225,235,245,.95);
    border-radius:50%!important;
    background:rgba(255,255,255,.94);
    box-shadow:0 5px 13px rgba(23,54,87,.20);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
#createpost .pA.cp-imgs .ig > a:hover{
    transform:scale(1.07);
    background:#fff;
    box-shadow:0 7px 17px rgba(23,54,87,.27);
}
#createpost .pA.cp-imgs .ig > a .opacity{display:none!important;}
#createpost .pA.cp-imgs .ig > a .ico{
    inset:0!important;
    background-image:none!important;
}
#createpost .pA.cp-imgs .ig > a .ico:before,
#createpost .pA.cp-imgs .ig > a .ico:after{
    content:"";
    position:absolute;
    left:8px;
    top:14px;
    width:14px;
    height:2px;
    border-radius:2px;
    background:#40566f;
}
#createpost .pA.cp-imgs .ig > a .ico:before{transform:rotate(45deg);}
#createpost .pA.cp-imgs .ig > a .ico:after{transform:rotate(-45deg);}

/* Estado de carga dentro de cada tarjeta. */
#createpost .pA.cp-imgs .cp-loading{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(110deg,#edf3f9 25%,#f8fbfe 42%,#edf3f9 60%);
    background-size:220% 100%;
    animation:brCpSkeleton 1.1s linear infinite;
}
@keyframes brCpSkeleton{to{background-position-x:-220%;}}
#createpost .pA.cp-imgs .cp-loading .spinner{width:30px;height:30px;}

/* Siguiente comparte el lenguaje visual del botón Publicar. */
#createpost .cp-next-submit{
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:9px;
}
#createpost .cp-next-submit .cp-next-arrow{
    width:20px;
    height:20px;
    flex:0 0 20px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:transform .18s ease;
}
#createpost .cp-next-submit:hover .cp-next-arrow{transform:translateX(3px);}

/* En el primer paso el botón queda integrado y simétrico con la galería. */
@media (min-width:769px){
    #createpost.fixed-createpost > .pA.cp-imgs{
        flex:1 1 auto;
        min-height:0;
        height:auto;
        padding:12px;
        border:1px solid #e5edf7;
        border-radius:16px;
        background:#fff;
        box-shadow:0 8px 24px rgba(28,73,118,.08);
    }
    #createpost.fixed-createpost > .fixed-cpb.pA.cp-bottom{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        width:100%;
        margin:10px 0 0;
        padding:8px 0 10px;
        box-sizing:border-box;
        background:#fff;
    }
}

@media (max-width:768px){
    #createpost.mobile-createpost > .pA.cp-imgs{
        width:100%;
        height:calc(100% - 60px);
        padding:8px;
        margin:0!important;
        background:#f7faff;
    }
    #createpost.mobile-createpost > .pA.cp-imgs .ig{
        width:calc((100% - 16px) / 3)!important;
        margin:0 8px 8px 0!important;
        border-radius:11px;
        box-shadow:0 4px 12px rgba(31,75,117,.10);
    }
    #createpost.mobile-createpost > .pA.cp-imgs .ig:nth-of-type(3n){margin-right:0!important;}
    #createpost.mobile-createpost > .pA.cp-imgs .ig:hover{transform:none;}
    #createpost.mobile-createpost > .pA.cp-imgs .ig > a{
        top:6px!important;
        right:6px!important;
        width:28px!important;
        height:28px!important;
    }
    #createpost.mobile-createpost > .pA.cp-imgs .ig > a .ico:before,
    #createpost.mobile-createpost > .pA.cp-imgs .ig > a .ico:after{
        left:7px;
        top:13px;
        width:14px;
    }
    #createpost.mobile-createpost > .mobile-cpb.pA.cp-bottom{
        height:auto;
        min-height:0;
        padding:10px 10px;
        margin:0;
        box-sizing:border-box;
        background:#fff;
        box-shadow:0 -8px 22px rgba(30,67,104,.06);
    }
    #createpost.mobile-createpost > .mobile-cpb.pA.cp-bottom .myButton1{
        min-height:42px!important;
        height:42px!important;
        line-height:42px!important;
        margin:0!important;
        border-radius:10px!important;
    }
}

/* ==========================================================
   Ajuste final solicitado — selección/editor
   - Sin scroll interno: la barra queda en el borde del navegador.
   - Cuadrícula simétrica en todas las filas.
   - Botones con margen, mayor altura y misma temática.
   - Capa rayada con esquinas superiores redondeadas.
   ========================================================== */

/* La vista de selección crece con su contenido. El único scroller vertical
   sigue siendo la página .pg, cuya barra está al extremo derecho. */
#createpost.cp-select-step{
    height:auto!important;
    min-height:100%!important;
    overflow:visible!important;
    padding-bottom:14px!important;
}
#createpost.cp-select-step > .pA.cp-imgs{
    position:relative;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    width:100%;
    height:auto!important;
    min-height:calc(100vh - 190px);
    overflow:visible!important;
    margin:0!important;
    padding:12px!important;
    box-sizing:border-box;
    align-content:start;
    border-radius:16px 16px 0 0!important;
    background:#fff!important;
}
#createpost.cp-select-step > .pA.cp-imgs::-webkit-scrollbar{display:none!important;}

/* Grid real: evita que el placeholder altere nth-of-type y elimina el
   margen faltante en la fila del medio. */
#createpost.cp-select-step > .pA.cp-imgs .ig{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1;
    margin:0!important;
    min-width:0;
}
#createpost.cp-select-step > .pA.cp-imgs .cp-empty-upload{
    grid-column:1/-1;
    min-height:calc(100vh - 220px);
}

/* Siguiente y Publicar quedan dentro de su capa, con aire lateral,
   un poco más altos y exactamente centrados. */
#createpost > .cp-bottom{
    box-sizing:border-box!important;
    padding:11px 14px 13px!important;
}
#createpost > .cp-bottom > a.myButton1{
    width:calc(100% - 8px)!important;
    min-height:48px!important;
    height:48px!important;
    line-height:48px!important;
    margin:0 4px!important;
    padding:0 18px!important;
    box-sizing:border-box!important;
    border-radius:12px!important;
}

/* En la etapa inicial, el botón acompaña el contenido y no crea otro scroll. */
#createpost.cp-select-step > .pA.cp-bottom{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin:0!important;
    border-radius:0 0 16px 16px;
    background:#fff!important;
}

/* El editor conserva el autoajuste sin scroll interno. */
#createpost.cp-editor-step{
    overflow:hidden!important;
}

@media (min-width:769px){
    #createpost.cp-select-step > .pA.cp-imgs{
        min-height:calc(100vh - 205px);
        gap:12px;
        padding:14px!important;
    }
    #createpost.cp-select-step > .pA.cp-bottom,
    #createpost.cp-editor-step > .pB.cp-bottom{
        padding-left:16px!important;
        padding-right:16px!important;
    }
    #createpost > .cp-bottom > a.myButton1{
        width:calc(100% - 12px)!important;
        margin-left:6px!important;
        margin-right:6px!important;
        min-height:50px!important;
        height:50px!important;
        line-height:50px!important;
    }
}

@media (max-width:768px){
    #createpost.cp-select-step{
        min-height:100%!important;
        height:auto!important;
        padding-bottom:8px!important;
    }
    #createpost.cp-select-step > .pA.cp-imgs{
        min-height:calc(100dvh - 172px);
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
        padding:9px!important;
        border-radius:14px 14px 0 0!important;
    }
    #createpost.cp-select-step > .pA.cp-imgs .cp-empty-upload{
        min-height:calc(100dvh - 205px);
    }
    #createpost > .mobile-cpb.cp-bottom{
        padding:10px 9px 12px!important;
    }
    #createpost > .mobile-cpb.cp-bottom > a.myButton1{
        width:calc(100% - 8px)!important;
        min-height:46px!important;
        height:46px!important;
        line-height:46px!important;
        margin:0 4px!important;
        border-radius:11px!important;
    }
}


/* ==========================================================
   Ajuste final: fondo limpio, barra inferior fija y alertas Brintage
   ========================================================== */
#createpost.cp-select-step > .pA.cp-imgs{
    background:#fff!important;
    background-image:none!important;
}

/* Avisos de mínimo/máximo de imágenes. */
#mod .cont.cp-limit-modal,
.mod .cont.cp-limit-modal{
    width:min(520px,calc(100vw - 28px))!important;
    padding:0!important;
    overflow:hidden;
    border:1px solid #e4edf8!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:0 24px 70px rgba(19,48,84,.22)!important;
}
#mod .cont.cp-limit-modal .close,
.mod .cont.cp-limit-modal .close{
    top:14px!important;
    right:14px!important;
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    background:#eef3f9!important;
}
.cp-limit-wrap{padding:24px 22px 18px;text-align:center;}
.cp-limit-icon{
    width:58px;height:58px;margin:0 auto 13px;border-radius:18px;
    background:#edf5ff;display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 0 0 1px #d9e9fb;
}
.cp-limit-icon:before{
    content:"";width:30px;height:30px;display:block;background:center/contain no-repeat;
}
.cp-limit-modal[data-limit="min"] .cp-limit-icon:before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='14' height='14' rx='2' fill='none' stroke='%232f7df6' stroke-width='1.8'/%3E%3Cpath d='m5.5 16 3.7-4 2.8 3 1.8-2 3.2 3.5' fill='none' stroke='%232f7df6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 8h3m-1.5-1.5v3' stroke='%232f7df6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cp-limit-modal[data-limit="max"] .cp-limit-icon{background:#fff5f6;box-shadow:inset 0 0 0 1px #ffd9de;}
.cp-limit-modal[data-limit="max"] .cp-limit-icon:before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2.8 19h18.4L12 3Z' fill='none' stroke='%23f04458' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 8v5' stroke='%23f04458' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.5' r='1' fill='%23f04458'/%3E%3C/svg%3E");
}
.cp-limit-title{margin:0 38px 8px;font-size:18px;font-weight:700;color:#172033;line-height:1.3;}
.cp-limit-text{margin:0;color:#6f7d91;font-size:14px;line-height:1.5;}
.cp-limit-action{
    display:flex!important;align-items:center;justify-content:center;gap:8px;
    width:calc(100% - 36px)!important;min-height:48px;margin:0 18px 18px!important;
    border-radius:12px!important;background:linear-gradient(135deg,#2f7df6,#3e91ff)!important;
    color:#fff!important;font-weight:700!important;box-shadow:0 10px 20px rgba(47,125,246,.22);
}
.cp-limit-action:before{
    content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width:768px){
    #createpost.cp-select-step{
        padding-bottom:76px!important;
    }
    #createpost.cp-select-step > .mobile-cpb.pA.cp-bottom{
        position:fixed!important;
        left:0!important;right:0!important;bottom:0!important;
        width:100vw!important;
        margin:0!important;
        padding:10px 10px calc(10px + env(safe-area-inset-bottom))!important;
        border-radius:0!important;
        border-top:1px solid #e4eaf2!important;
        background:#fff!important;
        box-shadow:0 -8px 22px rgba(30,67,104,.08)!important;
        z-index:9998!important;
    }
    #createpost.cp-select-step > .mobile-cpb.pA.cp-bottom > a.myButton1{
        width:100%!important;
        min-height:48px!important;height:48px!important;line-height:48px!important;
        margin:0!important;
        border-radius:11px!important;
    }
    #mod .cont.cp-limit-modal,.mod .cont.cp-limit-modal{
        width:calc(100vw - 20px)!important;
        border-radius:20px!important;
    }
    .cp-limit-wrap{padding:22px 17px 16px;}
    .cp-limit-title{font-size:17px;margin-left:34px;margin-right:34px;}
}

/* Brintage — borradores persistentes de Crear publicación */
.bt-draft-resume{
    position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center;
    padding:20px; background:rgba(9,18,32,.36); backdrop-filter:blur(3px);
}
.bt-draft-resume-card{
    width:min(390px,calc(100vw - 32px)); box-sizing:border-box; padding:24px 22px 18px;
    background:#fff; border:1px solid #e3ebf6; border-radius:22px;
    box-shadow:0 18px 50px rgba(22,43,74,.22); text-align:center;
}
.bt-draft-icon{
    width:50px; height:50px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
    border-radius:16px; background:#eef6ff; color:#3184ee; font-size:25px; font-weight:700;
}
.bt-draft-title{font-size:17px;line-height:1.3;font-weight:700;color:#142238;margin-bottom:6px;}
.bt-draft-subtitle{font-size:13px;color:#8793a4;margin-bottom:20px;}
.bt-draft-actions{display:flex;gap:10px;}
.bt-draft-actions button{
    flex:1; min-height:44px; border-radius:13px; border:0; font:600 14px/1 inherit; cursor:pointer;
}
.bt-draft-discard{background:#f1f4f8;color:#475569;}
.bt-draft-continue{background:#3488f2;color:#fff;box-shadow:0 6px 16px rgba(52,136,242,.24);}
.bt-draft-saved{
    position:fixed; z-index:10060; left:50%; bottom:76px; transform:translate(-50%,12px);
    padding:9px 14px; border-radius:999px; background:rgba(17,31,50,.92); color:#fff;
    font-size:12px; font-weight:600; box-shadow:0 7px 24px rgba(16,35,60,.22);
    opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease;
}
.bt-draft-saved.is-visible{opacity:1;transform:translate(-50%,0);}
@media(max-width:700px){
    .bt-draft-resume{align-items:flex-end;padding:12px;}
    .bt-draft-resume-card{width:100%;border-radius:22px 22px 18px 18px;padding-bottom:16px;}
    .bt-draft-saved{bottom:72px;}
}


/* BRINTAGE FINAL — recorte estricto de miniaturas de Crear publicación */
#createpost.cp-select-step > .pA.cp-imgs .ig,
#createpost.cp-select-step > .pA.cp-imgs .ig > div,
#createpost.cp-select-step > .pA.cp-imgs .ig .cp-img,
#createpost.cp-select-step > .pA.cp-imgs .ig .cp-img-item{
    overflow:hidden!important;
    border-radius:14px!important;
    contain:paint;
}
#createpost.cp-select-step > .pA.cp-imgs .ig img{
    max-width:100%!important;
    max-height:100%!important;
}

/* ==========================================================
   2026-08-07 — Create Collage: 1:1 + separación proporcional
   - El collage principal replica la proporción 1:1 del feed.
   - Los espacios verticales entre collage, selector y barra inferior
     usan la misma fracción del lado/alto del collage principal.
   ========================================================== */
#createpost.cp-editor-step{
    --cp-editor-gap: clamp(8px, 2.5vw, 16px);
}

#createpost.cp-editor-step > .cp-middle{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    flex:0 0 auto!important;
    margin:0!important;
}

#createpost.cp-editor-step > .cp-middle > .cl-collage,
#createpost.cp-editor-step > .cp-middle > .cl-hidden{
    width:100%!important;
    height:100%!important;
}

@media (max-width:768px){
    #createpost.mobile-createpost.cp-editor-step{
        gap:var(--cp-editor-gap)!important;
        padding-bottom:0!important;
        overflow:hidden!important;
    }

    #createpost.mobile-createpost.cp-editor-step > .mobile-cpnav{
        margin:0!important;
        padding:0!important;
        flex:1 1 0!important;
        min-height:0!important;
    }

    #createpost.mobile-createpost.cp-editor-step > .mobile-cpnav > .cp-desings{
        margin:0!important;
    }

    #createpost.mobile-createpost.cp-editor-step > .mobile-cpb.pB.cp-bottom{
        margin:0!important;
        flex:0 0 auto!important;
    }
}

@media (min-width:769px){
    #createpost.fixed-createpost.cp-editor-step{
        row-gap:var(--cp-editor-gap)!important;
    }

    #createpost.fixed-createpost.cp-editor-step > .fixed-cpnav,
    #createpost.fixed-createpost.cp-editor-step > .fixed-cpb.pB.cp-bottom{
        margin-top:0!important;
        margin-bottom:0!important;
    }
}

/* ==========================================================
   Crear publicación — editor completo dentro del navegador
   En escritorio se conservan el carrusel y sus flechas. El collage y
   los controles se dimensionan con la altura disponible para que la
   página no necesite desplazamiento vertical.
   ========================================================== */
@media (min-width:769px){
    #createpost.fixed-createpost.cp-editor-step{
        --cp-editor-gap:clamp(6px,1.2dvh,12px);
        --cp-editor-fit:min(100%,max(360px,calc(100dvh - 320px)));
        height:100%!important;
        min-height:0!important;
        padding-top:0!important;
        padding-bottom:0!important;
        row-gap:var(--cp-editor-gap)!important;
        align-items:center!important;
        overflow-x:hidden!important;
        overflow-y:hidden!important;
    }

    #createpost.fixed-createpost.cp-editor-step.cp-emotive-editor{
        --cp-editor-fit:min(100%,max(344px,calc(100dvh - 388px)));
    }

    #createpost.fixed-createpost.cp-editor-step > .cp-middle{
        width:var(--cp-editor-fit)!important;
        height:var(--cp-editor-fit)!important;
        min-height:0!important;
        aspect-ratio:1/1!important;
        flex:0 0 auto!important;
        margin:0 auto!important;
    }

    #createpost.fixed-createpost.cp-editor-step > .cp-collage-tabs,
    #createpost.fixed-createpost.cp-editor-step > .cp-emotive-categories,
    #createpost.fixed-createpost.cp-editor-step > .fixed-cpnav.cp-designs-nav,
    #createpost.fixed-createpost.cp-editor-step > .fixed-cpb.pB.cp-bottom{
        width:var(--cp-editor-fit)!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    #createpost.fixed-createpost.cp-editor-step > .cp-collage-tabs{
        flex:0 0 44px!important;
        min-height:44px!important;
    }

    #createpost.fixed-createpost.cp-editor-step > .cp-emotive-categories{
        flex:0 0 70px!important;
        min-height:70px!important;
    }

    #createpost.fixed-createpost.cp-editor-step > .fixed-cpnav.cp-designs-nav{
        --cp-mini-size:calc((var(--cp-editor-fit) - 144px) / 4);
        display:flex!important;
        flex:0 0 var(--cp-mini-size)!important;
        height:var(--cp-mini-size)!important;
        min-height:var(--cp-mini-size)!important;
        max-height:var(--cp-mini-size)!important;
        padding-left:54px!important;
        padding-right:54px!important;
        box-sizing:border-box!important;
        overflow:visible!important;
    }

    #createpost.fixed-createpost.cp-editor-step > .fixed-cpnav .cp-arrow-left{
        left:4px!important;
    }

    #createpost.fixed-createpost.cp-editor-step > .fixed-cpnav .cp-arrow-right{
        right:4px!important;
    }

    #createpost.fixed-createpost.cp-editor-step > .fixed-cpnav .cp-desings{
        height:100%!important;
    }

    #createpost.fixed-createpost.cp-editor-step > .fixed-cpb.pB.cp-bottom{
        flex:0 0 auto!important;
        padding-top:6px!important;
        padding-bottom:8px!important;
    }
}

@media (min-width:769px) and (max-height:650px){
    #createpost.fixed-createpost.cp-editor-step{
        --cp-editor-gap:5px;
        --cp-editor-fit:min(100%,max(320px,calc(100dvh - 300px)));
    }
    #createpost.fixed-createpost.cp-editor-step.cp-emotive-editor{
        --cp-editor-fit:min(100%,max(290px,calc(100dvh - 360px)));
    }
    #createpost.fixed-createpost.cp-editor-step > .cp-collage-tabs{
        flex-basis:38px!important;
        min-height:38px!important;
    }
    #createpost.fixed-createpost.cp-editor-step > .cp-emotive-categories{
        flex-basis:62px!important;
        min-height:62px!important;
    }
    #createpost.fixed-createpost.cp-editor-step > .fixed-cpnav .cp-arrow{
        width:36px!important;
        height:36px!important;
        background-size:16px 16px!important;
    }
}

/* Un navegador de escritorio angosto conserva el modo "fixed", aunque su
   viewport mida menos de 769px. En Crear publicación se usa todo el ancho
   útil y se eliminan los restos laterales de la columna de sugerencias. */
@media (max-width:768px){
    #key.fx169 > #createpost.fixed-createpost.pg{
        left:0!important;right:0!important;width:100%!important;
        padding:10px 14px!important;box-sizing:border-box!important;
        overflow-x:hidden!important;
    }
    #createpost.fixed-createpost.cp-editor-step{
        width:100%!important;max-width:100%!important;height:100%!important;
        display:flex!important;flex-direction:column!important;align-items:stretch!important;
        gap:clamp(7px,1.2dvh,11px)!important;
    }
    #createpost.fixed-createpost.cp-editor-step > .cp-middle,
    #createpost.fixed-createpost.cp-editor-step > .cp-collage-tabs,
    #createpost.fixed-createpost.cp-editor-step > .fixed-cpnav.cp-designs-nav,
    #createpost.fixed-createpost.cp-editor-step > .fixed-cpb.pB.cp-bottom{
        width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;
    }
    #createpost.fixed-createpost.cp-editor-step > .cp-middle{
        height:auto!important;aspect-ratio:1/1!important;flex:0 1 auto!important;min-height:0!important;
    }
    #createpost.fixed-createpost.cp-editor-step > .fixed-cpnav.cp-designs-nav{
        min-height:0!important;height:auto!important;flex:1 1 96px!important;margin:0!important;
        padding-left:52px!important;padding-right:52px!important;box-sizing:border-box!important;
    }
    #createpost.fixed-createpost.cp-editor-step > .fixed-cpb.pB.cp-bottom{
        flex:0 0 auto!important;padding:7px 0 8px!important;
    }
}