/* ==========================================================
   BRINTAGE - ESCRITORIO PROPORCIONAL Y SIMETRICO
   2026-07-31

   Regla principal:
   - Barra superior, barra inferior y contenido comparten el mismo marco.
   - La columna derecha termina exactamente en el lateral derecho de las barras.
   - La columna de sugerencias queda dentro del mismo marco.
   - El ancho no crece indefinidamente en pantallas panoramicas.
   - No modifica el modo movil.
   ========================================================== */

@media (min-width:769px){
    :root{
        /*
           El ancho se resuelve por la ALTURA útil de la pantalla.
           Así el post/collage completo puede entrar entre las dos barras.
           - Pantallas bajas: el marco se compacta automáticamente.
           - Pantallas altas: crece progresivamente.
           - Nunca supera 1050px ni el ancho real de la ventana.

           1.54 representa la relación aproximada entre el marco completo
           (lateral + separación + feed) y la columna principal. Los 210px
           reservan barras, cabecera/acciones del post y respiración visual.
        */
        /*
           La columna izquierda conserva su medida visual original.
           La columna principal es la que se adapta a la altura disponible,
           para que un collage completo pueda entrar entre ambas barras.
           El marco total nunca supera 1050px y siempre contiene las dos columnas.
        */
        --bt-desktop-side: 400px;
        --bt-desktop-gap: 15px;
        --bt-desktop-main: clamp(420px, calc(100dvh - 210px), 635px);
        --bt-desktop-shell: min(
            1050px,
            calc(100vw - 28px),
            calc(var(--bt-desktop-side) + var(--bt-desktop-gap) + var(--bt-desktop-main))
        );
        --bt-desktop-edge: max(14px, calc((100vw - var(--bt-desktop-shell)) / 2));
        --bt-desktop-main-left: calc(var(--bt-desktop-edge) + var(--bt-desktop-side) + var(--bt-desktop-gap));
    }

    /* Marco exterior unico: las dos barras siempre coinciden. */
    #bop.bar-top.ce169,
    #bom.bar-bottom.ce169,
    .bar-top.ce169,
    .bar-bottom.ce169,
    #window .chat-top.fixed-wto,
    .chat-top.fixed-wto{
        left:var(--bt-desktop-edge)!important;
        right:auto!important;
        width:var(--bt-desktop-shell)!important;
        max-width:var(--bt-desktop-shell)!important;
        margin:0!important;
        box-sizing:border-box!important;
    }

    /* Columna lateral de sugerencias: contenida dentro del marco. */
    #ads{
        position:fixed!important;
        top:64px!important;
        left:var(--bt-desktop-edge)!important;
        width:var(--bt-desktop-side)!important;
        max-width:var(--bt-desktop-side)!important;
        padding:0 12px 0 8px!important;
        box-sizing:border-box!important;
    }

    /* Regla madre para todas las secciones de la derecha. */
    #key.fx169 > .pg,
    #key > .pg{
        box-sizing:border-box!important;
    }

    #key.fx169 > .pg{
        padding-left:var(--bt-desktop-main-left)!important;
        padding-right:var(--bt-desktop-edge)!important;
    }

    /* Perfiles, notificaciones y vistas que tenian porcentajes propios. */
    body.bt-profile #key > .pg,
    body.bt-profile #key > .pg.us,
    body.bt-profile #key.fx169 > .pg,
    body.bt-profile #key.fx169 > .pg.us,
    #key.fx169 > #notifications.pg.na{
        padding-left:var(--bt-desktop-main-left)!important;
        padding-right:var(--bt-desktop-edge)!important;
        box-sizing:border-box!important;
    }

    /* Todo bloque principal ocupa exactamente la columna derecha disponible. */
    #key.fx169 > .pg > .post,
    #key.fx169 > .pg > .ca,
    #key.fx169 > .pg > .d-dab,
    #key.fx169 > .pg > .d-cover,
    #key.fx169 > .pg > .us-menu,
    #key.fx169 > .pg > .se-index,
    #key.fx169 > .pg > .br-ad-feed,
    #settings,
    #advertising,
    #notifications,
    #messages,
    #search,
    #online,
    #favorite,
    #top,
    #following,
    #public{
        max-width:100%!important;
        box-sizing:border-box!important;
    }

    /* Evita desplazamientos laterales heredados en perfil. */
    body.bt-profile .d-dab,
    body.bt-profile .d-cover,
    body.bt-profile .ca,
    body.bt-profile .post{
        width:100%!important;
        max-width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
    }

    body.bt-profile .d-menu{
        left:7%!important;
        right:7%!important;
        width:auto!important;
    }

    /* Configuracion: simetria y ancho completo de la columna. */
    #settings .ps,
    #settings .us-menu{
        width:100%!important;
        max-width:100%!important;
        margin-left:auto!important;
        margin-right:auto!important;
        box-sizing:border-box!important;
    }

    #settings .settings-menu-row{
        width:calc(100% - 8px)!important;
        max-width:none!important;
        margin-left:4px!important;
        margin-right:4px!important;
        box-sizing:border-box!important;
    }

    /* Crear anuncio: conserva dos columnas sin superponer campos. */
    #advertising.ads-settings-page{
        width:100%!important;
        max-width:100%!important;
        padding:18px 12px 58px!important;
        overflow-x:hidden!important;
    }

    .ads-editor-top,
    .ads-inline-notice,
    .ads-editor-grid,
    .ads-campaigns-section{
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }

    .ads-editor-top{
        gap:12px!important;
    }

    .ads-editor-top h1{
        font-size:30px!important;
    }

    .ads-form-card{
        padding:18px!important;
        overflow:hidden!important;
    }

    .ads-form-primary-grid{
        grid-template-columns:minmax(0,1.35fr) minmax(145px,.65fr)!important;
        gap:14px!important;
    }

    .ads-form-secondary-grid{
        grid-template-columns:minmax(0,1.25fr) minmax(150px,.75fr)!important;
        gap:14px!important;
    }

    .ads-form-options-grid{
        grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
        gap:14px!important;
    }

    .ads-form-primary-grid .ads-field,
    .ads-form-secondary-grid .ads-field,
    .ads-form-options-grid .ads-field,
    .ads-form-copy-column,
    .ads-image-field{
        min-width:0!important;
    }

    .ads-field input,
    .ads-field textarea,
    .ads-field select{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }

    .ads-description-field textarea{
        min-height:150px!important;
        overflow-y:auto!important;
    }

    .ads-image-picker{
        min-width:0!important;
        width:100%!important;
        box-sizing:border-box!important;
    }

    .ads-choice-grid{
        min-width:0!important;
    }

    .ads-choice-grid button{
        min-width:0!important;
        padding-left:5px!important;
        padding-right:5px!important;
    }

    /* Feed patrocinado y collages nunca exceden la columna derecha. */
    .br-ad-feed,
    .post,
    .collage,
    .cp-desings{
        max-width:100%!important;
        box-sizing:border-box!important;
    }

    /* Buscadores y encabezados especiales alineados con la columna derecha. */
    .bar-top.ce169.messages-top .fixed-psi,
    .bar-top.ce169.messages-top .fixed-ptt,
    .bar-top.ce169.messages-top .fixed-stx,
    .bar-top.ce169.messages-top #s-key.fixed-stx,
    .bar-top.ce169.search-top .fixed-stx,
    .bar-top.ce169.search-top #s-key.fixed-stx{
        left:calc(var(--bt-desktop-side) + var(--bt-desktop-gap))!important;
        right:24px!important;
        width:auto!important;
        box-sizing:border-box!important;
    }
}

/* Desktop angosto: reduce solamente la columna lateral y los espacios.
   El ancho general sigue siendo calculado por altura, no queda fijado. */
@media (min-width:769px) and (max-width:960px){
    :root{
        --bt-desktop-side: 360px;
        --bt-desktop-gap: 12px;
        --bt-desktop-main: clamp(380px, calc(100dvh - 198px), 560px);
        --bt-desktop-shell:min(
            1050px,
            calc(100vw - 18px),
            calc(var(--bt-desktop-side) + var(--bt-desktop-gap) + var(--bt-desktop-main))
        );
        --bt-desktop-edge:max(9px, calc((100vw - var(--bt-desktop-shell)) / 2));
    }

    #ads{padding-left:5px!important;padding-right:9px!important;}

    .ads-form-card{padding:15px!important;}
    .ads-form-primary-grid,
    .ads-form-secondary-grid,
    .ads-form-options-grid{gap:11px!important;}
    .ads-editor-top h1{font-size:27px!important;}
}

/* Pantallas especialmente bajas: deja más espacio vertical al collage. */
@media (min-width:769px) and (max-height:800px){
    :root{
        --bt-desktop-main: clamp(380px, calc(100dvh - 220px), 560px);
        --bt-desktop-shell:min(
            1050px,
            calc(100vw - 22px),
            calc(var(--bt-desktop-side) + var(--bt-desktop-gap) + var(--bt-desktop-main))
        );
        --bt-desktop-edge:max(11px, calc((100vw - var(--bt-desktop-shell)) / 2));
    }

    #ads{top:58px!important;}
}


/* Ventanas de escritorio muy angostas: mantiene todo dentro de las barras
   sin permitir que la columna izquierda sobresalga. */
@media (min-width:769px) and (max-width:840px){
    :root{
        --bt-desktop-side: 330px;
        --bt-desktop-gap: 10px;
        --bt-desktop-main: calc(100vw - 368px);
        --bt-desktop-shell: calc(100vw - 18px);
        --bt-desktop-edge: 9px;
    }
}

/* ==========================================================
   AJUSTES FINALES DE CONSISTENCIA — 2026-08-01
   - Sugerencias realmente fijas: nunca acompañan el scroll del feed.
   - Todas las barras internas respetan el mismo marco adaptativo.
   - Mensajes y chat se alinean con la columna principal derecha.
   ========================================================== */
@media (min-width:769px){
    /* La columna izquierda queda inmóvil; únicamente desplaza la vista derecha. */
    #ads{
        position:fixed!important;
        left:var(--bt-desktop-edge)!important;
        top:calc(var(--bt-app-top, 50px) + 14px)!important;
        bottom:auto!important;
        width:var(--bt-desktop-side)!important;
        max-width:var(--bt-desktop-side)!important;
        transform:none!important;
        margin:0!important;
        overflow:visible!important;
        z-index:8!important;
    }

    /* El marco exterior es único para absolutamente todas las barras. */
    #bop.bar-top.ce169,
    #bom.bar-bottom.ce169,
    body.bt-chat #window .chat-top.fixed-wto,
    body.bt-chat .chat-top.fixed-wto{
        left:var(--bt-desktop-edge)!important;
        right:auto!important;
        width:var(--bt-desktop-shell)!important;
        max-width:var(--bt-desktop-shell)!important;
        min-width:0!important;
        margin-left:0!important;
        margin-right:0!important;
        box-sizing:border-box!important;
    }

    /* Mensajes: flecha, título y buscador comienzan exactamente donde comienza
       la columna derecha y terminan en el borde derecho del marco. */
    body.bt-messages #bop.bar-top.ce169.messages-top .fixed-psi{
        left:calc(var(--bt-desktop-side) + var(--bt-desktop-gap) + 12px)!important;
        right:auto!important;
    }
    body.bt-messages #bop.bar-top.ce169.messages-top .fixed-ptt{
        left:calc(var(--bt-desktop-side) + var(--bt-desktop-gap) + 48px)!important;
        right:18px!important;
        width:auto!important;
    }
    body.bt-messages #bop.bar-top.ce169.messages-top .fixed-stx,
    body.bt-messages #bop.bar-top.ce169.messages-top #s-key.fixed-stx{
        left:calc(var(--bt-desktop-side) + var(--bt-desktop-gap) + 12px)!important;
        right:18px!important;
        width:auto!important;
        max-width:none!important;
    }

    /* Buscadores y encabezados especiales comparten la misma columna derecha. */
    body.bt-search #bop.bar-top.ce169.search-top .fixed-stx,
    body.bt-search #bop.bar-top.ce169.search-top #s-key.fixed-stx,
    #bop.bar-top.ce169.top-weekly-bar .fixed-stx,
    #bop.bar-top.ce169.top-weekly-bar #s-key.fixed-stx{
        left:calc(var(--bt-desktop-side) + var(--bt-desktop-gap) + 12px)!important;
        right:18px!important;
        width:auto!important;
        max-width:none!important;
    }

    /* Chat individual: su cabecera y pie quedan dentro del mismo marco general. */
    body.bt-chat #window .chat-top.fixed-wto,
    body.bt-chat .chat-top.fixed-wto{
        position:fixed!important;
        top:0!important;
        overflow:hidden!important;
    }
    body.bt-chat #window .chat-top .fixed-aling,
    body.bt-chat .chat-top .fixed-aling{
        box-sizing:border-box!important;
        width:100%!important;
        max-width:100%!important;
    }
    body.bt-chat #window .w-bottom,
    body.bt-chat .w-bottom{
        left:var(--bt-desktop-main-left)!important;
        right:var(--bt-desktop-edge)!important;
        width:auto!important;
        max-width:none!important;
        box-sizing:border-box!important;
    }

    /* Ninguna pantalla secundaria puede crear un ancho paralelo al marco. */
    body.bt-sub #key,
    body.bt-messages #key,
    body.bt-search #key,
    body.bt-notifications #key,
    body.bt-chat #key{
        left:0!important;
        right:0!important;
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }
}

/* ==========================================================
   BRINTAGE — CHAT ALINEADO + SUGERENCIAS ANIMADAS (2026-08-01)
   - La flecha, avatar, nombre y menú del chat arrancan exactamente
     en la columna derecha, igual que Mensajes directos.
   - Sugerencias acompaña suavemente la altura real de cada cabecera.
   - En chat baja por debajo de la barra del usuario y al salir vuelve
     a comprimirse, sin desplazarse con el scroll.
   ========================================================== */
@media (min-width:769px){
    /* Movimiento vertical suave al entrar/salir de cualquier sección. */
    #ads{
        transition:top .32s cubic-bezier(.22,.61,.36,1),
                   transform .32s cubic-bezier(.22,.61,.36,1)!important;
        will-change:top,transform;
    }

    /* En el chat la cabecera propia reemplaza a #bop: sugerencias debe
       quedar debajo de esa cabecera, no detrás ni superpuesta. */
    body.bt-chat #ads{
        top:calc(var(--bt-chat-top-real, 64px) + 14px)!important;
    }

    /* Quita el margin-left:38% heredado de chat.css y construye la misma
       guía horizontal que Mensajes directos dentro del marco completo. */
    body.bt-chat #window .chat-top .fixed-aling,
    body.bt-chat .chat-top .fixed-aling{
        margin:0!important;
        padding-top:12px!important;
        padding-right:12px!important;
        padding-bottom:12px!important;
        padding-left:calc(var(--bt-desktop-side) + var(--bt-desktop-gap) + 12px)!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
        align-items:center!important;
    }

    /* Medidas y separación equivalentes al encabezado de Mensajes. */
    body.bt-chat #window .chat-top .w-arrow,
    body.bt-chat .chat-top .w-arrow{
        flex:0 0 40px!important;
        width:40px!important;
        height:40px!important;
        margin:0 4px 0 0!important;
        background-size:45% 45%!important;
    }

    body.bt-chat #window .chat-top .chat-user,
    body.bt-chat .chat-top .chat-user{
        flex:1 1 auto!important;
        min-width:0!important;
        width:auto!important;
        display:flex!important;
        align-items:center!important;
    }

    body.bt-chat #window .chat-top .w-user-imge,
    body.bt-chat .chat-top .w-user-imge{
        flex:0 0 40px!important;
        margin:0 12px 0 0!important;
    }

    body.bt-chat #window .chat-top .w-user-table,
    body.bt-chat .chat-top .w-user-table{
        min-width:0!important;
        overflow:hidden!important;
    }

    body.bt-chat #window .chat-top .w-user-middle,
    body.bt-chat .chat-top .w-user-middle{
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    body.bt-chat #window .chat-top .w-options,
    body.bt-chat .chat-top .w-options{
        flex:0 0 40px!important;
        width:40px!important;
        height:40px!important;
        margin-left:8px!important;
        background-size:45% 45%!important;
    }
}

/* ==========================================================
   BRINTAGE - PULIDO FINAL DE SETTINGS (2026-08-01)
   Se aplica en escritorio y móvil.
   ========================================================== */

/* Encabezados de cada subsección: altura uniforme y centrado vertical real. */
#settings .se-top{
    box-sizing:border-box!important;
    min-height:58px!important;
    padding:0 18px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1.25!important;
    text-align:center!important;
}

/* Ojos de contraseña siempre dentro del campo, con el mismo margen. */
#settings .sb-input{
    position:relative!important;
    width:90%!important;
    margin-left:5%!important;
    box-sizing:border-box!important;
}
#settings .sb-input .se-input{
    width:100%!important;
    margin-left:0!important;
    padding-right:48px!important;
    box-sizing:border-box!important;
}
#settings .sb-input > a.is,
#settings .sb-input > a.ih{
    position:absolute!important;
    top:50%!important;
    right:15px!important;
    bottom:auto!important;
    width:22px!important;
    height:22px!important;
    margin:0!important;
    transform:translateY(-50%)!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    background-size:21px 21px!important;
    opacity:.78!important;
    z-index:3!important;
}

/* Tarjeta profesional para borrar historial. */
#settings .history-clear-card{
    min-height:88px!important;
    padding:16px 58px 16px 68px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    box-sizing:border-box!important;
}
#settings .history-clear-icon{
    position:absolute!important;
    left:16px!important;
    top:50%!important;
    width:38px!important;
    height:38px!important;
    transform:translateY(-50%)!important;
    border:1px solid #dceafd!important;
    border-radius:11px!important;
    background:#f0f6ff url('../icos/history-clear.svg') center/23px no-repeat!important;
}
#settings .history-clear-copy{
    min-width:0!important;
    width:100%!important;
}
#settings .history-clear-card .spA,
#settings .history-clear-card .spB{
    margin:0!important;
    padding:0!important;
}
#settings .history-clear-card .spB{
    margin-top:7px!important;
}
#settings .history-clear-arrow{
    position:absolute!important;
    right:18px!important;
    top:50%!important;
    width:15px!important;
    transform:translateY(-50%)!important;
    opacity:.72!important;
}

/* Cerrar sesión: tarjeta roja coherente con Settings, sin superposiciones. */
#settings #menu{
    padding-bottom:18px!important;
    box-sizing:border-box!important;
}
#settings .us-menu{
    padding-bottom:8px!important;
}
#settings .settings-logout-row,
#settings .fixed-uex.settings-logout-row,
#settings .mobile-uex.settings-logout-row{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:calc(100% - 16px)!important;
    min-height:66px!important;
    margin:18px 8px 4px!important;
    padding:13px 52px 13px 62px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    border:1px solid #ffc9ce!important;
    border-radius:17px!important;
    background:linear-gradient(135deg,#fffafb 0%,#fff2f4 100%)!important;
    color:#ef4650!important;
    font-weight:700!important;
    text-align:center!important;
    box-shadow:0 8px 22px rgba(239,70,80,.07)!important;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
#settings .settings-logout-row:hover{
    transform:translateY(-1px)!important;
    border-color:#ffadb5!important;
    background:#fff7f8!important;
    box-shadow:0 11px 26px rgba(239,70,80,.11)!important;
}
#settings .settings-logout-icon{
    position:absolute!important;
    left:15px!important;
    top:50%!important;
    width:36px!important;
    height:36px!important;
    transform:translateY(-50%)!important;
    border:1px solid #ffcbd0!important;
    border-radius:11px!important;
    background:#ffe9ec url('../icos/logout-red.svg') center/22px no-repeat!important;
}
#settings .settings-logout-label{
    display:block!important;
    white-space:nowrap!important;
}
#settings .settings-logout-arrow{
    position:absolute!important;
    right:18px!important;
    top:50%!important;
    width:16px!important;
    transform:translateY(-50%)!important;
    filter:invert(41%) sepia(98%) saturate(1648%) hue-rotate(326deg) brightness(101%) contrast(88%)!important;
}

@media (max-width:768px){
    #settings .se-top{
        min-height:54px!important;
        padding:0 14px!important;
    }
    #settings .sb-input > a.is,
    #settings .sb-input > a.ih{
        right:14px!important;
        width:23px!important;
        height:23px!important;
    }
    #settings .history-clear-card{
        min-height:84px!important;
        padding-left:64px!important;
    }
    #settings .settings-logout-row,
    #settings .fixed-uex.settings-logout-row,
    #settings .mobile-uex.settings-logout-row{
        min-height:62px!important;
        margin-top:14px!important;
    }
}