/* ======================================================
   BANANA FRIENDS · GRUPOS EN PLANES
   Módulo aislado. No modifica las tarjetas ni modales de Planes.
====================================================== */

:root{
    --pg-orange:#ff5a12;
    --pg-orange-strong:#f04a00;
    --pg-ink:#101010;
    --pg-muted:#6d6d73;
    --pg-line:rgba(15,15,15,.10);
    --pg-soft:#f6f6f7;
    --pg-card:#fff;
    --pg-shadow:0 24px 70px rgba(16,16,16,.14);
}

body.pg-lock{
    overflow:hidden !important;
    overscroll-behavior:none;
    touch-action:none;
}

.pg-wrap{
    width:100%;
    padding:0 0 44px;
}

.pg-head{
    min-height:126px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:0 0 18px;
    padding:22px 24px;
    border:1px solid rgba(15,15,15,.08);
    border-radius:26px;
    background:rgba(255,255,255,.76);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 18px 48px rgba(18,18,18,.07);
}

.pg-head-copy{
    min-width:0;
    align-self:center;
}

.pg-title{
    margin-top:5px;
    color:var(--pg-ink);
    font-size:clamp(24px,3vw,34px);
    line-height:1.05;
    font-weight:850;
    letter-spacing:-.045em;
}

.pg-subtitle{
    margin-top:8px;
    max-width:590px;
    color:var(--pg-muted);
    font-size:14px;
    line-height:1.5;
}

.pg-create-trigger{
    align-self:center !important;
    margin:0 !important;
    flex:0 0 auto;
}

.pg-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.pg-empty{
    padding:28px 18px;
    border:1px solid var(--pg-line);
    border-radius:22px;
    background:#fff;
    color:var(--pg-muted);
    text-align:center;
    font-size:14px;
}

.pg-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
    padding:14px;
    border:1px solid var(--pg-line);
    border-radius:22px;
    background:rgba(255,255,255,.92);
    color:var(--pg-ink);
    text-decoration:none;
    box-shadow:0 12px 32px rgba(16,16,16,.055);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

@media (hover:hover){
    .pg-item:hover{
        transform:translateY(-2px);
        border-color:rgba(15,15,15,.18);
        box-shadow:0 18px 42px rgba(16,16,16,.09);
    }
}

.pg-avatar{
    width:58px;
    height:58px;
    flex:0 0 58px;
    border-radius:18px;
    object-fit:cover;
    background:#ececef;
    border:1px solid rgba(15,15,15,.07);
}

.pg-info{
    flex:1;
    min-width:0;
}

.pg-name{
    color:var(--pg-ink);
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.pg-desc{
    margin-top:4px;
    color:#606066;
    font-size:13px;
    line-height:1.35;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.pg-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:7px;
    color:#76767d;
    font-size:12px;
}

.pg-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 8px;
    border:1px solid rgba(15,15,15,.08);
    border-radius:999px;
    background:#f3f3f5;
    color:var(--pg-ink);
    font-size:11px;
    font-weight:800;
}

.pg-fav{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(15,15,15,.12);
    border-radius:999px;
    background:#fff;
    color:var(--pg-ink);
    cursor:pointer;
    transition:transform .15s ease,background .15s ease;
}

.pg-fav:active{transform:scale(.94)}
.pg-fav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;}
.pg-fav.active{background:#111;color:#fff;border-color:#111;}
.pg-fav.active svg{fill:currentColor;}

.pg-unread-dot{
    position:absolute;
    right:60px;
    top:17px;
    width:8px;
    height:8px;
    border-radius:999px;
    background:var(--pg-orange);
    box-shadow:0 0 0 4px rgba(255,90,18,.13);
}

/* ======================================================
   CREAR GRUPO · PANTALLA COMPLETA · PRODUCCIÓN
====================================================== */
html.pg-lock,
body.pg-lock{
    overflow:hidden !important;
    overscroll-behavior:none;
    touch-action:auto !important;
}

body.pg-lock{
    position:relative;
}

.app.pg-modal-open{
    overflow:hidden !important;
    overscroll-behavior:none !important;
}

.pg-sheet,
.pg-sheet *{
    box-sizing:border-box;
}

.pg-overlay{
    position:fixed;
    inset:0;
    z-index:1998;
    background:#f5f5f7;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.pg-overlay:not([hidden]){
    opacity:1;
    visibility:visible;
}

.pg-sheet{
    position:fixed;
    inset:0;
    z-index:1999;
    width:100vw;
    max-width:none !important;
    height:100vh;
    height:100dvh;
    max-height:none !important;
    margin:0 !important;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
    border:0 !important;
    border-radius:0 !important;
    background:
        radial-gradient(circle at 18% -10%,rgba(255,93,22,.10),transparent 34%),
        radial-gradient(circle at 90% 6%,rgba(255,190,135,.16),transparent 28%),
        #f5f5f7;
    color:var(--pg-ink);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    pointer-events:none;
    transition:opacity .2s ease,transform .28s cubic-bezier(.22,.78,.24,1),visibility .2s ease;
}

.pg-sheet.open{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
}

.pg-sheet-head{
    position:relative;
    z-index:8;
    width:100%;
    padding-top:env(safe-area-inset-top);
    border-bottom:1px solid rgba(15,15,15,.075);
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(26px) saturate(170%);
    backdrop-filter:blur(26px) saturate(170%);
}

.pg-sheet-head-inner{
    width:min(920px,calc(100% - 48px));
    min-height:92px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    padding:14px 0;
}

.pg-sheet-heading{
    min-width:0;
}

.pg-sheet-kicker{
    display:block;
    color:var(--pg-orange-strong);
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.15em;
}

.pg-sheet-title{
    margin:6px 0 0;
    color:#111;
    font-size:clamp(24px,3vw,33px);
    line-height:1.05;
    font-weight:880;
    letter-spacing:-.045em;
}

.pg-sheet-sub{
    margin:7px 0 0;
    max-width:630px;
    color:#6f6f75;
    font-size:13px;
    line-height:1.4;
}

.pg-close{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:#efeff1;
    color:#111;
    cursor:pointer;
    transition:transform .15s ease,background .15s ease;
}

.pg-close:hover{background:#e6e6e9;}
.pg-close:active{transform:scale(.93);}
.pg-close:disabled{opacity:.45;cursor:not-allowed;}
.pg-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;}

.pg-form{
    min-height:0;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    overflow:hidden;
}

.pg-form-scroll{
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    scrollbar-gutter:stable;
}

.pg-form-scroll:focus{outline:0;}

.pg-form-body{
    width:min(920px,calc(100% - 48px));
    margin:0 auto;
    display:grid;
    gap:16px;
    padding:24px 0 40px;
}

.pg-cover-card,
.pg-details-card,
.pg-option-card,
.pg-publish-note{
    border:1px solid rgba(15,15,15,.075);
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 50px rgba(20,20,24,.055);
}

.pg-cover-card{
    padding:10px;
    border-radius:28px;
}

.pg-cover-shell{
    position:relative;
    width:100%;
    aspect-ratio:16/7;
    min-height:300px;
    overflow:hidden;
    border-radius:20px;
    background:#171719;
    isolation:isolate;
}

.pg-preview{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transform:scale(1.001);
}

.pg-cover-shade{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.03) 42%,rgba(0,0,0,.62) 100%);
    pointer-events:none;
}

.pg-cover-top,
.pg-cover-bottom{
    position:absolute;
    left:0;
    right:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px;
}

.pg-cover-top{top:0;}
.pg-cover-bottom{bottom:0;align-items:flex-end;}

.pg-cover-label,
.pg-cover-format{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:32px;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(17,17,19,.42);
    color:#fff;
    font-size:10px;
    line-height:1;
    font-weight:850;
    letter-spacing:.03em;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

.pg-cover-label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.pg-cover-format{font-size:9px;color:rgba(255,255,255,.86);}

.pg-cover-copy{
    min-width:0;
    max-width:430px;
    display:flex;
    flex-direction:column;
    gap:5px;
    color:#fff;
}

.pg-cover-copy strong{
    font-size:20px;
    line-height:1.15;
    font-weight:850;
    letter-spacing:-.025em;
}

.pg-cover-copy span{
    color:rgba(255,255,255,.78);
    font-size:12px;
    line-height:1.4;
}

.pg-photo-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
}

.pg-cover-action{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:13px;
    background:rgba(18,18,20,.48);
    color:#fff;
    font:inherit;
    font-size:11px;
    font-weight:820;
    cursor:pointer;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    transition:transform .14s ease,background .14s ease;
}

.pg-cover-action:hover{background:rgba(18,18,20,.66);}
.pg-cover-action:active{transform:scale(.96);}
.pg-cover-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pg-cover-action-primary{background:#fff;color:#111;border-color:#fff;}
.pg-cover-action-primary:hover{background:#f4f4f4;}
.pg-cover-action-icon{width:42px;padding:0;border-radius:50%;}

.pg-file-help{
    margin:9px 7px 2px;
    color:#7b7b82;
    font-size:10px;
    line-height:1.4;
}

.pg-details-card{
    padding:24px;
    border-radius:28px;
}

.pg-section-heading{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:22px;
}

.pg-section-number{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(255,90,18,.10);
    color:var(--pg-orange-strong);
    font-size:10px;
    font-weight:900;
}

.pg-card-title{
    margin:0;
    color:#111;
    font-size:17px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:-.02em;
}

.pg-card-sub{
    margin:5px 0 0;
    color:#73737a;
    font-size:12px;
    line-height:1.45;
}

.pg-field-grid{display:grid;gap:20px;}
.pg-field{min-width:0;}

.pg-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:8px;
}

.pg-label-row label{
    color:#242428;
    font-size:12px;
    font-weight:830;
}

.pg-label-row strong{
    color:#8a8a91;
    font-size:10px;
    font-weight:760;
}

.pg-input-shell{position:relative;}

.pg-input-icon{
    position:absolute;
    left:15px;
    top:50%;
    z-index:1;
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    color:#77777e;
    transform:translateY(-50%);
    pointer-events:none;
}

.pg-input-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

.pg-field input,
.pg-field textarea{
    width:100%;
    min-width:0;
    border:1px solid rgba(15,15,15,.11);
    border-radius:16px;
    outline:0;
    background:#fafafa;
    color:#111;
    font:inherit;
    font-size:15px;
    line-height:1.45;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}

.pg-field input{
    height:54px;
    padding:0 16px 0 47px;
}

.pg-field textarea{
    min-height:165px;
    padding:15px 16px;
    resize:vertical;
}

.pg-field input::placeholder,
.pg-field textarea::placeholder{color:#a0a0a7;}

.pg-field input:focus,
.pg-field textarea:focus{
    border-color:rgba(255,90,18,.72);
    background:#fff;
    box-shadow:0 0 0 4px rgba(255,90,18,.09);
}

.pg-field input[aria-invalid="true"],
.pg-field textarea[aria-invalid="true"]{
    border-color:#c43a30;
    box-shadow:0 0 0 4px rgba(196,58,48,.08);
}

.pg-field-help{
    margin:7px 2px 0;
    color:#85858c;
    font-size:10px;
    line-height:1.4;
}

.pg-option-card{
    padding:18px 20px;
    border-radius:22px;
}

.pg-official-row{
    display:flex;
    align-items:center;
    gap:14px;
    cursor:pointer;
}

.pg-option-icon,
.pg-publish-note-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#f1f1f3;
    color:#111;
}

.pg-option-icon svg,
.pg-publish-note-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

.pg-official-copy{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.pg-official-copy strong{color:#111;font-size:13px;font-weight:830;}
.pg-official-copy small{color:#74747b;font-size:11px;line-height:1.4;}

.pg-switch{position:relative;width:48px;height:28px;flex:0 0 48px;}
.pg-switch input{position:absolute;opacity:0;pointer-events:none;}
.pg-switch span{position:absolute;inset:0;border-radius:999px;background:#d8d8dc;transition:background .18s ease;}
.pg-switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.17);transition:transform .18s ease;}
.pg-switch input:checked + span{background:var(--pg-orange);}
.pg-switch input:checked + span::after{transform:translateX(20px);}
.pg-switch input:focus-visible + span{box-shadow:0 0 0 4px rgba(255,90,18,.13);}

.pg-publish-note{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:18px 20px;
    border-radius:22px;
}

.pg-publish-note-icon{background:rgba(255,90,18,.09);color:var(--pg-orange-strong);}
.pg-publish-note strong{display:block;color:#202024;font-size:12px;font-weight:840;}
.pg-publish-note p{margin:5px 0 0;color:#74747b;font-size:11px;line-height:1.5;}

.pg-create-row{
    position:relative;
    z-index:9;
    width:100%;
    border-top:1px solid rgba(15,15,15,.075);
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(26px) saturate(170%);
    backdrop-filter:blur(26px) saturate(170%);
    padding-bottom:max(12px,env(safe-area-inset-bottom));
}

.pg-create-footer-inner{
    width:min(920px,calc(100% - 48px));
    min-height:76px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
    padding:11px 0 0;
}

.pg-status{
    flex:1;
    min-width:0;
    color:#66666d;
    font-size:11px;
    line-height:1.4;
    text-align:right;
}
.pg-status.is-error{color:#a52b21;}
.pg-status.is-success{color:#176b3c;}
.pg-status.is-loading{color:#35353a;}

.pg-send{
    min-width:178px;
    height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 20px;
    border:0;
    border-radius:15px;
    background:linear-gradient(135deg,#ff681f 0%,#f34a00 100%);
    color:#fff;
    font:inherit;
    font-size:13px;
    font-weight:860;
    box-shadow:0 13px 28px rgba(243,74,0,.21);
    cursor:pointer;
    transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease;
}
.pg-send:hover{box-shadow:0 16px 32px rgba(243,74,0,.26);}
.pg-send:active{transform:scale(.98);}
.pg-send:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}
.pg-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

.pg-cancel{display:none !important;}

@media (max-width:700px){
    .pg-wrap{padding-bottom:30px;}
    .pg-head{min-height:112px;gap:14px;padding:18px 16px;border-radius:22px;}
    .pg-title{font-size:25px;}
    .pg-subtitle{font-size:12px;line-height:1.4;}
    .pg-create-trigger{min-width:auto !important;white-space:nowrap;}

    .pg-sheet{
        height:100svh;
        height:100dvh;
        background:#f5f5f7;
    }

    .pg-sheet-head-inner,
    .pg-form-body,
    .pg-create-footer-inner{
        width:calc(100% - 28px);
    }

    .pg-sheet-head-inner{
        min-height:76px;
        gap:14px;
        padding:10px 0;
    }

    .pg-sheet-kicker{font-size:9px;}
    .pg-sheet-title{font-size:22px;letter-spacing:-.038em;}
    .pg-sheet-sub{display:none;}
    .pg-close{width:38px;height:38px;flex-basis:38px;}

    .pg-form-body{gap:12px;padding:14px 0 24px;}
    .pg-cover-card{padding:7px;border-radius:22px;}
    .pg-cover-shell{min-height:250px;aspect-ratio:4/3;border-radius:17px;}
    .pg-cover-top,.pg-cover-bottom{padding:13px;}
    .pg-cover-format{display:none;}
    .pg-cover-bottom{align-items:flex-end;gap:10px;}
    .pg-cover-copy{max-width:48%;}
    .pg-cover-copy strong{font-size:15px;}
    .pg-cover-copy span{display:none;}
    .pg-photo-actions{gap:6px;}
    .pg-cover-action{width:40px;height:40px;min-height:40px;padding:0;border-radius:12px;}
    .pg-cover-action span{display:none;}
    .pg-cover-action-icon{border-radius:50%;}
    .pg-file-help{margin:8px 5px 1px;font-size:9px;}

    .pg-details-card{padding:18px 16px;border-radius:22px;}
    .pg-section-heading{gap:11px;margin-bottom:18px;}
    .pg-section-number{width:32px;height:32px;flex-basis:32px;}
    .pg-card-title{font-size:15px;}
    .pg-card-sub{font-size:11px;}
    .pg-field-grid{gap:18px;}
    .pg-field input,.pg-field textarea{font-size:16px;}
    .pg-field input{height:52px;}
    .pg-field textarea{min-height:145px;resize:none;}
    .pg-option-card,.pg-publish-note{border-radius:20px;padding:16px;}

    .pg-create-footer-inner{
        min-height:68px;
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        gap:10px;
        padding-top:9px;
    }
    .pg-status{text-align:left;font-size:10px;}
    .pg-send{min-width:150px;height:48px;border-radius:14px;padding:0 16px;}
}

@media (max-width:470px){
    .pg-head{align-items:center;padding:16px 14px;}
    .pg-head-copy{max-width:58%;}
    .pg-title{font-size:22px;}
    .pg-subtitle{display:none;}
    .pg-create-trigger{padding-inline:13px !important;font-size:12px !important;}
    .pg-create-trigger svg{width:17px !important;height:17px !important;}
    .pg-item{padding:12px;gap:12px;border-radius:20px;}
    .pg-avatar{width:52px;height:52px;flex-basis:52px;border-radius:16px;}

    .pg-sheet-head-inner,
    .pg-form-body,
    .pg-create-footer-inner{width:calc(100% - 22px);}

    .pg-cover-shell{min-height:230px;}
    .pg-cover-copy{display:none;}
    .pg-cover-bottom{justify-content:flex-end;}
    .pg-cover-label{font-size:9px;}
    .pg-details-card{padding:16px 14px;}
    .pg-publish-note-icon{width:36px;height:36px;flex-basis:36px;}

    .pg-create-footer-inner{
        grid-template-columns:1fr;
        gap:6px;
        padding-top:8px;
    }
    .pg-status:empty{display:none;}
    .pg-status{text-align:center;min-height:0;}
    .pg-send{width:100%;min-width:0;height:50px;}
}

@media (prefers-reduced-motion:reduce){
    .pg-sheet,.pg-close,.pg-send,.pg-cover-action,.pg-item,.pg-fav{transition:none !important;}
}

/* ======================================================
   CREAR GRUPO · AISLAMIENTO TOTAL DE NAVEGACIÓN
   Al abrir el modal no debe verse ni ser interactiva
   ninguna barra o menú de la aplicación.
====================================================== */
body.pg-lock .bf-web-header,
body.pg-lock .bf-web-mobile-dock,
body.pg-lock .bf-web-mobile-menu,
body.pg-lock .pill-nav,
body.pg-lock .bottom-nav,
body.pg-lock > .header,
body.pg-lock .mobile-nav,
body.pg-lock .mobile-menu {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

body.pg-lock .pg-overlay,
body.pg-lock .pg-sheet {
    z-index:10000 !important;
}