/* =========================
   COLOR PRIMARIO FILAMENT
========================= */

:root {
    --primary-50:  #fdf2f3;
    --primary-100: #f9d5d8;
    --primary-200: #f2aab0;
    --primary-300: #eb8088;
    --primary-400: #e4555f;
    --primary-500: #9f0d1b; /* 👈 GUINDA PRINCIPAL */
    --primary-600: #8c0b18;
    --primary-700: #6f0a13;
    --primary-800: #55080f;
    --primary-900: #3a050a;
}

/* =========================
   VARIABLES ICJO
========================= */

:root {
    --icjo-guinda: #9f0d1b;
    --icjo-guinda-dark: #6f0a13;
    --icjo-gray-bg: #e7e7e7;
}

/* =========================
   LOGIN
========================= */

.fi-simple-layout {
    min-height: 100vh !important;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.55)
    ), url('/images/login-bg.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

.fi-simple-main {
    background: transparent !important;
    position: relative !important;
    z-index: 10 !important;
}

.fi-simple-main > div {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(3px);
    border-radius: 16px !important;
    padding: 2rem !important;
}

.fi-simple-header {
    text-align: center !important;
    align-items: center !important;
}

.fi-simple-header::before {
    content: "";
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto 1rem auto;
    background-image: url('/images/logo-icjo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fi-simple-header-heading {
    display: none !important;
}

.fi-simple-header-subheading {
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    color: #790429 !important;
}

/* =========================
   LOGIN - MISMO ESTILO EN MODO OSCURO
========================= */

.dark .fi-simple-layout {
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.55)
    ), url('/images/login-bg.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
/* Forzar texto específico del título */
.fi-simple-main [class*="logo"],
.fi-simple-main [class*="brand"],
.fi-simple-main [class*="heading"] {
    color: #111827 !important;
}
.dark .fi-simple-main {
    background: transparent !important;
}

.dark .fi-simple-main > div {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(3px);
    border-radius: 16px !important;
    padding: 2rem !important;
}

.dark .fi-simple-header::before {
    background-image: url('/images/logo-icjo.svg') !important;
}

.dark .fi-simple-header-heading {
    display: none !important;
}

.dark .fi-simple-header-subheading {
    color: #790429 !important;
}

.dark .fi-simple-main label,
.dark .fi-simple-main span,
.dark .fi-simple-main p,
.dark .fi-simple-main .fi-fo-field-wrp-label span {
    color: #374151 !important;
}

.dark .fi-simple-main input {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

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

.dark .fi-simple-main .fi-btn {
    background: #9f0712 !important;
    color: #ffffff !important;
}

.dark .fi-simple-main .fi-btn span {
    color: #ffffff !important;
}

.dark .fi-simple-main svg {
    color: #6b7280 !important;
}
/* =========================
   LOGO DASHBOARD
========================= */

.fi-sidebar-header .fi-logo {
    display: none !important;
}

/* =========================
   BOTONES GENERALES
========================= */

.fi-btn-primary {
    background-color: #790429 !important;
    color: #ffffff !important;
}

.fi-btn-primary:hover {
    background-color: var(--icjo-guinda-dark) !important;
}

/* =========================
   SOLO MODO CLARO
========================= */

html:not(.dark) .fi-main,
html:not(.dark) .fi-page {
    background-color: var(--icjo-gray-bg) !important;
}

html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-nav {
    background-color: #f8f8f8 !important;
}

html:not(.dark) .fi-sidebar-item a {
    color: #374151 !important;
    transition: all 0.2s ease;
}

html:not(.dark) .fi-sidebar-item svg {
    color: #9ca3af !important;
}

/* Hover menú */
html:not(.dark) .fi-sidebar-item a:hover {
    background-color: var(--icjo-guinda) !important;
    color: #ffffff !important;
}

html:not(.dark) .fi-sidebar-item a:hover svg,
html:not(.dark) .fi-sidebar-item a:hover span {
    color: #ffffff !important;
}

/* Menú activo */
html:not(.dark) .fi-sidebar-item-active > a {
    background-color: var(--icjo-guinda) !important;
    color: #ffffff !important;
}

html:not(.dark) .fi-sidebar-item-active > a svg,
html:not(.dark) .fi-sidebar-item-active > a span {
    color: #ffffff !important;
}

/* Tabs activos */
html:not(.dark) .fi-tabs-item-active,
html:not(.dark) .fi-tabs-item[aria-selected="true"] {
    background-color: rgba(159, 13, 27, 0.08) !important;
    color: var(--icjo-guinda) !important;
    font-weight: 600 !important;
}

html:not(.dark) .fi-tabs-item-active span,
html:not(.dark) .fi-tabs-item[aria-selected="true"] span {
    color: var(--icjo-guinda) !important;
}

/* Tabs hover */
html:not(.dark) .fi-tabs-item:hover {
    color: var(--icjo-guinda) !important;
}

/* Topbar */
html:not(.dark) .fi-topbar {
    border-bottom: 4px solid var(--icjo-guinda) !important;
}

/* Acciones tabla */
html:not(.dark) .fi-ta-actions a,
html:not(.dark) .fi-ta-actions button {
    color: var(--icjo-guinda) !important;
}

/* Botones primarios y peligrosos rellenos */
.fi-btn.fi-color-primary:not(.fi-outlined),
.fi-btn.fi-color-danger:not(.fi-outlined),
button.fi-btn-primary,
button.fi-btn.fi-color-primary:not(.fi-outlined),
button.fi-btn.fi-color-danger:not(.fi-outlined),
a.fi-btn.fi-color-primary:not(.fi-outlined),
a.fi-btn.fi-color-danger:not(.fi-outlined) {
    background-color: var(--icjo-guinda) !important;
    border-color: var(--icjo-guinda) !important;
    --text: #ffffff !important;
    --dark-text: #ffffff !important;
    color: #ffffff !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon,
.fi-btn.fi-color-danger:not(.fi-outlined) > .fi-icon,
button.fi-btn-primary > .fi-icon,
button.fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon,
button.fi-btn.fi-color-danger:not(.fi-outlined) > .fi-icon,
a.fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon,
a.fi-btn.fi-color-danger:not(.fi-outlined) > .fi-icon {
    color: #ffffff !important;
    --text: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Hover */
.fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn.fi-color-danger:not(.fi-outlined):hover,
button.fi-btn-primary:hover,
button.fi-btn.fi-color-primary:not(.fi-outlined):hover,
button.fi-btn.fi-color-danger:not(.fi-outlined):hover,
a.fi-btn.fi-color-primary:not(.fi-outlined):hover,
a.fi-btn.fi-color-danger:not(.fi-outlined):hover {
    background-color: var(--icjo-guinda-dark) !important;
    border-color: var(--icjo-guinda-dark) !important;
    --text: #ffffff !important;
    --dark-text: #ffffff !important;
}

/* Botones secundarios (ghost, outline) */
.fi-btn {
    border-color: var(--icjo-guinda) !important;
}

/* Focus inputs */
.fi-input:focus,
.fi-input-wrp:focus-within {
    border-color: var(--icjo-guinda) !important;
    box-shadow: 0 0 0 1px var(--icjo-guinda) !important;
}

/* =========================
   REDUCIR ALTO DE FILAS (REGISTROS)
========================= */



/* Hover elegante */
.fi-ta-row:hover {
    background-color: rgba(159, 13, 27, 0.05);
}

/* =========================
   FIX LAYOUT FILAMENT 4
   Evita franjas blancas al colapsar sidebar
========================= */

html:not(.dark),
html:not(.dark) body,
html:not(.dark) .fi-layout,
html:not(.dark) .fi-main-ctn,
html:not(.dark) .fi-main,
html:not(.dark) .fi-page {
    background-color: var(--icjo-gray-bg) !important;
}

/* Sidebar completo, incluyendo header y navegación */
html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-header,
html:not(.dark) .fi-sidebar-nav,
html:not(.dark) .fi-sidebar-nav-groups {
    background-color: #f8f8f8 !important;
}

/* Topbar para que no deje fondo blanco en los costados */
html:not(.dark) .fi-topbar,
html:not(.dark) .fi-topbar nav {
    background-color: #ffffff !important;
}

/* El área principal debe ocupar todo el ancho disponible */
html:not(.dark) .fi-main-ctn {
    min-height: 100vh !important;
}