:root {
    --saipe-green: #06803B;
    --saipe-green-deep: #064E2B;
    --saipe-green-dark: #033D22;
    --saipe-green-soft: #F3F7EA;
    --saipe-border: #E4E8DD;
    --saipe-orange: #F39A3D;
}

/* Fondo login */
.fi-simple-layout {
    background:
        radial-gradient(circle at top left, rgba(6, 128, 59, 0.13), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(243, 154, 61, 0.12), transparent 28rem),
        linear-gradient(135deg, #ffffff 0%, #F3F7EA 100%) !important;
}

/* Tarjeta login */
.fi-simple-main {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(228, 232, 221, 0.95) !important;
    border-radius: 30px !important;
    box-shadow: 0 24px 70px rgba(3, 61, 34, 0.15) !important;
}

/* Logo login */
.fi-logo img {
    max-height: 4.4rem !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Titulo login */
.fi-simple-header-heading {
    color: var(--saipe-green-dark) !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
}

/* Labels */
.fi-fo-field-wrp-label label,
.fi-checkbox-input + span {
    color: #1F2933 !important;
    font-weight: 750 !important;
}

/* Inputs */
.fi-input-wrp {
    border-radius: 14px !important;
    border-color: rgba(6, 78, 43, 0.22) !important;
    background: #ffffff !important;
}

.fi-input {
    color: #1F2933 !important;
}

/* Boton primario */
.fi-btn-color-primary {
    background-color: var(--saipe-green) !important;
    border-radius: 14px !important;
    font-weight: 850 !important;
    box-shadow: 0 14px 28px rgba(6, 128, 59, 0.24) !important;
}

.fi-btn-color-primary:hover {
    background-color: var(--saipe-green-deep) !important;
}

/* Sidebar y navegacion admin */
.fi-sidebar-item-active a,
.fi-sidebar-item a:hover {
    background-color: rgba(6, 128, 59, 0.12) !important;
}

.fi-sidebar-item-active svg,
.fi-sidebar-item-active span,
.fi-sidebar-item a:hover svg,
.fi-sidebar-item a:hover span {
    color: var(--saipe-green) !important;
}

/* Tarjetas y tablas */
.fi-section,
.fi-ta-ctn,
.fi-wi-widget,
.fi-card {
    border-radius: 20px !important;
}

.fi-badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

/* Corrección labels login en fondo claro */
.fi-simple-main .fi-fo-field-wrp-label,
.fi-simple-main .fi-fo-field-wrp-label label,
.fi-simple-main .fi-fo-field-wrp-label span,
.fi-simple-main label,
.fi-simple-main label span {
    color: #1F2933 !important;
}

.fi-simple-main .fi-fo-field-wrp-label .text-danger-600,
.fi-simple-main .fi-fo-field-wrp-label .dark\:text-danger-400 {
    color: #DC2626 !important;
}

/* Texto de checkbox Recordarme */
.fi-simple-main .fi-checkbox-input + span,
.fi-simple-main .fi-checkbox-list-option-label,
.fi-simple-main .fi-fieldset label span {
    color: #1F2933 !important;
}

/* Inputs en login */
.fi-simple-main input {
    color: #1F2933 !important;
}

.fi-simple-main input::placeholder {
    color: #9CA3AF !important;
}


/* ===============================
   Panel interno SAIPE - ajuste seguro
   =============================== */

body.fi-body {
    background:
        radial-gradient(circle at top left, rgba(6, 128, 59, 0.07), transparent 32rem),
        linear-gradient(135deg, #ffffff 0%, #F3F7EA 100%) !important;
}

/* Sidebar claro institucional */
.fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #E4E8DD !important;
}

.fi-sidebar-header {
    background: #ffffff !important;
    border-bottom: 1px solid #E4E8DD !important;
}

.fi-sidebar-item-label,
.fi-sidebar-group-label {
    color: #1F2933 !important;
}

.fi-sidebar-group-label {
    color: #5F6B66 !important;
    font-weight: 800 !important;
}

.fi-sidebar-item-active a {
    background: rgba(6, 128, 59, 0.12) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active svg {
    color: #06803B !important;
}

/* Topbar claro */
.fi-topbar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #E4E8DD !important;
}

/* Títulos */
.fi-header-heading,
.fi-page-heading,
.fi-page-heading h1 {
    color: #033D22 !important;
    font-weight: 900 !important;
}

/* Stats overview: tarjetas claras y texto legible */
.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-stat > div,
.fi-wi-stats-overview-stat .fi-section,
.fi-wi-stats-overview-stat .fi-card {
    background: #ffffff !important;
    border-color: #E4E8DD !important;
    color: #1F2933 !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 45px rgba(3, 61, 34, 0.08) !important;
}

/* Textos internos de stats */
.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-stat * {
    color: #1F2933 !important;
}

/* Números de stats */
.fi-wi-stats-overview-stat .text-3xl,
.fi-wi-stats-overview-stat .text-2xl,
.fi-wi-stats-overview-stat .text-xl {
    color: #033D22 !important;
    font-weight: 900 !important;
}

/* Íconos de stats */
.fi-wi-stats-overview-stat svg {
    color: #06803B !important;
}

/* Secciones y tablas, sin afectar login */
.fi-main .fi-section,
.fi-main .fi-ta-ctn {
    background: #ffffff !important;
    border: 1px solid #E4E8DD !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 36px rgba(3, 61, 34, 0.06) !important;
}

/* Buscador */
.fi-topbar input,
.fi-global-search-field input {
    background: #ffffff !important;
    color: #1F2933 !important;
}

/* Corrección: evitar doble capa en tarjetas del escritorio */
.fi-wi-stats-overview-stat > div,
.fi-wi-stats-overview-stat .fi-section,
.fi-wi-stats-overview-stat .fi-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: inherit !important;
}

/* Tarjeta real de estadísticas */
.fi-wi-stats-overview-stat {
    background: #ffffff !important;
    border: 1px solid #E4E8DD !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 36px rgba(3, 61, 34, 0.08) !important;
    padding: 1.35rem !important;
    overflow: hidden !important;
}

/* Espaciado y legibilidad dentro de cada tarjeta */
.fi-wi-stats-overview-stat * {
    color: #1F2933 !important;
}

.fi-wi-stats-overview-stat svg {
    color: #06803B !important;
}

.fi-wi-stats-overview-stat .text-3xl,
.fi-wi-stats-overview-stat .text-2xl,
.fi-wi-stats-overview-stat .text-xl {
    color: #033D22 !important;
    font-weight: 900 !important;
}

/* Descripciones de las estadísticas */
.fi-wi-stats-overview-stat p,
.fi-wi-stats-overview-stat span {
    line-height: 1.35 !important;
}

/* ===============================
   Escritorio SAIPE - tarjetas flotantes 3D
   =============================== */

/* Quitar cualquier contenedor visual alrededor de las tarjetas */
.fi-main .fi-wi-stats-overview,
.fi-main .fi-wi-stats-overview > div,
.fi-main .fi-wi-stats-overview > section,
.fi-main .fi-wi-stats-overview .fi-section:not(.fi-wi-stats-overview-stat),
.fi-main .fi-wi-stats-overview .fi-card:not(.fi-wi-stats-overview-stat) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* El grid de stats debe estar sobre el fondo institucional, no dentro de otra caja */
.fi-main .fi-wi-stats-overview .grid,
.fi-main .fi-wi-stats-overview [class*="grid"] {
    background: transparent !important;
}

/* Tarjeta real: efecto flotante / 3D */
.fi-main .fi-wi-stats-overview-stat {
    position: relative !important;
    isolation: isolate !important;
    background:
        radial-gradient(circle at top right, rgba(6, 128, 59, 0.08), transparent 42%),
        linear-gradient(145deg, #ffffff 0%, #FAFCF7 100%) !important;
    border: 1px solid rgba(228, 232, 221, 0.98) !important;
    border-radius: 26px !important;
    padding: 1.45rem !important;
    overflow: hidden !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.95) inset,
        0 18px 26px -18px rgba(3, 61, 34, 0.45),
        0 30px 60px rgba(3, 61, 34, 0.13) !important;
    transform: translateY(0) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

/* Luz suave interna */
.fi-main .fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at top left, rgba(243, 154, 61, 0.08), transparent 34%),
        radial-gradient(circle at bottom right, rgba(6, 128, 59, 0.07), transparent 40%);
    pointer-events: none;
}

/* Sombra inferior para profundidad */
.fi-main .fi-wi-stats-overview-stat::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -14px;
    height: 22px;
    z-index: -2;
    border-radius: 999px;
    background: rgba(3, 61, 34, 0.16);
    filter: blur(16px);
    pointer-events: none;
}

/* Hover sutil */
.fi-main .fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(6, 128, 59, 0.22) !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.95) inset,
        0 22px 30px -18px rgba(3, 61, 34, 0.50),
        0 36px 72px rgba(3, 61, 34, 0.18) !important;
}

/* Quitar doble capa interna */
.fi-main .fi-wi-stats-overview-stat > div,
.fi-main .fi-wi-stats-overview-stat .fi-section,
.fi-main .fi-wi-stats-overview-stat .fi-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Texto e iconos */
.fi-main .fi-wi-stats-overview-stat,
.fi-main .fi-wi-stats-overview-stat * {
    color: #1F2933 !important;
}

.fi-main .fi-wi-stats-overview-stat svg {
    color: #06803B !important;
}

.fi-main .fi-wi-stats-overview-stat .text-3xl,
.fi-main .fi-wi-stats-overview-stat .text-2xl,
.fi-main .fi-wi-stats-overview-stat .text-xl {
    color: #033D22 !important;
    font-weight: 900 !important;
}

/* Quitar tinte verde interno de las tarjetas del escritorio */
.fi-main .fi-wi-stats-overview-stat {
    background: linear-gradient(145deg, #ffffff 0%, #ffffff 100%) !important;
}

/* Eliminar luces/gradientes internos de las tarjetas */
.fi-main .fi-wi-stats-overview-stat::before {
    background: transparent !important;
}

/* Mantener profundidad 3D sin color verde dentro */
.fi-main .fi-wi-stats-overview-stat {
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.95) inset,
        0 18px 26px -18px rgba(3, 61, 34, 0.38),
        0 30px 60px rgba(3, 61, 34, 0.12) !important;
}

/* ===============================
   Corrección listados internos SAIPE
   Roles, usuarios, permisos, casos, alertas, etc.
   =============================== */

/* Contenedores de tablas/listados */
.fi-main .fi-ta,
.fi-main .fi-ta-ctn,
.fi-main .fi-ta-content,
.fi-main .fi-section {
    background: #ffffff !important;
    color: #1F2933 !important;
    border-color: #E4E8DD !important;
}

/* Encabezados, celdas y filas */
.fi-main .fi-ta table,
.fi-main .fi-ta thead,
.fi-main .fi-ta tbody,
.fi-main .fi-ta tr,
.fi-main .fi-ta th,
.fi-main .fi-ta td,
.fi-main .fi-ta-cell,
.fi-main .fi-ta-header-cell,
.fi-main .fi-ta-row {
    background-color: #ffffff !important;
    color: #1F2933 !important;
}

/* Texto de columnas, registros y campos */
.fi-main .fi-ta *,
.fi-main .fi-ta-text,
.fi-main .fi-ta-text-item,
.fi-main .fi-ta-text-item-label,
.fi-main .fi-ta-column-header-cell-label,
.fi-main .fi-ta-cell-label,
.fi-main .fi-ta-summary,
.fi-main .fi-ta-empty-state,
.fi-main .fi-pagination,
.fi-main .fi-pagination *,
.fi-main .fi-breadcrumbs,
.fi-main .fi-breadcrumbs * {
    color: #1F2933 !important;
}

/* Encabezados de columnas */
.fi-main .fi-ta th,
.fi-main .fi-ta-header-cell,
.fi-main .fi-ta-column-header-cell-label {
    color: #033D22 !important;
    font-weight: 850 !important;
}

/* Acciones: Editar, Ver, Crear, etc. */
.fi-main .fi-link,
.fi-main .fi-link *,
.fi-main .fi-ac-action,
.fi-main .fi-ac-action *,
.fi-main .fi-ta-actions,
.fi-main .fi-ta-actions * {
    color: #06803B !important;
    font-weight: 750 !important;
}

/* Botones principales */
.fi-main .fi-btn-color-primary,
.fi-main .fi-btn-color-primary * {
    background-color: #06803B !important;
    color: #ffffff !important;
}

/* Botones secundarios/ghost */
.fi-main .fi-btn,
.fi-main .fi-btn * {
    color: inherit;
}

/* Buscadores, selects, inputs y filtros */
.fi-main input,
.fi-main select,
.fi-main textarea,
.fi-main .fi-input,
.fi-main .fi-select-input,
.fi-main .fi-input-wrp,
.fi-main .fi-select-input-wrp {
    background: #ffffff !important;
    color: #1F2933 !important;
    border-color: rgba(6, 78, 43, 0.22) !important;
}

.fi-main input::placeholder,
.fi-main textarea::placeholder {
    color: #6B7280 !important;
}

/* Checkboxes */
.fi-main input[type="checkbox"] {
    border-color: #9CA3AF !important;
}

/* Badges / etiquetas de permisos */
.fi-main .fi-badge {
    background: rgba(6, 128, 59, 0.10) !important;
    border: 1px solid rgba(6, 128, 59, 0.22) !important;
    color: #064E2B !important;
    font-weight: 800 !important;
}

.fi-main .fi-badge * {
    color: #064E2B !important;
}

/* Texto secundario tipo "Mostrar 60 más", contador de resultados, ayuda */
.fi-main .fi-ta-text-gray,
.fi-main .text-gray-400,
.fi-main .text-gray-500,
.fi-main .text-gray-600,
.fi-main .dark\:text-gray-400,
.fi-main .dark\:text-gray-300,
.fi-main .dark\:text-gray-200 {
    color: #5F6B66 !important;
}

/* Filas hover */
.fi-main .fi-ta-row:hover,
.fi-main .fi-ta-row:hover td {
    background: #F8FBF3 !important;
}

/* Dropdowns y paneles flotantes */
.fi-main .fi-dropdown-panel,
.fi-main .fi-dropdown-list,
.fi-main .fi-modal-window {
    background: #ffffff !important;
    color: #1F2933 !important;
    border-color: #E4E8DD !important;
}

/* Evitar textos blancos heredados en interiores */
.fi-main .text-white,
.fi-main .dark\:text-white {
    color: #1F2933 !important;
}

/* ===============================
   FIX DEFINITIVO VISIBILIDAD TABLAS FILAMENT
   =============================== */

/* Caja principal de tablas/listados */
html body .fi-main .fi-ta,
html body .fi-main .fi-ta-ctn,
html body .fi-main .fi-ta-content,
html body .fi-main [class*="fi-ta-"] {
    background-color: #ffffff !important;
    border-color: #E4E8DD !important;
}

/* Todo texto dentro de tablas/listados */
html body .fi-main .fi-ta,
html body .fi-main .fi-ta *,
html body .fi-main .fi-ta-ctn,
html body .fi-main .fi-ta-ctn *,
html body .fi-main [class*="fi-ta-"],
html body .fi-main [class*="fi-ta-"] * {
    color: #1F2933 !important;
}

/* Encabezados de tabla */
html body .fi-main .fi-ta th,
html body .fi-main .fi-ta th *,
html body .fi-main .fi-ta-header-cell,
html body .fi-main .fi-ta-header-cell *,
html body .fi-main [class*="header-cell"],
html body .fi-main [class*="header-cell"] * {
    color: #033D22 !important;
    font-weight: 800 !important;
}

/* Filas y celdas */
html body .fi-main .fi-ta tr,
html body .fi-main .fi-ta td,
html body .fi-main .fi-ta tbody,
html body .fi-main .fi-ta-row,
html body .fi-main .fi-ta-cell {
    background-color: #ffffff !important;
    color: #1F2933 !important;
}

/* Hover de filas */
html body .fi-main .fi-ta-row:hover,
html body .fi-main .fi-ta-row:hover td,
html body .fi-main .fi-ta tbody tr:hover,
html body .fi-main .fi-ta tbody tr:hover td {
    background-color: #F8FBF3 !important;
}

/* Acciones como Editar */
html body .fi-main .fi-ta-actions,
html body .fi-main .fi-ta-actions *,
html body .fi-main .fi-link,
html body .fi-main .fi-link *,
html body .fi-main a[href*="/edit"],
html body .fi-main a[href*="/edit"] * {
    color: #06803B !important;
    font-weight: 750 !important;
}

/* Badges / etiquetas */
html body .fi-main .fi-badge,
html body .fi-main .fi-badge * {
    background-color: rgba(6, 128, 59, 0.10) !important;
    border-color: rgba(6, 128, 59, 0.22) !important;
    color: #064E2B !important;
    font-weight: 800 !important;
}

/* Paginación y resumen */
html body .fi-main .fi-pagination,
html body .fi-main .fi-pagination *,
html body .fi-main [class*="pagination"],
html body .fi-main [class*="pagination"] *,
html body .fi-main [class*="summary"],
html body .fi-main [class*="summary"] * {
    color: #5F6B66 !important;
}

/* Inputs, buscadores y selects dentro de listados */
html body .fi-main .fi-ta input,
html body .fi-main .fi-ta select,
html body .fi-main .fi-ta textarea,
html body .fi-main .fi-ta .fi-input-wrp,
html body .fi-main .fi-ta .fi-select-input,
html body .fi-main .fi-ta .fi-select-input-wrp {
    background-color: #ffffff !important;
    color: #1F2933 !important;
    border-color: rgba(6, 78, 43, 0.22) !important;
}

/* Placeholders */
html body .fi-main .fi-ta input::placeholder,
html body .fi-main .fi-ta textarea::placeholder {
    color: #6B7280 !important;
}

/* Íconos dentro de tablas */
html body .fi-main .fi-ta svg {
    color: #5F6B66 !important;
}

/* Íconos de acciones */
html body .fi-main .fi-ta-actions svg,
html body .fi-main a[href*="/edit"] svg {
    color: #06803B !important;
}

/* Evitar que clases dark/text-white de Tailwind dejen textos invisibles */
html body .fi-main .fi-ta .text-white,
html body .fi-main .fi-ta .dark\:text-white,
html body .fi-main .fi-ta .dark\:text-gray-100,
html body .fi-main .fi-ta .dark\:text-gray-200,
html body .fi-main .fi-ta .dark\:text-gray-300,
html body .fi-main .fi-ta .dark\:text-gray-400,
html body .fi-main .fi-ta .text-gray-100,
html body .fi-main .fi-ta .text-gray-200,
html body .fi-main .fi-ta .text-gray-300,
html body .fi-main .fi-ta .text-gray-400 {
    color: #1F2933 !important;
}

/* Texto secundario tenue, pero legible */
html body .fi-main .fi-ta .text-gray-500,
html body .fi-main .fi-ta .text-gray-600,
html body .fi-main .fi-ta .text-slate-500,
html body .fi-main .fi-ta .text-slate-600 {
    color: #5F6B66 !important;
}

/* ===============================
   Regla institucional: botones verdes con texto blanco
   =============================== */

html body .fi-btn-color-primary,
html body .fi-btn-color-primary *,
html body .fi-btn.fi-color-primary,
html body .fi-btn.fi-color-primary *,
html body .fi-main .fi-btn-color-primary,
html body .fi-main .fi-btn-color-primary *,
html body .fi-modal .fi-btn-color-primary,
html body .fi-modal .fi-btn-color-primary *,
html body .fi-ac-btn-action.fi-color-primary,
html body .fi-ac-btn-action.fi-color-primary * {
    color: #ffffff !important;
}

/* Mantener fondo verde institucional en botones primarios */
html body .fi-btn-color-primary,
html body .fi-btn.fi-color-primary,
html body .fi-main .fi-btn-color-primary,
html body .fi-modal .fi-btn-color-primary,
html body .fi-ac-btn-action.fi-color-primary {
    background-color: #06803B !important;
    border-color: #06803B !important;
}

/* Hover de botones verdes */
html body .fi-btn-color-primary:hover,
html body .fi-btn.fi-color-primary:hover,
html body .fi-main .fi-btn-color-primary:hover,
html body .fi-modal .fi-btn-color-primary:hover,
html body .fi-ac-btn-action.fi-color-primary:hover {
    background-color: #064E2B !important;
    border-color: #064E2B !important;
    color: #ffffff !important;
}