/* Estilos propios de Gestión Sexyfy (tablero, calendario, balance). Funciona en modo claro y oscuro. */
:root {
    --gx-bg: #ffffff;
    --gx-col: #f4f4f5;
    --gx-border: #e4e4e7;
    --gx-text: #18181b;
    --gx-muted: #71717a;
    --gx-accent: #db2777;
    --gx-pos: #059669;
    --gx-neg: #e11d48;
    --gx-warn: #d97706;
}
.dark {
    --gx-bg: #18181b;
    --gx-col: #0f0f11;
    --gx-border: #27272a;
    --gx-text: #f4f4f5;
    --gx-muted: #a1a1aa;
    --gx-accent: #f472b6;
    --gx-pos: #34d399;
    --gx-neg: #fb7185;
    --gx-warn: #fbbf24;
}

.gx-muted { color: var(--gx-muted); font-size: .85em; }
.gx-warn { color: var(--gx-warn); }
.gx-link { color: var(--gx-accent); text-decoration: underline; }
.gx-spacer { flex: 1; }
.gx-scroll { overflow-x: auto; }

/* Filtros simples encima de tablero / balance */
.gx-filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; }
.gx-filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--gx-muted); }
.gx-filters select {
    min-width: 11rem; padding: .45rem 2rem .45rem .7rem; border-radius: .5rem; font-size: .9rem; font-weight: 400;
    border: 1px solid var(--gx-border); background-color: var(--gx-bg); color: var(--gx-text);
}
.gx-filters__hint { padding-bottom: .5rem; }

/* Avatares */
.gx-avatar {
    display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
    color: #fff; font-size: .75rem; font-weight: 700; flex-shrink: 0; vertical-align: middle;
}

/* ── Tablero kanban ───────────────────────────────── */
.gx-board {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr);
    gap: 1rem; overflow-x: auto; padding-bottom: .75rem; align-items: start;
}
.gx-col { background: var(--gx-col); border: 1px solid var(--gx-border); border-radius: .9rem; display: flex; flex-direction: column; max-height: calc(100vh - 14rem); }
.gx-col__head { display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem .5rem; font-weight: 600; color: var(--gx-text); }
.gx-col__head::before { content: ''; width: .55rem; height: .55rem; border-radius: 999px; background: var(--dot, #a1a1aa); }
.gx-col--todo { --dot: #0ea5e9; } .gx-col--doing { --dot: #f59e0b; } .gx-col--review { --dot: #a855f7; } .gx-col--done { --dot: #10b981; }
.gx-col__count { color: var(--gx-muted); font-weight: 500; font-size: .85rem; }
.gx-col__add { margin-left: auto; width: 1.75rem; height: 1.75rem; border-radius: .5rem; font-size: 1.15rem; line-height: 1; color: var(--gx-muted); }
.gx-col__add:hover { background: var(--gx-border); color: var(--gx-text); }
.gx-col__list { display: flex; flex-direction: column; gap: .6rem; padding: .3rem .6rem .8rem; overflow-y: auto; min-height: 4rem; }

.gx-card {
    background: var(--gx-bg); border: 1px solid var(--gx-border); border-left: 3px solid var(--prio, transparent);
    border-radius: .65rem; padding: .65rem .75rem; cursor: grab; display: flex; flex-direction: column; gap: .45rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: box-shadow .15s, transform .15s;
}
.gx-card:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .08); transform: translateY(-1px); }
.gx-card--alta { --prio: #f59e0b; } .gx-card--urgente { --prio: #e11d48; }
.gx-card--ghost { opacity: .4; }
.sortable-fallback { transform: rotate(2deg); box-shadow: 0 12px 28px rgb(0 0 0 / .25); }
.gx-col--done .gx-card__title { text-decoration: line-through; color: var(--gx-muted); }
.gx-card__title { font-size: .92rem; font-weight: 500; color: var(--gx-text); line-height: 1.35; }
.gx-card__labels { display: flex; flex-wrap: wrap; gap: .3rem; }
.gx-chip { font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--gx-accent) 12%, transparent); color: var(--gx-accent); font-weight: 600; }
.gx-card__meta { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--gx-muted); }
.gx-prio { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; }
.gx-prio--alta { color: #d97706; } .gx-prio--urgente { color: #e11d48; }
.gx-due--late { color: var(--gx-neg); font-weight: 700; }

/* ── Calendario ───────────────────────────────────── */
.gx-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--gx-muted); }
.gx-legend i { display: inline-block; width: .65rem; height: .65rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.gx-calendar { background: var(--gx-bg); border: 1px solid var(--gx-border); border-radius: .9rem; padding: 1rem; color: var(--gx-text); }
.gx-calendar .fc { --fc-border-color: var(--gx-border); --fc-page-bg-color: var(--gx-bg); --fc-neutral-bg-color: var(--gx-col); --fc-list-event-hover-bg-color: var(--gx-col); --fc-today-bg-color: color-mix(in srgb, var(--gx-accent) 8%, transparent); }
.gx-calendar .fc .fc-button { background: var(--gx-col); border-color: var(--gx-border); color: var(--gx-text); text-transform: capitalize; font-size: .85rem; }
.gx-calendar .fc .fc-button-primary:not(:disabled).fc-button-active, .gx-calendar .fc .fc-button-primary:not(:disabled):active { background: var(--gx-accent); border-color: var(--gx-accent); color: #fff; }
.gx-calendar .fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 600; }
.gx-calendar .fc .fc-toolbar-title::first-letter { text-transform: uppercase; }
.gx-calendar .fc-event { cursor: pointer; font-size: .8rem; }
.gx-calendar .fc-daygrid-day { cursor: pointer; }
.gx-cal-task--done .fc-event-title { text-decoration: line-through; }
@media (max-width: 640px) {
    .gx-calendar { padding: .5rem; }
    .gx-calendar .fc .fc-toolbar { flex-direction: column; gap: .5rem; }
}

/* ── Balance / KPIs ───────────────────────────────── */
.gx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.gx-kpi { background: var(--gx-bg); border: 1px solid var(--gx-border); border-radius: .9rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.gx-kpi span { font-size: .8rem; color: var(--gx-muted); font-weight: 600; }
.gx-kpi strong { font-size: 1.5rem; color: var(--gx-text); font-variant-numeric: tabular-nums; }
.gx-kpi small { font-size: .78rem; color: var(--gx-muted); }
.gx-kpi--pos strong { color: var(--gx-pos); } .gx-kpi--neg strong { color: var(--gx-neg); }
.gx-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; }

.gx-table { width: 100%; border-collapse: collapse; font-size: .9rem; color: var(--gx-text); }
.gx-table td, .gx-table th { padding: .5rem .4rem; border-bottom: 1px solid var(--gx-border); text-align: left; }
.gx-table th { font-size: .75rem; color: var(--gx-muted); font-weight: 600; white-space: nowrap; }
.gx-table--cols td { white-space: nowrap; }
.gx-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-sub td { font-weight: 600; }
.gx-total td { font-weight: 700; font-size: 1rem; border-top: 2px solid var(--gx-text); border-bottom: none; }
.gx-cash { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: .7rem; background: var(--gx-col); color: var(--gx-text); }
.gx-cash strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* ── Votación de inversiones ──────────────────────── */
.gx-votes { display: flex; flex-direction: column; gap: 1rem; color: var(--gx-text); }
.gx-votes__meter { font-size: .9rem; display: flex; flex-direction: column; gap: .4rem; }
.gx-votes__bar { height: .5rem; border-radius: 999px; background: var(--gx-col); overflow: hidden; }
.gx-votes__bar span { display: block; height: 100%; background: var(--gx-pos); border-radius: 999px; }
.gx-votes__list { display: flex; flex-direction: column; gap: .8rem; }
.gx-votes__list li { display: flex; gap: .6rem; align-items: flex-start; }
.gx-votes__name { font-weight: 600; font-size: .9rem; }
.gx-votes__state { font-size: .85rem; }
.gx-votes__state--aprobar { color: var(--gx-pos); } .gx-votes__state--rechazar { color: var(--gx-neg); }
.gx-votes__comment { font-size: .85rem; color: var(--gx-muted); font-style: italic; margin-top: .15rem; }