/*
* Sideboard: columna izquierda tipo red social (LinkedIn / Facebook)
* con los toggles y filtros de cada feed, en lugar de barras horizontales
* encima del contenido.
*
*
* {% include "components/sideboard/fab.html" %}
*
* En pantallas grandes la columna queda fija (sticky) a la izquierda; en móvil
* se abre como hoja inferior desde el botón flotante "Filtros".
*/
:root {
--gf-side-width: 320px;
--gf-side-accent: #1f9d3a;
--gf-side-accent-soft: #e8f6eb;
--gf-side-ink: #1a2733;
--gf-side-muted: #66788a;
--gf-side-line: #e4e9ee;
--gf-side-hover: #f2f5f8;
--gf-side-bubble: #e9eef3;
}
.gf-shell {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.gf-shell-main { min-width: 0; }
.gf-shell-main.gf-narrow { width: 100%; max-width: 720px; justify-self: center; } /* feeds de posts */
@media (min-width: 992px) {
/* Sideboard a la izquierda y contenido a la derecha, como LinkedIn.
En el HTML el va después del contenido (en móvil es la hoja
inferior), así que las columnas se fijan aquí. */
.gf-shell { grid-template-columns: var(--gf-side-width) minmax(0, 1fr); }
.gf-shell > .gf-shell-main { grid-column: 2; grid-row: 1; }
.gf-shell > .gf-side { grid-column: 1; grid-row: 1; }
.gf-shell-main.gf-narrow { justify-self: start; } /* el feed pegado al sideboard */
.gf-side {
position: sticky;
top: 16px;
max-height: calc(100vh - 32px);
overflow-y: auto;
scrollbar-width: thin;
padding-bottom: 8px;
}
.gf-side-head, .gf-side-fab, .gf-side-backdrop { display: none !important; }
}
/* --- Tarjetas ------------------------------------------------------------ */
.gf-side-card {
background: #fff;
border: 1px solid var(--gf-side-line);
border-radius: 14px;
padding: 14px 12px;
margin-bottom: 14px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.gf-side-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 4px 8px;
font-size: .74rem;
font-weight: 800;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--gf-side-muted);
}
.gf-side-title a { font-size: .74rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--gf-side-accent); text-decoration: none; }
.gf-side-title a:hover { text-decoration: underline; }
.gf-side-subtitle {
margin: 10px 4px 6px;
font-size: .7rem;
font-weight: 700;
color: var(--gf-side-muted);
}
/* --- Opciones tipo menú de Facebook ------------------------------------------ */
.gf-side-menu { display: flex; flex-direction: column; gap: 2px; }
.gf-side-item {
display: flex;
align-items: center;
gap: 12px;
padding: 7px 8px;
border-radius: 10px;
color: var(--gf-side-ink);
font-weight: 600;
font-size: .9rem;
text-decoration: none;
transition: background .15s ease;
}
.gf-side-item:hover { background: var(--gf-side-hover); color: var(--gf-side-ink); text-decoration: none; }
.gf-side-ico {
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gf-side-bubble);
color: #3d4f60;
font-size: .9rem;
transition: background .15s ease, color .15s ease;
}
.gf-side-label { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.gf-side-label small { display: block; font-weight: 500; font-size: .74rem; color: var(--gf-side-muted); }
.gf-side-check { color: var(--gf-side-accent); font-size: .85rem; visibility: hidden; }
.gf-side-item.active { background: var(--gf-side-accent-soft); color: var(--gf-side-ink); }
.gf-side-item.active .gf-side-ico { background: var(--gf-side-accent); color: #fff; }
.gf-side-item.active .gf-side-check { visibility: visible; }
/* --- Chips (opciones cortas: Todos / Men / Women) ---------------------------- */
.gf-side-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.gf-side-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: var(--gf-side-bubble);
color: var(--gf-side-ink);
font-size: .82rem;
font-weight: 600;
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.gf-side-chip:hover { background: #dde4ea; color: var(--gf-side-ink); text-decoration: none; }
.gf-side-chip.active { background: var(--gf-side-ink); color: #fff; }
/* --- Formularios de filtros ------------------------------------------------ */
.gf-side-form { padding: 0 4px; }
.gf-side-form .gf-field { margin-bottom: 10px; }
.gf-side-form label, .gf-side-form .form-label {
display: block;
margin-bottom: 4px;
font-size: .76rem;
font-weight: 700;
color: var(--gf-side-muted);
}
.gf-side-form .form-control, .gf-side-form .form-select {
border-radius: 10px;
border-color: var(--gf-side-line);
background-color: #f7f9fb;
font-size: .88rem;
padding: 7px 11px;
min-height: 0;
height: auto;
}
.gf-side-form .form-control::placeholder { color: #9aa8b5; }
.gf-side-form .form-control:focus, .gf-side-form .form-select:focus {
background-color: #fff;
border-color: var(--gf-side-accent);
box-shadow: 0 0 0 3px rgba(31, 157, 58, .15);
}
.gf-side-form .gf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gf-side-search { position: relative; }
.gf-side-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gf-side-muted); font-size: .85rem; pointer-events: none; }
.gf-side-search .form-control { padding-left: 34px; border-radius: 999px; }
.gf-side-actions { display: flex; gap: 8px; margin-top: 6px; }
.gf-side-actions .btn { border-radius: 999px; font-weight: 700; font-size: .85rem; padding: 7px 14px; text-transform: none; letter-spacing: 0; }
.gf-side-actions .btn-gf { flex: 1 1 auto; background: var(--gf-side-accent); border-color: var(--gf-side-accent); color: #fff; }
.gf-side-actions .btn-gf:hover { background: #188030; border-color: #188030; color: #fff; }
.gf-side-actions .btn-gf-ghost { background: var(--gf-side-bubble); border-color: transparent; color: var(--gf-side-ink); }
.gf-side-actions .btn-gf-ghost:hover { background: #dde4ea; color: var(--gf-side-ink); }
.gf-side-count { font-size: .8rem; color: var(--gf-side-muted); margin: 0 4px; }
.gf-side-count strong { color: var(--gf-side-ink); }
/* --- Móvil: hoja inferior ----------------------------------------------------- */
@media (max-width: 991.98px) {
.gf-side {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1050;
max-height: 85vh;
overflow-y: auto;
background: #f0f2f5;
border-radius: 18px 18px 0 0;
padding: 0 12px 20px;
box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
transform: translateY(105%);
transition: transform .25s ease;
visibility: hidden;
}
.gf-side.open { transform: translateY(0); visibility: visible; }
.gf-side-head {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -12px 12px;
padding: 18px 16px 10px;
background: #f0f2f5;
font-weight: 800;
color: var(--gf-side-ink);
}
.gf-side-head::before {
content: "";
position: absolute;
top: 7px;
left: 50%;
width: 40px;
height: 4px;
margin-left: -20px;
border-radius: 4px;
background: #c5ced6;
}
.gf-side-close {
border: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--gf-side-bubble);
color: var(--gf-side-ink);
}
.gf-side-backdrop {
position: fixed;
inset: 0;
z-index: 1040;
background: rgba(5, 19, 32, .45);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease;
}
.gf-side-backdrop.open { opacity: 1; visibility: visible; }
.gf-side-fab {
/* Centrado abajo: la esquina derecha es del botón del asistente (helpbot) */
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
z-index: 1030;
display: inline-flex;
align-items: center;
gap: 8px;
border: 0;
border-radius: 999px;
padding: 11px 18px;
background: var(--gf-side-ink);
color: #fff;
font-weight: 700;
font-size: .9rem;
box-shadow: 0 6px 20px rgba(5, 19, 32, .35);
}
.gf-side-fab .badge { background: var(--gf-side-accent); border-radius: 999px; font-size: .72rem; }
body.gf-side-locked { overflow: hidden; }
}