/*
 * Estilo del panel: naranja del logotipo (el mismo de la app de empleados),
 * botones en forma de píldora y tonales, con íconos y efectos suaves.
 *
 * - Principal (Crear, Marcación manual…): naranja relleno con sombra.
 * - Secundarios: fondo claro del color de la acción, texto oscuro legible.
 * - En las ventanas de confirmación, el botón que confirma sigue relleno.
 * - Todo el movimiento se apaga con «reducir movimiento».
 */

/* ---------- Botones ---------- */
.fi-btn {
    border-radius: 999px !important;
    padding-left: 1.05rem !important;
    padding-right: 1.05rem !important;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease !important;
}

.fi-btn .fi-btn-icon {
    transition: transform .2s ease;
}

.fi-btn:not(:disabled):not([disabled]):hover {
    transform: translateY(-1px);
}

.fi-btn:not(:disabled):not([disabled]):hover .fi-btn-icon {
    transform: scale(1.12);
}

.fi-btn:not(:disabled):not([disabled]):active {
    transform: translateY(0) scale(.97);
}

.fi-btn:focus-visible,
.fi-icon-btn:focus-visible {
    outline: 3px solid rgba(234, 88, 12, .45) !important;
    outline-offset: 2px;
}

/* Principal: relleno con sombra naranja */
.fi-btn.fi-color-primary {
    box-shadow: 0 4px 12px rgba(194, 65, 12, .25) !important;
}

.fi-btn.fi-color-primary:not(:disabled):hover {
    box-shadow: 0 8px 20px rgba(194, 65, 12, .32) !important;
}

/* Secundarios tonales */
.fi-btn.fi-color-gray {
    background-color: #F5F0EB !important;
    color: #3F3833 !important;
    box-shadow: none !important;
}
.fi-btn.fi-color-gray .fi-btn-icon { color: #8A5A3C !important; }
.fi-btn.fi-color-gray:not(:disabled):hover { background-color: #EDE3D8 !important; }

.fi-btn.fi-color-warning {
    background-color: #FFF4EB !important;
    color: #9A3412 !important;
    box-shadow: none !important;
}
.fi-btn.fi-color-warning .fi-btn-icon { color: #C2410C !important; }
.fi-btn.fi-color-warning:not(:disabled):hover { background-color: #FFE8D6 !important; }

.fi-btn.fi-color-success {
    background-color: #ECFDF5 !important;
    color: #047857 !important;
    box-shadow: none !important;
}
.fi-btn.fi-color-success .fi-btn-icon { color: #059669 !important; }
.fi-btn.fi-color-success:not(:disabled):hover { background-color: #D1FAE5 !important; }

.fi-btn.fi-color-danger {
    background-color: #FEF2F2 !important;
    color: #B91C1C !important;
    box-shadow: none !important;
}
.fi-btn.fi-color-danger .fi-btn-icon { color: #DC2626 !important; }
.fi-btn.fi-color-danger:not(:disabled):hover { background-color: #FEE2E2 !important; }

.fi-btn.fi-color-info {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
    box-shadow: none !important;
}
.fi-btn.fi-color-info:not(:disabled):hover { background-color: #DBEAFE !important; }

/* En las ventanas de confirmación, el botón que confirma va relleno */
.fi-modal-footer-actions .fi-btn.fi-color-danger {
    background-color: #DC2626 !important;
    color: #fff !important;
}
.fi-modal-footer-actions .fi-btn.fi-color-danger .fi-btn-icon { color: #fff !important; }
.fi-modal-footer-actions .fi-btn.fi-color-danger:not(:disabled):hover { background-color: #B91C1C !important; }

.fi-modal-footer-actions .fi-btn.fi-color-success {
    background-color: #059669 !important;
    color: #fff !important;
}
.fi-modal-footer-actions .fi-btn.fi-color-success .fi-btn-icon { color: #fff !important; }

.fi-modal-footer-actions .fi-btn.fi-color-warning {
    background-color: #C2410C !important;
    color: #fff !important;
}
.fi-modal-footer-actions .fi-btn.fi-color-warning .fi-btn-icon { color: #fff !important; }

/* Botones de solo ícono (acciones de cada fila) */
.fi-icon-btn {
    border-radius: 999px !important;
    transition: background-color .15s ease, color .15s ease, transform .15s ease !important;
}
.fi-icon-btn:not(:disabled):hover {
    background-color: #FFF4EB;
    transform: scale(1.08);
}

/* Filas de tablas: un tono cálido al pasar el mouse */
.fi-ta-row {
    transition: background-color .12s ease;
}
.fi-ta-row:hover {
    background-color: #FFFBF7 !important;
}

/* ---------- Menú lateral ---------- */
.fi-sidebar-item-button {
    border-radius: 999px !important;
    transition: background-color .15s ease;
}
.fi-sidebar-item-button:hover {
    background-color: #FFF8F2 !important;
}
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: #FFF4EB !important;
}
.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #C2410C !important;
    font-weight: 700 !important;
}
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #C2410C !important;
}

/* ---------- Modo oscuro ---------- */
.dark .fi-btn.fi-color-gray { background-color: rgba(255, 255, 255, .08) !important; color: #E7E5E4 !important; }
.dark .fi-btn.fi-color-gray .fi-btn-icon { color: #FDBA74 !important; }
.dark .fi-btn.fi-color-gray:not(:disabled):hover { background-color: rgba(255, 255, 255, .14) !important; }
.dark .fi-btn.fi-color-warning { background-color: rgba(234, 88, 12, .18) !important; color: #FDBA74 !important; }
.dark .fi-btn.fi-color-warning .fi-btn-icon { color: #FDBA74 !important; }
.dark .fi-btn.fi-color-success { background-color: rgba(16, 185, 129, .18) !important; color: #6EE7B7 !important; }
.dark .fi-btn.fi-color-success .fi-btn-icon { color: #6EE7B7 !important; }
.dark .fi-btn.fi-color-danger { background-color: rgba(239, 68, 68, .18) !important; color: #FCA5A5 !important; }
.dark .fi-btn.fi-color-danger .fi-btn-icon { color: #FCA5A5 !important; }
.dark .fi-btn.fi-color-info { background-color: rgba(59, 130, 246, .18) !important; color: #93C5FD !important; }
.dark .fi-icon-btn:not(:disabled):hover { background-color: rgba(234, 88, 12, .15); }
.dark .fi-ta-row:hover { background-color: rgba(255, 255, 255, .03) !important; }
.dark .fi-sidebar-item-button:hover { background-color: rgba(234, 88, 12, .08) !important; }
.dark .fi-sidebar-item-active .fi-sidebar-item-button { background-color: rgba(234, 88, 12, .15) !important; }
.dark .fi-sidebar-item-active .fi-sidebar-item-label,
.dark .fi-sidebar-item-active .fi-sidebar-item-icon { color: #FDBA74 !important; }

/* ---------- Sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
    .fi-btn, .fi-btn .fi-btn-icon, .fi-icon-btn, .fi-ta-row, .fi-sidebar-item-button {
        transition: none !important;
    }
    .fi-btn:hover, .fi-btn:active, .fi-btn:hover .fi-btn-icon, .fi-icon-btn:hover {
        transform: none !important;
    }
}

/* ---------- Ingreso al panel ---------- */
.fi-simple-layout {
    background: #F3F4F6 !important;
}

.fi-simple-main {
    position: relative !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07) !important;
}

.fi-simple-main::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #C2410C, #FDBA74);
}

/* ---------- Tablas: la columna de acciones queda fija a la derecha ---------- */
/* Si una tabla tiene que deslizarse, aprobar, editar o el menú «⋯» siguen a la vista. */
.fi-ta-actions-cell,
.fi-ta-actions-header-cell {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: -10px 0 12px -12px rgba(31, 26, 23, .35);
}
.fi-ta-row:hover .fi-ta-actions-cell {
    background-color: #FFFBF7;
}
/* Con el menú «⋯» abierto, esa celda pasa al frente: el menú no queda
   detrás de los botones de las filas de abajo. */
.fi-ta-actions-cell:focus-within,
.fi-ta-actions-cell:has(.fi-dropdown-panel:not([style*="display: none"])) {
    z-index: 40;
}
.dark .fi-ta-actions-cell,
.dark .fi-ta-actions-header-cell {
    background-color: rgb(var(--gray-900));
}
.dark .fi-ta-row:hover .fi-ta-actions-cell {
    background-color: rgb(var(--gray-800));
}