/* ============================================================
   SGS — adaptación del Kit Rediseño B al shell propio de SGS
   (#sidebar, .sgs-dialog, .sgs-toast, kanban, FullCalendar).
   Se carga DESPUÉS de theme-b.css. Solo estilos.
   ============================================================ */

:root {
  --title: var(--morado-deep);
  --ok-ink: #0f8a68; --ok-bg: #e7f9f3; --ok-line: #b6ecdb;
  --warn-ink: #b56f00; --warn-bg: #fff3dc; --warn-line: #f3d59a;
  --crit-ink: #c02a3a; --crit-bg: #fde8ea; --crit-line: #f3b7bd;
  --info-ink: #6a2fb0; --info-bg: #efe8fa; --info-line: #ddd0f0;
}
html { font-size: 100%; }

/* ── Rail lateral (antes sidebar blanco) ── */
#sidebar { background: var(--morado); border-right: 0; padding: 1.1rem .85rem; gap: 1rem; width: var(--rail-w); min-width: var(--rail-w); }
#main-content { margin-left: var(--rail-w); }
.sidebar-brand { border: 0; padding: 0 .4rem; gap: .65rem; }
.sidebar-brand img.sidebar-logo { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.sidebar-brand-name { color: #fff; font: 800 1.05rem var(--f-display); }
.sidebar-brand-sub { color: #cdbbee; font-family: var(--f-mono); font-size: .58rem; }
#sidebar .topbar-search { margin: 0; }
.sidebar-nav { padding: 0; }
.sidebar-section-label { color: #b9a6de; font: 600 .62rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; padding: .9rem .75rem .35rem; }
.sidebar-link { padding: .6rem .8rem; border-radius: 12px; color: #e1d5f5; font-size: .88rem; font-weight: 600; }
.sidebar-link i { font-size: 1.1rem; width: 20px; color: inherit; opacity: .9; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: rgba(47,217,169,.18); color: #fff; box-shadow: inset 3px 0 0 var(--menta); }
.sidebar-link.active i { color: var(--menta); }
.sidebar-prefs { display: grid; gap: .1rem; }
.sidebar-pref { display: flex; align-items: center; gap: .55rem; border: 0; background: none; color: #cdbbee; font-size: .78rem; padding: .35rem .8rem; border-radius: 10px; text-align: left; cursor: pointer; }
.sidebar-pref:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-pref i { font-size: 1rem; }
.sidebar-user { border: 0; padding: 0; }
.sidebar-user-inner { background: rgba(255,255,255,.06); border-radius: 14px; }
.sidebar-user-inner:hover { background: rgba(255,255,255,.12); }
.sidebar-avatar { background: var(--menta); color: var(--morado-deep); font-weight: 800; }
.sidebar-avatar i { color: var(--morado-deep); }
.sidebar-user-name { color: #fff; }
.sidebar-user-role { color: #cdbbee; }
.sidebar-logout-btn { color: #cdbbee; border-radius: 50%; }
.sidebar-logout-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

/* El tema convierte #topbar en rail (≥821px); en SGS el rail es #sidebar → anular */
@media (min-width: 768px) {
  #app-shell { display: flex; padding-left: 0; }
  #topbar { position: sticky; top: 0; bottom: auto; width: auto; height: var(--topbar-h); flex-direction: row; align-items: center;
    gap: .75rem; padding: 0 2rem; overflow: visible; min-height: 0; }
  .topbar-brand { display: none !important; }
  .topbar-user-wrap { margin-top: 0; }
}
:root[data-theme="dark"] #topbar { background: color-mix(in srgb, var(--bg) 92%, transparent); border-right: 0; }
@media (max-width: 767px) { :root[data-theme="dark"] #topbar { background: #1c1030; } }

/* Topbar del lienzo (escritorio): limpio, sin fondo azul */
#topbar { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--border-soft); }
.topbar-crumb-active { font-family: var(--f-display); font-weight: 700; color: var(--title); }
.topbar-date { font-family: var(--f-mono); }
.topbar-date::first-letter { text-transform: uppercase; }
#app { padding: 1.5rem 2rem 2.5rem; }

@media (max-width: 767px) {
  #main-content { margin-left: 0; }
  #topbar { background: var(--morado); border: 0; }
  .topbar-brand-text, .topbar-title { color: #fff; font-family: var(--f-display); }
  .topbar-avatar { background: var(--menta); }
  .topbar-avatar i { color: var(--morado-deep); }
  #app { padding: 1rem 1rem calc(var(--bottom-nav-h) + 1rem); }
  #bottom-nav { border-top: 1px solid var(--border); box-shadow: 0 -6px 20px -12px rgba(42,15,79,.25); }
  .bottom-nav-link.active { color: var(--morado); }
  .bottom-nav-link.active i { color: var(--morado); background: var(--lavanda); border-radius: 999px; padding: .2rem .9rem; }
}

/* ── Pop-ups (SGSModal) redondeados ── */
.sgs-backdrop { background: rgba(42,15,79,.45); backdrop-filter: blur(3px); }
.sgs-dialog { border-radius: 24px 24px 0 0; overflow: hidden; border: 1px solid var(--border); }
@media (min-width: 768px) { .sgs-dialog { border-radius: 24px; } }
.sgs-modal-header { background: linear-gradient(120deg, var(--morado) 0%, var(--morado-2) 100%); padding: 1.15rem 1.5rem; }
.sgs-modal-title { font: 700 1.05rem var(--f-display); }
.sgs-modal-header .sgs-close-btn { border-radius: 50%; background: rgba(255,255,255,.12); }
.sgs-modal-body { padding: 1.35rem 1.5rem; }
.sgs-modal-body .form-control, .sgs-modal-body .form-select { border-radius: 12px; }
.sgs-modal-body .card, .sgs-modal-body .alert { border-radius: 16px; }
.sgs-modal-footer { background: var(--lavanda-2); }

/* ── Toasts propios ── */
#toast-container { top: 1rem; bottom: auto; }
.sgs-toast { border-radius: 16px; border: 0; box-shadow: var(--shadow-lg); background: var(--surface); padding: .9rem 1rem; }
.sgs-toast-success { border-left: 4px solid var(--menta); }
.sgs-toast-danger  { border-left: 4px solid #d63a4a; }
.sgs-toast-warning { border-left: 4px solid #e39a1b; }
.sgs-toast-info    { border-left: 4px solid var(--morado-2); }
.sgs-spinner { border-top-color: var(--morado); }
.sgs-page-btn { border-radius: 999px; }
.badge-wine { background: var(--lavanda); color: var(--morado); }
.semaforo-dot { box-shadow: 0 0 0 2px var(--surface); }

/* ── Encabezados de módulo (h4 Bootstrap) ── */
#app h4.fw-bold { font: 800 1.5rem var(--f-display); color: var(--title); letter-spacing: -.01em; }
#app h4 .text-primary { color: var(--menta-ink) !important; }
.card.border-0.shadow-sm { border: 1px solid var(--border) !important; box-shadow: none !important; border-radius: var(--radius-lg); }
.table-responsive { border: 1px solid var(--border); background: var(--surface); }
table.table th { font: 500 .66rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.btn-group > .btn { border-radius: 999px !important; margin-right: .3rem; }

/* ── Dashboard: banda + carril + KPIs ── */
.hero-band { border-radius: 20px; padding: 1.4rem 1.6rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(120deg, #4c1d80 0%, #6a2fb0 70%, #7d45c4 100%); color: #fff; position: relative; overflow: hidden; }
.hero-band::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--menta); opacity: .22; }
.hero-sem { display: inline-block; margin-top: .3rem; background: var(--menta); color: var(--morado-deep); font: 700 .72rem var(--f-body); padding: .2rem .7rem; border-radius: 999px; }
.fee-lane { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-bottom: 1rem; }
.fee-st { padding: .8rem 1rem; border-right: 1px solid var(--border-soft); display: grid; gap: .1rem; position: relative; color: var(--title) !important; text-decoration: none; }
@media (max-width: 767px) { .fee-lane { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fee-st { border-bottom: 1px solid var(--border-soft); } }

#kpi-cards-row { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important; gap: .75rem !important; }
.kpi-b { container-type: inline-size; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.kpi-b-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.kpi-b-label { font: 500 .62rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); line-height: 1.3; }
.kpi-b-top i { color: var(--c); font-size: 1rem; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); flex-shrink: 0; }
.kpi-b-value { font: 800 clamp(1.1rem, 16cqi, 1.7rem)/1.1 var(--f-display); color: var(--title); white-space: nowrap; letter-spacing: -.02em; }
.kpi-b-sub { font: .7rem var(--f-mono); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-b-bar { height: 6px; border-radius: 99px; background: var(--surface-muted); overflow: hidden; }
.kpi-b-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--morado-2), var(--menta)); transition: width .4s ease; }
#kpi-cards-row > .kpi-b:first-child { background: linear-gradient(125deg, var(--morado) 0%, var(--morado-2) 100%); border-color: transparent; }
#kpi-cards-row > .kpi-b:first-child .kpi-b-label, #kpi-cards-row > .kpi-b:first-child .kpi-b-sub { color: #dccdf2; }
#kpi-cards-row > .kpi-b:first-child .kpi-b-value { color: #fff; }
#kpi-cards-row > .kpi-b:first-child .kpi-b-top i { background: rgba(47,217,169,.22); color: var(--menta); }
#kpi-cards-row > .kpi-b:first-child .kpi-b-bar { background: rgba(255,255,255,.18); }
#dash-body > div > div[style*="border-radius:var(--radius-lg)"], #dash-body [style*="box-shadow:var(--shadow-sm)"] { border-radius: 18px !important; box-shadow: none !important; }

/* ── Kanban ── */
.kanban-col { background: var(--lavanda-2); border: 0; border-radius: 18px; overflow: hidden; }
.kanban-col-header { background: transparent !important; color: var(--title) !important; font: 700 .9rem var(--f-display); padding: .8rem 1rem; border-bottom: 3px solid var(--kc, var(--morado-2)); }
.kanban-col[data-estado="planificada"] { --kc: var(--morado-2); }
.kanban-col[data-estado="completada"]  { --kc: var(--menta); }
.kanban-col[data-estado="cancelada"]   { --kc: #b3a8c6; }
.kanban-col-header .badge { background: var(--surface) !important; color: var(--text-muted) !important; font-family: var(--f-mono); }
.kanban-card { border: 1px solid var(--border) !important; border-radius: 16px !important; box-shadow: none !important; background: var(--surface); }
.kanban-card:hover { box-shadow: var(--shadow-md) !important; border-color: #c9b6e8 !important; }
.kanban-card .btn-sm { width: 30px; height: 30px; padding: 0 !important; border-radius: 50%; display: inline-grid; place-items: center; }
.kanban-card .btn-success { box-shadow: 0 4px 10px -4px rgba(47,217,169,.8); }
.kanban-col.drag-over .kanban-cards { background: var(--menta-soft); }
.kanban-card.sgs-celebra { animation: sgsCelebra 1.6s ease; }
@keyframes sgsCelebra { 0% { box-shadow: 0 0 0 0 rgba(47,217,169,.9); background: var(--menta-soft); } 100% { box-shadow: 0 0 0 14px rgba(47,217,169,0); } }

/* Indicador de etapas (5 segmentos) */
.steps { display: inline-flex; gap: 3px; vertical-align: middle; }
.steps i { width: 14px; height: 5px; border-radius: 3px; background: var(--border); }
.steps i.d { background: var(--menta); }
.steps i.n { background: #e39a1b; }

/* ── FullCalendar ── */
.fc { --fc-border-color: var(--border-soft); --fc-page-bg-color: var(--surface); --fc-neutral-bg-color: var(--surface-muted);
  --fc-today-bg-color: var(--lavanda-2); --fc-button-bg-color: var(--surface); --fc-button-border-color: var(--border);
  --fc-button-text-color: var(--text); --fc-button-hover-bg-color: var(--lavanda); --fc-button-hover-border-color: var(--border);
  --fc-button-active-bg-color: var(--morado); --fc-button-active-border-color: var(--morado); font-family: var(--f-body); }
.fc .fc-button { border-radius: 999px !important; font-weight: 700; margin: 0 .15rem !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc .fc-toolbar-title { font: 800 1.25rem var(--f-display); color: var(--title); }
.fc .fc-col-header-cell-cushion { font: 500 .66rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.fc .fc-daygrid-day-number { font-family: var(--f-mono); font-size: .75rem; color: var(--text-muted); }
.fc .fc-event { border-radius: 8px; border: 0; padding: 1px 4px; font-weight: 600; }

/* ── Login ── */
#login-page .login-card { box-shadow: 0 24px 60px -20px rgba(20,6,40,.55) !important; border: 0 !important; border-radius: 24px !important; }
#login-page .login-card p { color: var(--text-faint) !important; }
#login-page #admin-btn { background: var(--morado) !important; border-color: var(--morado) !important; }

/* ── Modo oscuro (tokens de SGS) ── */
:root[data-theme="dark"] {
  --title: #f1ebfb;
}
:root[data-theme="dark"] #sidebar { background: #1c1030; border-right: 1px solid #2a1c45; }
:root[data-theme="dark"] .sidebar-avatar { color: #2a0f4f; }
:root[data-theme="dark"] .hero-band, :root[data-theme="dark"] #kpi-cards-row > .kpi-b:first-child,
:root[data-theme="dark"] .sgs-modal-header { background: linear-gradient(120deg, #3a1766 0%, #5a279a 100%); }
:root[data-theme="dark"] .hero-sem, :root[data-theme="dark"] .sidebar-avatar i { color: #2a0f4f; }
:root[data-theme="dark"] .kanban-card:hover { border-color: #5a4585 !important; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .card-header.bg-white,
:root[data-theme="dark"] .bg-white, :root[data-theme="dark"] .bg-light { background: var(--surface) !important; color: var(--text); }
:root[data-theme="dark"] .text-dark { color: var(--text) !important; }
:root[data-theme="dark"] .text-muted { color: var(--text-faint) !important; }
:root[data-theme="dark"] .fc .fc-button-primary:not(.fc-button-active) { color: var(--text); }
:root[data-theme="dark"] .btn-outline-secondary, :root[data-theme="dark"] .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] .bottom-nav-link.active, :root[data-theme="dark"] .bottom-nav-link.active i { color: var(--menta); }

/* ══════════════════════════════════════════════════════════════
   CAPA TRANSVERSAL (todas las pantallas)
   ══════════════════════════════════════════════════════════════ */

/* Encabezado de módulo */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { font: 800 1.6rem var(--f-display); color: var(--title); letter-spacing: -.02em; margin: 0; }
.page-head p { font-size: .88rem; color: var(--text-faint); margin: .15rem 0 0; }
.page-head > :not(:first-child) { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Barra de filtros: la primera tarjeta con filtros se vuelve una franja suave */
#app > .card.border-0.shadow-sm.mb-4:has(.form-select, .form-control):not(:has(.card-header)):not(.kpi-global-card):not(.rpt-card) {
  background: var(--lavanda-2); border-color: transparent !important; border-radius: 18px; }
#app .input-group-text { background: var(--surface); border-color: var(--border); border-radius: 12px 0 0 12px; color: var(--text-faint); }

/* Tablas → filas-tarjeta */
#app .card .table-responsive, #app .table-responsive { border: 0; background: transparent; border-radius: 0; }
#app .card:has(> .card-body.p-0 .table-responsive) { background: transparent; border: 0 !important; }
#app table.table { border-collapse: separate; border-spacing: 0 .45rem; margin-top: -.45rem; font-size: .84rem; }
#app table.table thead th { background: transparent; border: 0; padding: .4rem 1rem; }
#app table.table tbody td { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .75rem 1rem; color: var(--text); }
#app table.table tbody td:first-child { border-left: 1px solid var(--border); border-radius: 14px 0 0 14px; }
#app table.table tbody td:last-child { border-right: 1px solid var(--border); border-radius: 0 14px 14px 0; }
#app table.table.table-hover tbody tr:hover td { background: var(--lavanda-2); border-color: #c9b6e8; }
:root[data-theme="dark"] #app table.table.table-hover tbody tr:hover td { border-color: #5a4585; }
#app table.table td .btn-sm { width: 32px; height: 32px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
#app table.table .fw-semibold.small, #app table.table td.fw-semibold { font-family: var(--f-display); font-weight: 700; color: var(--title); }
#app table.table td.text-nowrap.small:first-child { font-family: var(--f-mono); font-size: .76rem; color: var(--text-muted); }
#app .fs-8 { font-size: .72rem; }

/* Avatares con inicial */
.cv-oc { display: inline-flex; vertical-align: middle; align-items: center; gap: .7rem; }
.cv-oc-txt strong { font: 700 .9rem var(--f-display); color: var(--title); }
.cv-avatar { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--morado-2), var(--morado)); color: #fff; font: 800 .95rem var(--f-display); object-fit: cover; }
.cv-avatar-img { padding: 0; }
.kpi-global-card .cv-avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 1.3rem; }

/* Tarjetas resumen (Equipo) — del patrón Flujo de Fee */
.cv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
@media (max-width: 991px) { .cv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cv-stat { container-type: inline-size; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: .9rem 1rem; display: flex; gap: .75rem; align-items: center; }
.cv-stat-ico { background: var(--c-bg); color: var(--c-ink); }
.cv-stats > .cv-stat-brand:nth-child(2) { background: linear-gradient(125deg, var(--morado) 0%, var(--morado-2) 100%); border-color: transparent; }
.cv-stats > .cv-stat-brand:nth-child(2) small, .cv-stats > .cv-stat-brand:nth-child(2) span:not(.cv-stat-ico) { color: #dccdf2 !important; }
.cv-stats > .cv-stat-brand:nth-child(2) .cv-stat-ico { background: rgba(47,217,169,.22); color: var(--menta); }
:root[data-theme="dark"] .cv-stats > .cv-stat-brand:nth-child(2) { background: linear-gradient(125deg, #3a1766 0%, #5a279a 100%); }

/* Bootstrap → paleta (iconos y textos de color) */
#app .text-primary { color: var(--morado-2) !important; }
#app .text-success { color: var(--ok-ink) !important; }
#app .text-info    { color: var(--morado-2) !important; }
#app .text-warning { color: var(--warn-ink) !important; }
#app .text-danger  { color: var(--crit-ink) !important; }
#app .text-dark    { color: var(--text) !important; }
.badge.bg-light.border, .badge.bg-light { background: var(--surface-muted) !important; color: var(--text-muted) !important; border-color: transparent !important; font-family: var(--f-mono); font-weight: 500; }
.badge.bg-warning.text-dark { background: var(--warn-bg) !important; color: var(--warn-ink) !important; }
.badge.bg-info.text-dark { background: var(--info-bg) !important; color: var(--info-ink) !important; }
.btn-info { background: var(--morado-2); border-color: var(--morado-2); color: #fff !important; }
.btn-outline-warning { color: var(--warn-ink); border-color: var(--warn-line); }
.btn-outline-warning:hover:not(:disabled) { background: var(--warn-bg); }
.rounded-circle.bg-primary { background: linear-gradient(135deg, var(--morado-2), var(--morado)) !important; border-radius: 12px !important; }
.table-primary td { background: var(--lavanda) !important; }

/* KPIs: ficha protagonista + indicadores + ranking */
.kpi-global-card { background: linear-gradient(125deg, var(--morado) 0%, var(--morado-2) 70%, #7d45c4 100%) !important; color: #fff; border: 0 !important; border-radius: 22px !important; overflow: hidden; position: relative; }
.kpi-global-card::after { content: ""; position: absolute; right: -50px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: var(--menta); opacity: .2; }
.kpi-global-card > * { position: relative; z-index: 1; }
.kpi-global-card h5 { color: #fff; font: 800 1.2rem var(--f-display); }
.kpi-global-card .text-muted, .kpi-global-card div:not(.kpi-pct-text) { color: #e3d6f7 !important; }
.kpi-global-card .kpi-pct-text { color: #fff; font: 800 2.6rem var(--f-display); letter-spacing: -.03em; }
.kpi-global-card .kpi-bar-track { background: rgba(255,255,255,.18); height: 8px; }
.kpi-global-card .badge { background: rgba(255,255,255,.15) !important; color: #fff !important; }
:root[data-theme="dark"] .kpi-global-card { background: linear-gradient(125deg, #3a1766 0%, #5a279a 100%) !important; }
.kpi-card { border: 1px solid var(--border) !important; box-shadow: none !important; border-radius: 18px !important; }
.kpi-card .card-body > .d-flex:first-child > span:first-child i { width: 36px; height: 36px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--lavanda); font-size: 1.15rem !important; }
.kpi-card .fw-semibold.small { font: 700 .95rem var(--f-display); color: var(--title); }
.kpi-bar-track { height: 6px; border-radius: 99px; background: var(--surface-muted); overflow: hidden; }
.kpi-bar-fill { border-radius: 99px; }
.rank { width: 28px; height: 28px; border-radius: 10px; display: inline-grid; place-items: center; font: 700 .8rem var(--f-mono); background: var(--surface-muted); color: var(--text-muted); }
.rank-0 { background: linear-gradient(135deg, #f6c977, #e39a1b); color: #3a2400; }
.rank-1 { background: linear-gradient(135deg, #e6e1ee, #b3a8c6); color: #2b2238; }
.rank-2 { background: linear-gradient(135deg, #f0c0a0, #c97a4a); color: #3a1a08; }

/* Reportes: tarjetas de informe */
.rpt-card { border: 1px solid var(--border) !important; box-shadow: none !important; border-radius: 22px !important; transition: transform .15s, box-shadow .15s; }
.rpt-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; border-color: #c9b6e8 !important; }
.rpt-ico { width: 56px; height: 56px; border-radius: 18px; background: var(--lavanda) !important; }
.rpt-card:nth-child(n) .rpt-ico i { color: var(--morado-2) !important; }
.rpt-card h6 { font: 800 1rem var(--f-display); color: var(--title); }

/* Formularios largos (Nueva actividad, Perfil) */
#app form .card, #app .row > [class*="col"] > .card { border-radius: 18px; }
#app .card-header { background: transparent; border-bottom: 1px solid var(--border-soft); font: 700 .95rem var(--f-display); color: var(--title); }
.form-label { font-size: .78rem; }
.sgs-empty i { color: var(--morado-2); opacity: .45; }
.sgs-page-btn.active { background: var(--morado); border-color: var(--morado); }

/* Perfil: tarjeta de identidad en morado */
#app .col-lg-4 > .card.text-center.p-4 { background: linear-gradient(150deg, var(--morado) 0%, var(--morado-2) 100%) !important; border: 0 !important; border-radius: 22px; color: #fff; overflow: hidden; position: relative; }
#app .col-lg-4 > .card.text-center.p-4::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 180px; height: 180px; border-radius: 50%; background: var(--menta); opacity: .2; }
#app .col-lg-4 > .card.text-center.p-4 > * { position: relative; z-index: 1; }
#app .col-lg-4 > .card.text-center.p-4 h5 { color: #fff; font: 800 1.2rem var(--f-display); }
#app .col-lg-4 > .card.text-center.p-4 .text-muted { color: #e3d6f7 !important; }
#app .col-lg-4 > .card.text-center.p-4 .rounded-circle { background: var(--menta) !important; color: var(--morado-deep) !important; border-radius: 26px !important; box-shadow: 0 12px 24px -10px rgba(0,0,0,.4); }
#app .col-lg-4 > .card.text-center.p-4 .badge { background: rgba(255,255,255,.16) !important; color: #fff !important; }
:root[data-theme="dark"] #app .col-lg-4 > .card.text-center.p-4 { background: linear-gradient(150deg, #3a1766 0%, #5a279a 100%) !important; }
.card.text-center > .badge { align-self: center; }
/* Acciones: el ámbar es color de estado, no de botón */
.btn-warning { background: var(--morado); border-color: var(--morado); color: #fff; }
.btn-warning:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }
:root[data-theme="dark"] #app .card:has(> .card-body.p-0 .table-responsive) { background: transparent !important; }
/* Roles: identidad, no estado */
.badge.badge-rol-admin { background: var(--morado) !important; color: #fff !important; }
.badge.badge-rol-lider { background: var(--menta) !important; color: #2a0f4f !important; }
:root[data-theme="dark"] .badge.badge-rol-admin { background: #6a2fb0 !important; }
/* Tipos de actividad: grupos como tarjetas */
#app .card-header.tipo-grupo-head { display: flex; align-items: center; gap: .6rem; background: var(--lavanda-2); color: var(--title); padding: .85rem 1rem; }
.tipo-grupo-ico { width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--surface); color: var(--morado-2); }
#app .list-group-item { background: var(--surface); color: var(--text); border-color: var(--border-soft); padding: .7rem 1rem; }
#app .list-group-item .fw-semibold { font-family: var(--f-display); font-weight: 700; color: var(--title); }
#app .list-group-item .btn-sm { width: 32px; height: 32px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
#app .list-group-item:hover { background: var(--lavanda-2); }
/* Dashboard: rejillas que se adaptan al ancho */
.kpi-grid-b { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: .75rem !important; }
@media (max-width: 991px) { .dash-grid { grid-template-columns: 1fr !important; } }
/* Gráficos: caja de alto fijo (no se aplastan a ningún ancho) */
.chart-box { position: relative; height: 240px; width: 100%; }
.chart-box-lg { height: 280px; }

/* iPhone: campos de 16 px o más para que Safari no haga zoom al tocarlos */
@media (max-width: 767px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; } }