/* ================================================================
   Klimway — THEME OVERRIDE v3
   Paleta: Material Design 3 — demo-colores-interface.html
   Colores semánticos (primary/danger/info…) → PanelProvider ->colors()
   Aquí: fuente, layout estructural, topbar oscuro, sidebar cálido
   ================================================================ */

/* ── FUENTE ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap');

*, *::before, *::after {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* ── CUERPO DE LA PÁGINA ─────────────────────────────────────────── */
/* surface / background del demo: #fcf9f8 */
.fi-body {
    background-color: #f6f3f2 !important; /* surface-container-low */
}

.fi-ta-cell .fi-ta-placeholder {
    color: #006d3f !important; /* on-surface-variant */
}

.fi-page-header-main-ctn {
    row-gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
}

.fi-breadcrumbs ol li a {
    color: #3b4a3f !important; /* on-surface-variant */
}

/* ── TOPBAR ──────────────────────────────────────────────────────── */
/* inverse-surface del demo: #313030 */
.fi-topbar {
    background-color: #313030 !important;
    box-shadow: none !important;
    outline: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    --tw-ring-shadow: none !important;
    --tw-shadow: none !important;
}

/* Texto topbar — blanco atenuado sobre oscuro */
.fi-topbar-item-label {
    color: rgba(255,255,255,0.75) !important;
}
.fi-topbar-item-btn .fi-icon {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Ítem activo topbar — borde y fondo primary-container */
.fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: rgba(16, 239, 145, 0.12) !important;
}

.fi-topbar-item-icon{
    color: rgba(255, 255, 255, 0.75) !important;
}
.fi-topbar-item:hover .fi-topbar-item-icon,
.fi-topbar-item:focus-visible .fi-topbar-item-icon, .fi-topbar-item:hover .fi-topbar-item-label,
.fi-topbar-item:focus-visible .fi-topbar-item-label {
    color: rgba(255, 255, 255, 1) !important;
}

/* Ítem con aria-current (página actual en topbar) */
.fi-topbar-item[aria-current="page"] {
    border: 2px solid #10ef91;
    background: rgba(16, 239, 145, 0.12);
    padding: 4px 16px;
    border-radius: 15px;
    color: rgba(255, 255, 255, 1) !important;
}

.fi-topbar-item[aria-current="page"] .fi-topbar-item-icon,.fi-topbar-item[aria-current="page"] .fi-topbar-item-label {
    color: rgba(255, 255, 255, 1) !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────── */
/* surface-container-low del demo: #f6f3f2 */
.fi-sidebar {
    background-color: #313030 !important;
    border-right: 1px solid #e5e2e1 !important; /* surface-container-highest */
    box-shadow: none !important;
    --tw-shadow: none !important;
    --tw-ring-shadow: none !important;
}

/* Ítem activo en sidebar */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: #10ef91 !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #000000 !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon {
    color: #000000 !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
    background-color: #006d3f !important;
}

/* Hover ítems sidebar */
.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible {
    background-color: #464545 !important; /* surface-container-high */
}

/* Texto ítems sidebar */
.fi-sidebar-item-label {
    color: #ffffffb3 !important; /* on-surface-variant */
}
.fi-sidebar-item-btn .fi-icon {
    color: #ffffffb3 !important; /* outline */
}

/* Cabeceras de grupo sidebar */
.fi-sidebar-group-label {
    color: #6b7b6e !important;
}
.fi-sidebar-group-btn .fi-icon {
    color: #6b7b6e !important;
}
.fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-sidebar-group-dropdown-trigger-btn:focus-visible {
    background-color: #ebe7e7 !important;
}

/* Header del sidebar (zona del logo) */
.fi-body-has-topbar .fi-sidebar-header {
    background-color: #f6f3f2 !important;
    border-bottom: 1px solid #e5e2e1 !important;
    --tw-ring-shadow: none !important;
    box-shadow: none !important;
}

/* ── SECCIONES / CARDS ───────────────────────────────────────────── */
.fi-section {
    background-color: #ffffff !important;
    border: 1px solid #e5e2e1 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
.fi-section-header {
    border-bottom: 1px solid #f0edec !important;
    background-color: #ffffff !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
}
.fi-section-content {
    background-color: #ffffff !important;
}
.fi-section-footer {
    background-color: #f6f3f2 !important;
    border-top: 1px solid #f0edec !important;
}

/* ── TABLAS ──────────────────────────────────────────────────────── */
.fi-ta-ctn {
    background-color: #ffffff !important;
    border: 1px solid #e5e2e1 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
.fi-ta-header-row th,
.fi-ta-th {
    background-color: #f6f3f2 !important;
    color: #6b7b6e !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #e5e2e1 !important;
}
.fi-ta-td {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0edec !important;
    color: #1c1b1b !important;
}
.fi-ta-row:hover .fi-ta-td {
    background-color: #f6f3f2 !important;
}
.fi-ta-footer-ctn,
.fi-pagination-ctn {
    background-color: #f6f3f2 !important;
    border-top: 1px solid #e5e2e1 !important;
}

/* ── BUSCADOR DE TABLA ───────────────────────────────────────────── */
.fi-ta-search-field input.fi-input-has-inline-prefix::placeholder {
    color: #6b7b6e !important;
    opacity: 1 !important;
}

/* ── FORMULARIOS ─────────────────────────────────────────────────── */
/* Radio xl (0.75rem = 12px) · border outline-variant · min-height 48px */
.fi-input-wrp,
input.fi-input,
textarea.fi-input,
select.fi-select-input {
    background-color: #ffffff !important;
    border-color: #bacbbc !important;   /* outline-variant */
    border-radius: 0.75rem !important;
    color: #1c1b1b !important;
    min-height: 48px !important;
}
textarea.fi-input {
    min-height: unset !important;       /* textarea no fuerza 48px */
}
/* Focus: ring primary-container (verde brillante) */
input.fi-input:focus,
textarea.fi-input:focus,
select.fi-select-input:focus {
    padding-left: 4px;
    border-color: #b0c1ba !important;
    box-shadow: 0 0 0 1px #b0c1ba !important;
    outline: none !important;
}
.fi-fo-field-wrp-label {
    color: #3b4a3f !important;
    font-weight: 500 !important;
    font-size: 12px !important;         /* label-sm */
}
.fi-fo-field-wrp-helper-text {
    color: #6b7b6e !important;
    font-size: 12px !important;
}

/* ── BOTONES ─────────────────────────────────────────────────────── */
/* Base: radio xl (0.75rem = 12px), altura mínima 40px, Inter 500 */
.fi-btn {
    border-radius: 0.75rem !important;
    font-weight: 500 !important;
    min-height: 40px !important;
}

/*
 * Primary — "Tonal Filled" (M3 primary-container)
 * Default: bg #10ef91 (primary-container) + texto #00673b (on-primary-container)
 * Hover:   bg #006d3f (primary) + texto blanco
 */
.fi-btn-color-primary {
    background-color: #10ef91 !important;
    border-color: transparent !important;
    color: #00673b !important;
    box-shadow: 0 1px 3px rgba(0,109,63,0.12) !important;
}
.fi-btn-color-primary:hover {
    background-color: #006d3f !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,109,63,0.25) !important;
}
.fi-btn-color-primary:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(16, 239, 145, 0.35) !important;
}
.fi-btn-color-primary:disabled,
.fi-btn-color-primary[disabled] {
    background-color: #bacbbc !important;
    color: #e5e2e1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Gray — outline oscuro (borrador, cancelar, acciones secundarias) */
.fi-btn-color-gray {
    background-color: #ffffff !important;
    border: 2px solid #313030 !important;
    color: #313030 !important;
}
.fi-btn-color-gray:hover {
    background-color: #313030 !important;
    color: #ffffff !important;
}

/* Danger */
.fi-btn-color-danger {
    background-color: #ba1a1a !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
.fi-btn-color-danger:hover {
    background-color: #93000a !important;
}

/* Success */
.fi-btn-color-success {
    background-color: #10ef91 !important;
    border-color: transparent !important;
    color: #00673b !important;
}
.fi-btn-color-success:hover {
    background-color: #006d3f !important;
    color: #ffffff !important;
}

/* Info */
.fi-btn-color-info {
    background-color: #c3d0ff !important;
    border-color: transparent !important;
    color: #004fd0 !important;
}
.fi-btn-color-info:hover {
    background-color: #0053db !important;
    color: #ffffff !important;
}

/* Warning */
.fi-btn-color-warning {
    background-color: #e6e731 !important;
    border-color: transparent !important;
    color: #494900 !important;
}
.fi-btn-color-warning:hover {
    background-color: #616200 !important;
    color: #ffffff !important;
}

/* ── BADGES ──────────────────────────────────────────────────────── */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.03em !important;
}

/* ── TABS ────────────────────────────────────────────────────────── */
.fi-tabs-tab {
    color: #6b7b6e !important;
    font-weight: 500 !important;
    font-size: 14px !important;         /* body-md */
}

/* ── MODAL ───────────────────────────────────────────────────────── */
.fi-modal-window {
    background-color: #ffffff !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e5e2e1 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
}

/* ── DROPDOWN ────────────────────────────────────────────────────── */
.fi-dropdown-list {
    background-color: #ffffff !important;
    border: 1px solid #e5e2e1 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ── REPEATER ────────────────────────────────────────────────────── */
.fi-fo-repeater-item-header {
    background-color: #f6f3f2 !important;
    border-left: 3px solid #006d3f !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
}

/* ── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f6f3f2; }
::-webkit-scrollbar-thumb { background: #bacbbc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6b7b6e; }

/* ── TOPBAR NAV — layout (sin colores) ──────────────────────────── */
.fi-topbar-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
}
.fi-topbar-nav::-webkit-scrollbar {
    display: none;
}
.fi-topbar-item {
    flex: 0 0 auto;
    flex-direction: row !important;
}
.fi-topbar-item-icon { display: inline-block; }
.fi-topbar-item-label { display: inline-block; }

@media (min-width: 1024px) {
    .fi-topbar-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

/* buttons */
.fi-btn>.fi-icon{
    color: var(--gray-950);
}
.fi-color-primary .fi-icon{
        background:#10ef91 !important;
}

.fi-color-primary{
    background:#10ef91 !important;
}
.fi-color-primary:hover,.fi-color-primary:hover .fi-icon{
    background:#006d3f !important;
    color:#ffffff !important;
}

/*tabs*/
.fi-tabs-item .fi-tabs-item-label {
    color: var(--gray-600);
}
.fi-tabs-item .fi-icon {
    color: var(--gray-600);
}

.fi-tabs-item.fi-active {
    background-color: var(--gray-100);
}

.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--gray-950);
}

.fi-tabs-item.fi-active .fi-icon {
    color: var(--gray-950);
}
/* badges */
.fi-badge {
    font-weight: 600 !important;
    color: #3b4a3f ;
    background-color: #ebe7e7;
}
.fi-badge.fi-color-primary ,.fi-badge.fi-color-primary svg{
    background-color: #16a34a !important;
    color:#ffffff !important;
}
.fi-badge.fi-color-primary:hover {
    background-color: #00673b !important;
    color:#ffffff !important;
}
.fi-color-warning {
    background-color: #fef3c7 !important;
    color:#92400e !important;
}

.fi-color-success{
    background-color: #cffce9 !important;
    color:#00673b !important;
}

.fi-color-danger{
    background-color: #fef3f2 !important;
    color:#ba1a1a !important;
}

.fi-color-info{
    background-color: #e0e7ff !important;
    color:#1e3a8a !important;
}

/*tables*/

.fi-ta-table>thead>tr{
 background-color: #f0edec !important;
}

.fi-ta-table .fi-ta-icon svg{
    border-radius: 0.75rem !important;
}

.fi-ta-filter-indicators-badges-ctn  button svg{
    border-radius: 0.75rem !important;
}

/* Filtros */
.fi-icon-btn {
   color: #16a34a !important;
}

/* ── ETIQUETAS DE FILTROS ACTIVOS ────────────────────────────────── */
/* Estilo outline: borde coloreado + fondo muy claro, sin relleno sólido */
.fi-ta-filter-indicators-badges-ctn .fi-badge {
    background-color: #f5f5f4 !important;
    color: #3b4a3f !important;
    border: 1px solid #bacbbc !important;
    font-weight: 600 !important;
}
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-primary,
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-primary svg {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #16a34a !important;
}
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-success,
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-success svg {
    background-color: #f0fdf4 !important;
    color: #00673b !important;
    border: 1px solid #16a34a !important;
}
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-danger,
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-danger svg {
    background-color: #fff1f2 !important;
    color: #ba1a1a !important;
    border: 1px solid #ba1a1a !important;
}
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-warning,
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-warning svg {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #d97706 !important;
}
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-info,
.fi-ta-filter-indicators-badges-ctn .fi-badge.fi-color-info svg {
    background-color: #eef2ff !important;
    color: #1e3a8a !important;
    border: 1px solid #6366f1 !important;
}

/* ── BOTÓN RESETEAR FILTROS ──────────────────────────────────────── */
.fi-ta-filters-header .fi-link.fi-color-danger {
    background-color: #fff1f2 !important;
    color: #ba1a1a !important;
    border: 1px solid #ba1a1a !important;
    border-radius: 0.5rem !important;
    padding: 0.25rem 0.75rem !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    text-decoration: none !important;
    transition: background-color 0.15s, color 0.15s !important;
}
.fi-ta-filters-header .fi-link.fi-color-danger:hover {
    background-color: #fecdd3 !important;
    color: #93000a !important;
    border-color: #93000a !important;
}