@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;}