/* =========================================================
   BANANA FRIENDS · CATEGORÍAS DE PLANES
   Módulo independiente de las categorías de Grupos.
========================================================= */

body.bf-page-planes{
    --pl-filter-accent:#ff5a12;
    --pl-filter-ink:#18181b;
    --pl-filter-muted:#73737a;
    --pl-filter-line:rgba(24,24,27,.09);
}

body.bf-page-planes > .app > .pl-category-filter,
body.bf-page-planes > .app > .pl-filter-empty{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

.pl-category-filter{
    position:relative;
    margin:0;
    padding:10px 12px 9px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.94);
    border-radius:22px;
    background:rgba(255,255,255,.79);
    box-shadow:0 14px 38px rgba(37,29,25,.065), inset 0 1px 0 rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(22px) saturate(155%);
    backdrop-filter:blur(22px) saturate(155%);
}

.pl-category-scroll{
    display:flex;
    width:100%;
    min-width:0;
    align-items:center;
    gap:8px;
    padding:1px 1px 3px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-inline:10px;
    -webkit-overflow-scrolling:touch;
}

.pl-category-scroll::-webkit-scrollbar{display:none;}

.pl-category-chip{
    min-width:max-content;
    min-height:42px;
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 13px;
    border:1px solid rgba(24,24,27,.09);
    border-radius:999px;
    background:#f4f4f5;
    color:#505057;
    font:inherit;
    font-size:12px;
    font-weight:790;
    line-height:1;
    cursor:pointer;
    touch-action:manipulation;
    scroll-snap-align:center;
    transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}

.pl-category-chip:hover{
    border-color:rgba(24,24,27,.17);
    background:#fff;
}

.pl-category-chip:active{transform:scale(.97);}

.pl-category-chip:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(255,90,18,.16);
}

.pl-category-chip.is-active{
    border-color:#111;
    background:#111;
    color:#fff;
    box-shadow:0 8px 20px rgba(17,17,17,.18);
}

.pl-category-chip--mine:not(.is-active){
    border-color:rgba(255,90,18,.2);
    background:rgba(255,90,18,.08);
    color:#a43b0a;
}

.pl-category-chip--finished:not(.is-active){
    border-color:rgba(72,72,78,.14);
    background:#ececef;
    color:#4b4b51;
}

.pl-category-count{
    min-width:20px;
    height:20px;
    display:inline-grid;
    place-items:center;
    padding:0 5px;
    border-radius:999px;
    background:rgba(0,0,0,.07);
    color:inherit;
    font-size:10px;
    font-variant-numeric:tabular-nums;
    line-height:1;
}

.pl-category-chip.is-active .pl-category-count{
    background:rgba(255,255,255,.18);
}

.pl-category-result{
    margin:7px 4px 0;
    color:#85858b;
    font-size:11px;
    font-weight:660;
    line-height:1.35;
}

/* Ocultación fuerte: otras hojas fuerzan display en las tarjetas. */
body.bf-page-planes > .app > .card[hidden],
body.bf-page-planes > .app > .card.is-plan-filtered-out{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

.pl-filter-empty{
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:28px 20px;
    border:1px solid rgba(24,24,27,.08);
    border-radius:26px;
    background:rgba(255,255,255,.86);
    box-shadow:0 18px 46px rgba(37,29,25,.07);
    text-align:center;
}

.pl-filter-empty[hidden]{display:none !important;}

.pl-filter-empty-title{
    color:var(--pl-filter-ink);
    font-size:17px;
    font-weight:850;
    letter-spacing:-.02em;
}

.pl-filter-empty-copy{
    max-width:460px;
    margin-top:7px;
    color:var(--pl-filter-muted);
    font-size:13px;
    line-height:1.5;
}

.pl-filter-empty-action{
    min-height:44px;
    margin-top:16px;
    padding:0 20px;
    border:0;
    border-radius:999px;
    background:#111;
    color:#fff;
    font:inherit;
    font-size:12px;
    font-weight:820;
    cursor:pointer;
}

body.bf-page-planes .meta-title-row{
    flex-wrap:wrap;
    justify-content:flex-start !important;
    align-items:center !important;
}

body.bf-page-planes .meta-title-row .meta-title{
    flex:1 1 220px;
    min-width:0;
}

body.bf-page-planes .plan-category-badge{
    min-height:26px;
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    gap:5px;
    padding:0 9px;
    border:1px solid rgba(24,24,27,.08);
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:#555159;
    font-size:10px;
    font-weight:790;
    line-height:1;
    white-space:nowrap;
    box-shadow:0 5px 14px rgba(24,24,27,.06);
}
body.bf-page-planes .plan-category-badge-icon{
    width:22px;
    height:22px;
    flex:0 0 22px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#f4f4f5;
    color:#44403c;
}

body.bf-page-planes .plan-category-badge-icon .plan-category-symbol{
    width:14px;
    height:14px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

body.bf-page-planes .plan-category-badge-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

body.bf-page-planes .plan-category-badge[data-plan-category-badge="amistad"] .plan-category-badge-icon{background:#eaf3ff;color:#2868c7;}
body.bf-page-planes .plan-category-badge[data-plan-category-badge="deporte"] .plan-category-badge-icon{background:#e7f7ee;color:#218252;}
body.bf-page-planes .plan-category-badge[data-plan-category-badge="fiesta"] .plan-category-badge-icon{background:#ffeaf3;color:#c83d7a;}
body.bf-page-planes .plan-category-badge[data-plan-category-badge="viajes"] .plan-category-badge-icon{background:#e5f4ff;color:#1476a8;}
body.bf-page-planes .plan-category-badge[data-plan-category-badge="comida"] .plan-category-badge-icon{background:#fff0dc;color:#b75b16;}
body.bf-page-planes .plan-category-badge[data-plan-category-badge="cultura"] .plan-category-badge-icon{background:#efe8ff;color:#7250b5;}
body.bf-page-planes .plan-category-badge[data-plan-category-badge="otros"] .plan-category-badge-icon{background:#eeeeef;color:#55515a;}


/* =========================================================
   CREAR PLAN · ELECCIÓN DE CATEGORÍA
========================================================= */
body.bf-page-planes #createSheet .plan-category-field.has-error{
    padding:8px;
    border-radius:18px;
    background:rgba(198,45,45,.055);
    box-shadow:0 0 0 1px rgba(198,45,45,.18);
}

body.bf-page-planes #createSheet .plan-category-choice{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    padding:2px;
}

body.bf-page-planes #createSheet .plan-category-option{
    position:relative;
    display:block;
    min-width:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

body.bf-page-planes #createSheet .plan-category-option input{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    min-width:1px !important;
    min-height:1px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    opacity:0;
    pointer-events:none;
}

body.bf-page-planes #createSheet .plan-category-option-ui{
    position:relative;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 34px 11px 11px;
    border:1px solid rgba(24,24,27,.09);
    border-radius:15px;
    background:rgba(248,247,245,.75);
    color:#484542;
    transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}

body.bf-page-planes #createSheet .plan-category-option:hover .plan-category-option-ui{
    border-color:rgba(24,24,27,.17);
    background:#fff;
    transform:translateY(-1px);
}

body.bf-page-planes #createSheet .plan-category-option input:focus-visible + .plan-category-option-ui{
    box-shadow:0 0 0 4px rgba(255,90,18,.15);
}

body.bf-page-planes #createSheet .plan-category-option input:checked + .plan-category-option-ui{
    border-color:rgba(255,90,18,.46);
    background:linear-gradient(145deg,rgba(255,246,240,.98),rgba(255,255,255,.98));
    color:#8e320a;
    box-shadow:0 8px 22px rgba(255,90,18,.09);
}

body.bf-page-planes #createSheet .plan-category-option-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(24,24,27,.07);
    border-radius:12px;
    background:linear-gradient(145deg,#fff,#f5f5f4);
    color:#34312f;
    box-shadow:0 7px 18px rgba(18,18,18,.08),inset 0 1px 0 rgba(255,255,255,.9);
    line-height:1;
    transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}

body.bf-page-planes #createSheet .plan-category-symbol{
    width:20px;
    height:20px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

body.bf-page-planes #createSheet .plan-category-option:hover .plan-category-option-icon,
body.bf-page-planes #createSheet .plan-category-option input:checked + .plan-category-option-ui .plan-category-option-icon{
    transform:translateY(-1px) scale(1.03);
    box-shadow:0 9px 20px rgba(18,18,18,.11),inset 0 1px 0 rgba(255,255,255,.92);
}

body.bf-page-planes #createSheet .plan-category-option[data-category="amistad"] .plan-category-option-icon{background:linear-gradient(145deg,#f0f7ff,#e8f1ff);color:#2868c7;}
body.bf-page-planes #createSheet .plan-category-option[data-category="deporte"] .plan-category-option-icon{background:linear-gradient(145deg,#effbf4,#e4f7ec);color:#218252;}
body.bf-page-planes #createSheet .plan-category-option[data-category="fiesta"] .plan-category-option-icon{background:linear-gradient(145deg,#fff2f8,#ffe8f3);color:#c83d7a;}
body.bf-page-planes #createSheet .plan-category-option[data-category="viajes"] .plan-category-option-icon{background:linear-gradient(145deg,#eef8ff,#e1f2ff);color:#1476a8;}
body.bf-page-planes #createSheet .plan-category-option[data-category="comida"] .plan-category-option-icon{background:linear-gradient(145deg,#fff7ec,#ffedd5);color:#b75b16;}
body.bf-page-planes #createSheet .plan-category-option[data-category="cultura"] .plan-category-option-icon{background:linear-gradient(145deg,#f6f1ff,#eee5ff);color:#7250b5;}
body.bf-page-planes #createSheet .plan-category-option[data-category="otros"] .plan-category-option-icon{background:linear-gradient(145deg,#f5f5f5,#ececec);color:#55515a;}


body.bf-page-planes #createSheet #createRepeticiones[readonly]{
    cursor:not-allowed;
    background:rgba(246,246,245,.96);
    color:#625d58;
    border-color:rgba(24,24,27,.08);
    box-shadow:none;
}

body.bf-page-planes #createSheet #createRepeticiones[readonly]:focus{
    border-color:rgba(24,24,27,.08);
    box-shadow:none;
}
body.bf-page-planes #createSheet .plan-schedule-count-help{
    margin-top:6px;
    line-height:1.45;
    color:#716b66;
}

body.bf-page-planes #createSheet .plan-category-option-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.76rem;
    font-weight:820;
}

body.bf-page-planes #createSheet .plan-category-option-check{
    position:absolute;
    top:50%;
    right:11px;
    width:18px;
    height:18px;
    padding:3px;
    border-radius:999px;
    background:var(--pl-filter-accent);
    opacity:0;
    transform:translateY(-50%) scale(.72);
    fill:none;
    stroke:#fff;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:opacity .16s ease,transform .16s ease;
}

body.bf-page-planes #createSheet .plan-category-option input:checked + .plan-category-option-ui .plan-category-option-check{
    opacity:1;
    transform:translateY(-50%) scale(1);
}

@media (max-width:940px){
    body.bf-page-planes > .app > .pl-category-filter,
    body.bf-page-planes > .app > .pl-filter-empty{
        grid-column:1 !important;
    }
}

@media (max-width:700px){
    .pl-category-filter{
        margin:0;
        padding:8px 0 8px;
        border-radius:18px;
    }

    .pl-category-scroll{
        gap:7px;
        padding:2px 12px 4px;
        scroll-padding-inline:12px;
    }

    .pl-category-chip{
        min-height:44px;
        padding-inline:13px;
        font-size:12px;
    }

    .pl-category-result{
        margin:5px 14px 0;
        font-size:10.5px;
    }

    .pl-filter-empty{
        min-height:155px;
        padding:24px 16px;
        border-radius:22px;
    }

    body.bf-page-planes .meta-title-row .meta-title{
        flex:1 1 100%;
    }

    body.bf-page-planes .plan-category-badge{
        min-height:24px;
        padding-inline:8px;
    }

    body.bf-page-planes #createSheet .plan-category-choice{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    body.bf-page-planes #createSheet .plan-category-option-ui{
        min-height:62px;
        padding:9px 31px 9px 9px;
        border-radius:14px;
    }

    body.bf-page-planes #createSheet .plan-category-option-icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    body.bf-page-planes #createSheet .plan-category-symbol{
        width:19px;
        height:19px;
    }

    body.bf-page-planes #createSheet .plan-category-option-name{
        font-size:.73rem;
    }
}

@media (max-width:390px){
    .pl-category-filter{
        margin-left:-2px;
        margin-right:-2px;
        width:calc(100% + 4px) !important;
    }

    .pl-category-chip{padding-inline:12px;}
    .pl-category-count{min-width:19px;height:19px;}

    body.bf-page-planes #createSheet .plan-category-option-ui{
        gap:7px;
        padding-left:8px;
    }
}

@media (prefers-reduced-motion:reduce){
    .pl-category-chip,
    body.bf-page-planes #createSheet .plan-category-option-ui,
    body.bf-page-planes #createSheet .plan-category-option-check{
        transition:none !important;
    }
}