/* ==========================================================================
   SEMBRANDO ENERGIA SAS — Tema del panel (UX-PC-1 + UX-PC-2)
   Clases fi-* verificadas contra Filament v3.2.52 (vendor blade + DOM real).
   Solo presentación. Sin dark mode (el panel lo tiene desactivado).
   Marca: verde #2d6a4f / #40916c · acento naranja #f18801.
   ========================================================================== */

:root {
    --se-verde: #2d6a4f;
    --se-verde-2: #40916c;
    --se-verde-050: #eef5f1;
    --se-naranja: #f18801;
    --se-borde: #e1e9e4;
    --se-fondo: #eef2f0;   /* fondo de página (contraste con tarjetas blancas) */
}

/* ==== CONTRASTE / FONDOS (UX-PC-2 D): que las tarjetas blancas resalten ==== */
.fi-main, .fi-body, .fi-simple-main {
    background-color: var(--se-fondo);
}
/* Tarjetas, secciones y widgets: blanco con borde + sombra sutil */
.fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn, .fi-fo-field-wrp .fi-input-wrp {
    background-color: #fff;
}
.fi-section {
    border: 1px solid var(--se-borde);
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgb(15 40 30 / 0.04), 0 1px 3px rgb(15 40 30 / 0.03);
}
.fi-ta-ctn {
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgb(15 40 30 / 0.04);
}

/* ==== SIDEBAR: grupos legibles + ítem activo con acento de marca ==== */
.fi-sidebar-group-label {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: #7c8b83;
}
.fi-sidebar-item-button { border-radius: 0.5rem; transition: background-color .12s ease; }
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: var(--se-verde-050);
    box-shadow: inset 3px 0 0 0 var(--se-naranja);
}
.fi-sidebar-item-active .fi-sidebar-item-label { color: var(--se-verde); font-weight: 700; }
.fi-sidebar-item-active .fi-sidebar-item-icon { color: var(--se-verde); }

.fi-topbar { box-shadow: 0 1px 3px rgb(15 40 30 / 0.06); }

/* ==== TABLAS ==== */
.fi-ta-header-cell { background: var(--se-verde-050); font-weight: 700; color: #33453d; text-transform: none; }
.fi-ta-row { transition: background-color .1s ease; }
.fi-ta-row:hover { background: #f6faf8; }
.fi-ta-cell { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.fi-badge { font-weight: 600; border-radius: 9999px; letter-spacing: 0.01em; }

/* ==== BARRA DE FILTROS (AboveContentCollapsible) ==== */
.fi-ta-filters {
    background: #fbfdfc; border: 1px solid var(--se-borde);
    border-radius: 0.85rem; padding: 0.75rem 1rem; margin-bottom: 0.75rem;
}

/* ==== SECCIONES DE FORMULARIO: cabecera con contraste + COMPACTACIÓN (UX-PC-2 C) ==== */
.fi-section-header { padding: 0.6rem 1rem; }
.fi-section-header-heading { font-weight: 700; color: var(--se-verde); font-size: 0.95rem; }
.fi-section-header-icon, .fi-section-header .fi-icon { color: var(--se-verde-2); }
.fi-section-content { padding: 0.7rem 1rem 0.8rem; }

/* Gap real entre campos y entre secciones: verificado gap-6 (1.5rem) -> 0.7rem */
.fi-fo-component-ctn { gap: 0.7rem !important; }
/* Separación label -> input (grid gap-y-2 = 8px) -> 4px */
.fi-fo-field-wrp .grid.gap-y-2 { gap: 0.25rem !important; }

/* Inputs y labels un punto más compactos */
.fi-input { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
.fi-fo-field-wrp-label { font-size: 0.8125rem; font-weight: 600; }
.fi-fo-field-wrp .fi-fo-field-wrp-hint { font-size: 0.75rem; }

/* ==== ACCIONES DE TABLA ==== */
.fi-ta-actions { gap: 0.375rem; }

/* ==== DASHBOARD: aire entre widget de cuenta y métricas ==== */
.fi-wi { gap: 1rem; }
.fi-wi-stats-overview-stat {
    border: 1px solid var(--se-borde); border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgb(15 40 30 / 0.04);
}

/* ==== PERFIL integrado (UX-PC-2 A): tarjeta de usuario inyectada por renderHook ==== */
.se-perfil-cab {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border: 1px solid var(--se-borde); border-radius: 0.85rem;
    padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgb(15 40 30 / 0.04);
}
.se-perfil-avatar {
    width: 3.25rem; height: 3.25rem; flex: none; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.15rem;
    background: linear-gradient(135deg, var(--se-verde), var(--se-verde-2));
}
.se-perfil-cab .se-perfil-datos strong { display: block; font-size: 1.05rem; color: #1b201d !important; }
.se-perfil-cab .se-perfil-datos span { color: #5b645f !important; font-size: 0.875rem; }
.se-perfil-rol {
    display: inline-block; margin-top: 0.25rem; padding: 0.1rem 0.6rem;
    background: var(--se-verde-050); color: var(--se-verde);
    border-radius: 9999px; font-size: 0.72rem; font-weight: 700;
}

/* ==== 4B-7: negrilla ROJA también DENTRO del RichEditor del panel (mientras se edita), igual que la app y el PDF ==== */
.fi-fo-rich-editor trix-editor strong,
.fi-fo-rich-editor trix-editor b,
.fi-fo-rich-editor .trix-content strong,
.fi-fo-rich-editor .trix-content b,
.fi-fo-rich-editor-container trix-editor strong,
.fi-fo-rich-editor-container trix-editor b { color: #d40000; }